Webの表現力は高く、ウィンドウの幅によってテキストの行数が変わってしまったりします。その結果、デザイナーの意図した表示にならないことも多く、かといって固定サイズにすると閲覧者にストレスを与えることにもなりかねません。 そこで使ってみたいのがtextFitです。テキストを枠の中に収まる形で最適化してくれるライブラリです。

textFitの使い方

利用例です。徐々にサイズが変わって、最終的に枠いっぱいに表示されているのが分かります。

文字のスペース、行の高さ、フォントなどもカスタマイズできます。

textFitを使うことで、枠の大きさに合わせた最大サイズの表示を簡単に実現できます。textFitは分かりやすいように段階的になっていますが、通常使う限りは一瞬で調整されるでしょう。ウィンドウの状態に合わせてフォントサイズを変える、新しい表現ができそうです。

textFitはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

デモ STRML/textFit: A jQuery-free component that quickly fits single and multi-line text to the width (and optionally height) of its container.