フォント (書体)

文字の視覚的なデザインを定義するデータセット。書体 (typeface) がデザインの概念、フォント (font) がその具体的な実装を指す。文字の表示幅や可読性に直接影響する。

フォント (font) は、文字を画面や紙面に表示するためのデザインデータです。厳密には「書体」(typeface) がデザインの概念 (例: 游ゴシック)、「フォント」がその具体的な実装 (例: 游ゴシック Regular 16px) を指しますが、現在では両者はほぼ同義で使われています。フォントの選択は、テキストの可読性、印象、そして文字の表示幅に直接影響します。

日本語のフォントは大きく「明朝体」と「ゴシック体」に分かれます。明朝体は横線が細く縦線が太い、筆の運びを感じさせる書体で、書籍や新聞の本文に使われます。ゴシック体は線の太さが均一で視認性が高く、見出しやウェブの本文に適しています。ウェブでは font-family: "Noto Sans JP", sans-serif のようにゴシック体を指定するのが一般的です。

フォントと文字数の関係は、プロポーショナルフォントと等幅フォントで大きく異なります。プロポーショナルフォントでは「W」と「i」の幅が異なるため、同じ文字数でも表示幅が変わります。等幅フォントではすべての文字が同じ幅を持つため、文字数から表示幅を正確に計算できます。日本語の等幅フォントでは全角文字が半角文字のちょうど 2 倍の幅になります。

ウェブフォントの登場により、フォントの選択肢は飛躍的に広がりました。Google Fonts は 1,500 以上のフォントを無料で提供しており、日本語フォントも Noto Sans JP、Noto Serif JP、M PLUS 1p などが利用可能です。ただし、日本語フォントはファイルサイズが大きく (漢字を含むため 1〜5MB)、ページの読み込み速度に影響します。サブセット化 (使用する文字だけを抽出) や font-display: swap による表示最適化が重要です。

フォントが文字数カウントに影響する場面があります。名刺やポスターなど、物理的なスペースに文字を収める場合、フォントの選択によって収まる文字数が変わります。コンデンスド (幅の狭い) フォントを使えば同じスペースにより多くの文字を詰められますが、可読性は低下します。逆に、ゆったりとしたフォントは少ない文字数でもスペースを埋められます。

アクセシビリティの観点では、フォントサイズ 16px 以上、行間 1.5 以上が推奨されます。ディスレクシア (読字障害) のあるユーザーには、文字間が広く、似た形の文字 (b/d、p/q) が区別しやすいフォント (OpenDyslexic など) が有効です。フォントの選択は、文字数の見え方だけでなく、読者がテキストを理解できるかどうかにも関わる重要な設計判断です。

この記事を共有