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

FlowType.JSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

レスポンシブWebデザインにおいては画面幅によってコンテンツの表示が変化します。そのため意図した通りに表示されていないと感じることが多いかも知れません。そこで使ってみたいのがFlowType.JSです。


最初の表示です。一行目の終わりの文字は75です。


文字サイズを大きくしましたがやはり終わりは75です。


逆にもの凄く小さくしましたが75のままとなっています。

FlowType.JSではフォントサイズ、行の高さをベースに幅を決定しています。そのため意図した通りのテキストがそのまま表現できるようになっています。幅を縮めると一気にテキストがぐしゃぐしゃになってしまった、といった事態が防げそうです。


MOONGIFTはこう見る

FlowType.JSが役立ちそうな場面としてWebサイトのデザインサンプルがありそうです。最大の幅で見せた時にも、サムネイルとして狭い幅で表示した際にも同じ見え方が実現できます。画像を使うのと違って変更も容易です。

幅を最小にした場合には文字がとても小さいのでそのままの利用は難しいでしょう。しかしサムネイルであれば十分です。タイポグラフィをサムネイルで表現したりするのに使うと面白いかも知れません。

FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width.

simplefocus/FlowType.JS

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2