textfit.jsは、コンテナ内に表示するテキストをフィットさせることができるjQueryプラグインです。ブラウザサイズを縮小してもテキストのレイアウトを保持したまま縮小されるので、デザインをできるだけ統一させつつレスポンシブに対応したい人には最適ですね。
textfit.js
textfit.jsのデモページは以下からチェックできます。
デモページではタイトルに「textfit.js」、サブタイトルに「Fit text within its container」と表示されており、ブラウザ幅を縮小してもテキストが折り返されることなく、そのままの位置を保ちながら最適化されます。
常にコンテナ内にフィットするような仕組みなので、文字の位置などをそのままにしながらブラウザサイズに合わせて可変させたいという場面にはピッタリのプラグインといえますね。
HTMLタグ内には「data-textfit-min」と「data-textfit-max」の数値を指定することができます。data-textfit-minが最小値(ピクセル)、data-textfit-maxが最大値(ピクセル)です。ほかにも、「data-textfit-adjust」という項目も用意されています。
というわけで、ブラウザサイズを可変してもコンテナ内にうまくフィットさせれるテキストを実装したい人は、ぜひ「textfit.js」をチェックしてみてください。
textfit.jsのダウンロードや詳細は以下のページからどうぞ。