ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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


デモです。テキストの場所を変えたり、文字を離したりできます。


その結果のスタイル設定を表示できます。


emの他、px単位での表示もできます。


文字を縦方向にずらしてみました。


さらに文字を縮小したりできます。


ブックマークレットを使えば任意のサイトでkern.jsを試せます。


この場合もスタイル設定が取得できます。

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


MOONGIFTはこう見る

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

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

kern.js | fun with webfonts.

bstro/kern.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2