画面幅に応じて文字サイズ、高さを変更「FlowType.JS」
FlowType.JSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
レスポンシブWebデザインにおいては画面幅によってコンテンツの表示が変化します。そのため意図した通りに表示されていないと感じることが多いかも知れません。そこで使ってみたいのがFlowType.JSです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 11.13.19.1377601511.png)
最初の表示です。一行目の終わりの文字は75です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 11.13.24.1377601514.png)
文字サイズを大きくしましたがやはり終わりは75です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 11.13.35.1377601517.png)
逆にもの凄く小さくしましたが75のままとなっています。
FlowType.JSではフォントサイズ、行の高さをベースに幅を決定しています。そのため意図した通りのテキストがそのまま表現できるようになっています。幅を縮めると一気にテキストがぐしゃぐしゃになってしまった、といった事態が防げそうです。
MOONGIFTはこう見る
FlowType.JSが役立ちそうな場面としてWebサイトのデザインサンプルがありそうです。最大の幅で見せた時にも、サムネイルとして狭い幅で表示した際にも同じ見え方が実現できます。画像を使うのと違って変更も容易です。
幅を最小にした場合には文字がとても小さいのでそのままの利用は難しいでしょう。しかしサムネイルであれば十分です。タイポグラフィをサムネイルで表現したりするのに使うと面白いかも知れません。