読みやすいフォント サイズを使用する

このルールは、ページ内のテキストが小さすぎて読みにくいことを PageSpeed Insights が検出した場合にトリガーされます。

概要

ウェブのフォント サイズは 4 つの一般的な単位(ピクセル(px)、ポイント(pt)、EM(em)、パーセント(%))で指定できます。

  • ピクセルは「CSS ピクセル」で、端末のサイズや密度によって異なります。
  • ポイントはピクセルとの関連で定義されます。1 ピクセルは 0.75 ポイントです。*
  • EM とパーセントは「相対的」な単位です。使用されるフォントの継承されたサイズとプロパティに対して相対的です。1 EM は 100 % に相当します。

* 「その他の情報」をご覧ください。

さらに、ビューポートが携帯端末のフォントの拡大縮小に影響を与えます。ビューポートが適切に設定されていないページは携帯端末上で縮小され、ページ内のテキストのサイズが小さくなって読みにくくなることがよくあります。

推奨される解決方法

まず、さまざまな端末でフォントが期待どおりに拡大縮小されるように、ビューポートを設定します。ビューポートを設定したら、以下の追加の推奨事項を実装します。

  1. 16 CSS ピクセルの基本フォント サイズを使用します。使用するフォントのプロパティに基づいて、必要に応じてサイズを調整します。
  2. 基本サイズに対して相対的なサイズを使って、フォントの拡大縮小を定義します。
  3. テキストは文字間に縦方向のスペースが必要であり、フォントごとに調整する必要がある場合があります。一般的には、ブラウザのデフォルトの行の高さ 1.2 em をおすすめします。
  4. 使用されるフォントの数と拡大縮小を制限します。フォントの種類やサイズが多すぎると、乱雑で複雑すぎるページ レイアウトになります。

たとえば、次の CSS スニペットでは、基準フォント サイズとして 16 CSS ピクセルを定義し、フォント サイズが基準フォントの 75 %(12 CSS ピクセル)の「small」という CSS クラスと、125 %(20 CSS ピクセル)の「large」という CSS クラスを定義しています:

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

携帯端末に適用できるフォントに関するその他の推奨事項については、Android タイポグラフィ ガイドラインをご覧ください。

その他の情報

長さの単位の定義を理解するには、CSS 2.1 仕様を慎重に読む必要があります。仕様には、インチ、センチメートル、ミリメートル、パイカなど、この記事で取り上げていない他の単位も登場します。見落としやすいのは、CSS インチは物理的なインチと常に等しいとは限らない点です。

絶対的な単位はすべて、相互に相対的な値が定義されています。1 ピクセルは .75 ポイント、1 ポイントは 1/72 インチ、1 インチは 2.54 センチメートルといった具合です。しかし、これらの単位をどのように「固定」するかは、端末によって異なります。たとえば、紙に印刷する場合、1 インチは物理的な 1 インチに固定され、それ以外の単位は物理的なインチに対して相対的になります。しかし、携帯端末に表示されるときは、「参照ピクセル」という単位を使って固定します。1 CSS ピクセルはこの参照ピクセルに従って定義され、それ以外の単位(インチ、センチメートルなど)は CSS ピクセルに対して相対的に調整されます。そのため、携帯端末では通常、1 CSS インチは実際の物理的な 1 インチよりも小さいサイズで表示されます。

このような理由から、フォント サイズはピクセルを使って定義することをおすすめします。デザイナーや開発者によっては、インチやポイントが使用されているのを見て誤解する場合もあります。これらは物理的なサイズですが、必ずしも実際のサイズに対応しているとは限らないからです。ピクセルなら、表示される端末に応じてサイズが変わることが常に理解されます。

最後に、各フォントには、サイズやスペースなど、それぞれの特性があります。デフォルトでは、ブラウザには各フォントが 16 px(CSS ピクセル)で表示されます。これはほとんどの場合に適したデフォルトですが、特定のフォントでは調整が必要になります。つまり、フォントのさまざまなプロパティに対応するため、デフォルト サイズをこれより小さい値や大きい値に設定することができます。デフォルト サイズを設定したら、それより大きいフォントや小さいフォントを、ピクセルを使ってデフォルトに対して相対的に定義してください。これらのフォントは、ページのプライマリ コンテンツ、セカンダリ コンテンツ、その他のタイプのコンテンツのテキスト サイズを調整するのに使用されます。

一部のモバイル ブラウザでは、適切に設定されたビューポートがないページでフォントを拡大縮小しようとする場合があります。この拡大縮小の動作はブラウザによって異なるため、携帯端末に読みやすいフォントを配信するためにこの動作に頼るべきではありません。PageSpeed Insights では、ブラウザ固有のフォントの拡大縮小を適用せずに、ページ上のテキストを表示します。