フォントのサイズと行間と一行の文字数の最適な関係を導き出すオンラインツール -Golden Ratio Typography Calculator
Post on:2013年7月17日
テキストの読みやすさを考慮する際、カラーなどでのコントラストはもちろん重要ですが、フォントのサイズと行間、そして一行の文字数の幅も非常に重要なポイントです。
フォントのサイズと幅を元に最適な行間、幅を元に最適なサイズと行間などがチェックできるオンラインツールを紹介します。

Golden Ratio Typography Calculator
使い方は簡単です。
左サイドバーに、上からフォントのサイズ、コンテンツの幅を入力します。

設定画面
CPLはオプションで、一行についての文字数です。
設定が完了したら、「Set My Type!」をクリックします。

入力したフォントサイズとコンテンツ幅を元にしたサンプルが生成されます。
ページ上部のイエローのエリアに最適化のアドバイスが表示されます。
一つ目は、指定したフォントサイズとコンテンツ幅をベースにした最適なline-height。

二つ目は、コンテンツ幅をベースにした最適なフォントのサイズとline-height。
三つ目は、二つ目の代替案。
四つ目は、フォントサイズをベースにした最適なコンテンツの幅です。

フォントの種類も選択できるのですが、残念ながら日本語は現状無しです。
sponsors