フォント (書体)

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

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

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

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

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

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

アクセシビリティの観点では、本文のフォントサイズを 16px 前後以上に取り、行の高さを文字サイズの 1.5 倍以上にするのが実務上の目安です。ここで注意したいのは WCAG との関係で、達成基準 1.4.12 Text Spacing (レベル AA) は「行の高さを文字サイズの 1.5 倍、段落の下の間隔を 2 倍、字間を 0.12 倍、語間を 0.16 倍に利用者が上書きしてもコンテンツと機能が失われないこと」を求める基準です。制作側がその値で組むことを義務づけるものではなく、文字サイズ自体の下限は WCAG に規定がありません。つまり 16px は規格値ではなく慣行で、規格が要求しているのは「利用者が広げたときに壊れないこと」の方だと理解しておくと、レイアウトの検証項目を取り違えません。

ディスレクシア (読字障害) 向けをうたうフォント (OpenDyslexic など) については、読字速度や正確性の改善は複数の研究で確認されておらず、視線追跡でも有意な差は報告されていません。好みの面では評価が分かれ、OpenDyslexic を選ぶ人が多かった研究もあれば、Arial が選ばれた研究もあります。したがって特定の書体を導入すれば解決するとは考えず、十分な文字サイズ・広めの行間と字間・利用者が自分の書体や間隔に変更できる余地を確保する、という一般的な設計で対応する方が確実です。フォントの選択は、文字数の見え方だけでなく、読者がテキストを理解できるかどうかにも関わる重要な設計判断です。

この記事を共有