kern.jsはJavaScript製、WTFPLのソフトウェアです。

Webページ上にある文字が大きさを変えたり、配置を変更したらどう効果的になるか。それをWebブラウザ上で試せるのがkern.jsです。色々試すと、思いもしなかったインパクトあるデザインができるかも知れません。

[![](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.59.58_thumb.1374498323.png)](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.59.58.1374498323.png)
デモです。テキストの場所を変えたり、文字を離したりできます。

[![](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.05_thumb.1374498333.png)](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.05.1374498333.png)
その結果のスタイル設定を表示できます。

[![](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.12_thumb.1374498339.png)](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.12.1374498339.png)
emの他、px単位での表示もできます。

[![](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.28_thumb.1374498346.png)](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.28.1374498346.png)
文字を縦方向にずらしてみました。

[![](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.51_thumb.1374498354.png)](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.00.51.1374498354.png)
さらに文字を縮小したりできます。

[![](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.02.00_thumb.1374498366.png)](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.02.00.1374498366.png)
ブックマークレットを使えば任意のサイトでkern.jsを試せます。

[![](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.02.08_thumb.1374498372.png)](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 10.02.08.1374498372.png)
この場合もスタイル設定が取得できます。

kern.jsはテキストの配置を変えたり、文字サイズを文字ごとに変えて楽しめます。普段のスタイルシートの使い方とは異なるビジュアル的な変更は面白さがありそうです。

MOONGIFTはこう見る

まさにテキストだからこそできる面白さと言えます。画像ではこのようにユーザサイドで自由に変更したりはできません。ビジュアル的にタイポグラフィを変更できれば、デザイン全体におけるフォントサイズを整えたり、可読性を高める調整ができそうです。

Webブラウザを使う時間が長くなっているからこそ、その可読性やデザインのバランスはより強く求められるようになっています。実際のデザインを見つつ、その最終調整に使ってみるのが良さそうです。

kern.js | fun with webfonts.

bstro/kern.js