大文字(オールキャップス)テキストにはなぜ「字間」が必要？タイポグラフィの基本とCSSでの設定方法

大文字(オールキャップス)のテキストには、ほんの少しの字間(レタースペーシング)を加えるだけで、読みやすさが大きく向上します。本記事ではその理由と、CSSでの実装方法を具体例つきで解説します。

タイポグラフィの世界では、テキストをすべて大文字で表記する際に、文字同士の間へ適度な余白を設けるのが定石です。字間を調整せずに放置すると、文字が詰まりすぎて快適に読めなくなるためです。

レタースペーシング(letter-spacing)はトラッキング(tracking)とも呼ばれ、両者は同義語です。どちらも、複数の文字や単語のグループ間のスペース量を指します。コミュニケーションの現場では、Web制作において「letterspacing」という呼び方が好まれ、印刷物の組版では「tracking」と呼ばれる傾向があります。

それでは、具体的な例を見ていきましょう。

通常表記と大文字表記の比較

まず、次の2つのテキストを見比べてください。上段が通常の表記、下段がすべて大文字(オールキャップス)です。

Typography

Typography

問題点にお気づきでしょうか?

気づかなくても心配いりません。標準的なフォントウェイト(normal)を使用していれば、多くの場合それほど問題にはなりません。仕上がりは書体(フォント)のデザインや使い方によって変わります。

CSSでは、通常のフォントウェイトは font-weight: normal; または font-weight: 400; で指定できます。どちらも同じ意味です。

太字の場合：通常表記 vs 大文字

続いて、同じ例に太字(bold)を加えて比較してみましょう。

Typography

Typography

太字のように文字の線幅が太くなると、大文字テキストがかなり窮屈に見えませんか?一部の文字同士が接触してしまっているのが分かるはずです。

CSSで太字を指定するには font-weight: bold; を使います。数値での指定も可能ですが、選択したフォントファミリーに何種類のウェイトが用意されているかを把握しておきましょう。700 が一般的にbold相当ですが、常にそうとは限りません。

字間(レタースペーシング)を加えてみる

先ほどの大文字テキストに4pxの字間を追加したものを作成し、比較してみます。

Typography

Typography

この違いは歴然です。字間なしの例は圧迫感すら感じさせますが、字間を加えた例はまったく逆の、開放感のある印象を与えます。

CSSでは字間を letter-spacing プロパティで指定します。例:letter-spacing: 4px; 日常の言葉としてはハイフン(-)付きでもなしでも表記されますが、CSSでは必ずハイフン付きで記述します。

ひとつはっきりさせておきたいのですが、字間を加えた例が常に優れているわけではありません。どちらがふさわしいかは、その使用場面で作り出したい雰囲気やムード次第です。

映画ポスターにおいて、作品のテーマを表現し強化する最も強力な道具のひとつがタイポグラフィです。熟練したタイポグラファーは、次のような要素について慎重に意思決定を行います。

• 書体/フォントファミリー
• 書体の分類(セリフ体、サンセリフ体など)
• フォントサイズ
• 文字のケース(大文字、小文字など)
• フォントウェイト(通常、太字など)
• フォントスタイル(通常体/イタリック体)

映画ポスター、書籍のカバー、食品ラベルなど、どんな案件であっても、タイポグラフィ上の判断は目の前のタスクの文脈に基づいて下すべきです。

字間はタイポグラフィの構成要素のひとつにすぎませんが、極めて強力な要素です。次の2つの単語を見比べてみてください。

CAPTIVITY

FREEDOM

この違い、感じ取れますか?「CAPTIVITY(監禁)」の閉塞感と「FREEDOM(自由)」の開放感——字間を変えるだけで、ここまで印象が変わるのです。

見た目の話はさておき、押さえておきたい事実があります。一般的に、大文字テキストは大小混在の通常テキストよりも読みにくいものです。大文字は字形が均一で対称的な構造を持つため、単語の中の個々の文字を識別しにくくなります。これは文章や段落単位になればなるほど顕著です。

まとめ

• 大文字は控えめに使う。タイトルや短い見出しには効果的ですが、文章全体や段落には不向きです。読者への配慮を優先しましょう。
• 大文字テキストには字間を加えるのが原則。少量の場合もあれば、かなり多めに必要な場合もあります。字間があるだけでテキストの消化しやすさは格段に向上します。
• 文字が貼り付いて見えるデザインは美しくありません。ビジュアル面の印象は大切です。
• ただし、あえて字間を詰めたほうがしっくりくる場面もあります。

白黒はっきりつけられる話ではありません。何より重要なのは文脈(コンテクスト)です。