適切な行間を指定していますか?美しく見やすいサイトになる数値

マテリアルデザインが推奨するフォントサイズや行間

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

美しいサイトには、たっぷりの余白が設けられています。

見やすいサイトも、十分な余白があります。

多くの方が軽視しがちな余白は、美しさと見やすさに欠かせない要素です。

サイトデザインでの余白と言えば、 marginpadding を思い付くでしょう。

しかし、フォントサイズを指定する font-size と行の高さを指定する line-height も、行間という重要な余白を生み出します。

特にテキストが主体のサイトでは、適切な font-sizeline-height を指定することが必要不可欠。

「このサイトは見にくい!」と思われないように、 font-sizeline-height の適切値を把握しましょう。

マテリアルデザインが答えを教えてくれる

初めてアプリを使う方も迷うことなく使えるように、 Google が提唱しているデザインガイドラインがマテリアルデザインです。

このマテリアルデザインは、アプリだけではなくウェブサイトにも適用できます。

ガイドラインでは事細かくどのようにデザインすべきかを定めており、タイポグラフィに関しても知りたいことを全部教えてくれます。

まずフォントスタックは、すべての言語で以下の順での指定が推奨されています。

font-family: 'Roboto', 'Noto', sans-serif;

「No more tofu」の略称である Noto は、すでに Unicode 標準のすべての記号のデジタルタイプが提供されています。

日本語では Noto Sans CJK JPNoto Sans JapaneseNoto Serif CJK JP が利用可能です。 Noto Sans Japanese はウェブフォントとして提供されているため、手軽にサイトに Noto を指定できます。

また、ユーザー補助機能の拡大モードに対応するために、フォントは sp での指定が推奨されています。 Android 特有の単位である sp は、ウェブサイトでの em や rem に相当する相対単位です。

日本語のスタイル

マテリアルデザインでは、フォントのスタイルを12種類に区分しています。

適用箇所で区分された各スタイルは、フォントサイズ・フォントウェイト・行の高さ・行送りの可否( 2行以上での表示が可能か)が定められています。

高密度文字に分類されている日本語の推奨スタイルは、下記のとおりです。

sp は 1sp = 0.0625em = 1px 、 pt は 1pt = 1px と安易に考えて構いません。(通常ウェブサイトでは pt は使用しません。)

装飾 4
フォントウェイトLight
フォントサイズ112sp
行の高さ
行送り不可
装飾 3
フォントウェイトRegular
フォントサイズ56sp
行の高さ
行送り不可
装飾 2
フォントウェイトRegular
フォントサイズ45sp
行の高さ63pt
行送り
装飾 1
フォントウェイトRegular
フォントサイズ34sp
行の高さ48pt
行送り
見出し
フォントウェイトRegular
フォントサイズ24sp
行の高さ34pt
行送り
タイトル
フォントウェイトMedium
フォントサイズ21sp
行の高さ
行送り不可
小見出し 2
フォントウェイトRegular
フォントサイズ17sp(モバイル)・16sp(パソコン)
行の高さ30pt
行送り
小見出し 1
フォントウェイトRegular
フォントサイズ17sp(モバイル)・16sp(パソコン)
行の高さ26pt
行送り
本文 2
フォントウェイトMedium
フォントサイズ15sp(モバイル)・14sp(パソコン)
行の高さ26pt
行送り
本文 1
フォントウェイトRegular
フォントサイズ15sp(モバイル)・14sp(パソコン)
行の高さ23pt
行送り
キャプション
フォントウェイトRegular
フォントサイズ13sp
行の高さ
行送り不可
ボタン
フォントウェイトMedium
フォントサイズ15sp
行の高さ
行送り不可

見出しや本文 2 などの適用箇所は、ある程度の目安です。

本文に小見出し 2 や小見出し 1 を指定しても構いません。

しかし、フォントサイズ・フォントウェイト・行の高さ・行送りの可否は、必ずセットで使用します。

本文のフォントサイズを 16px にするのなら、行の高さは 26px または 30px での指定です。

ちなみに、今お読みになっているこの文章は、フォントサイズ 16px (モバイル・パソコンとも同じ)、行の高さ 30px の小見出し 2 のスタイルを適用しています。

マテリアルデザインで特徴的なのが、フォントウェイトで Bold が推奨されていないこと。英語などの欧文文字、南アジア・東南アジア・中東の縦長文字でも Bold は推奨されていません。

サイト全体の font-size と line-height を最適化しよう

font-sizeline-height が指定されているのは、本文だけではありません。

記事ページだけでも、記事タイトルや見出し、関連記事タイトル、コメント欄などがあります。

サイト全体では、さらに多くの要素に指定されています。

すべての行間を最適化すると、サイト訪問者から「読みにくい!」と思われることがなくなるでしょう。

マテリアルデザインを参考に、サイトをより美しくより見やすくしてはいかがでしょうか。

マテリアルデザインのガイドラインは英語版しかウェブサイトがありませんが、マテリアル デザインのガイドライン(日本語版)では日本語に翻訳した PDF ファイルを無料でダウンロードできます。