第7章 人間は、文字の形から声を感じる
同じ「ようこそ」という言葉でも、細い文字で小さく置く場合と、太い文字で大きく置く場合では、話しかけられ方が違うように感じます。本当に声が聞こえるわけではありません。文字の形や大きさが、声の調子のような印象を加えるという意味です。
Web サイトでは、ほとんどの情報を文字で伝えます。どの書体を選ぶかだけでなく、文字の大きさ、太さ、間隔、一行の長さ、見出しと本文の差が、読み方を変えます。
この章では、書体へ「元気」「上品」といった性格を決めつけません。実際に見えている太さや空白へ戻り、読みやすさと読む順序を作る方法を考えます。
7.1 同じ言葉でも、同じ強さには見えない
最初の三枚は、同じ歓迎の言葉です。文章の内容ではなく、文字の組み方だけを変えています。
文字が占める黒い面積が小さく、文字同士の間にも背景が見えます。静か、軽い、控えめと感じる人がいるかもしれません。
二枚目では黒い面積が増え、文字の隙間が小さくなりました。力強い、にぎやか、急いで伝えているように感じる人もいるでしょう。
三枚目は、文字そのものを大きくしています。堂々として見えるなら、その理由は書体だけではありません。画面の中で使っている面積も変わっています。
「太い書体は元気」と暗記すると、別の画面でうまく使えません。「太い線と狭い字間によって、黒い面が強く見える」と捉えれば、何を調整したのかが分かります。
印象は文字だけでも決まりません。同じ書体でも、歓迎の言葉に使うか、災害のお知らせに使うかで受け取り方は変わります。背景色、写真、周囲の余白も、文字の声を一緒に作ります。
7.2 一文字が読めても、文章が読みやすいとは限らない
一文字ずつ見分けられることと、長い文章を読み続けられることは別です。行が詰まりすぎたり、一行が長すぎたりすると、次に読む場所を見失いやすくなります。
図 7-3A は、行と行の間が狭い文章です。
文字は判別できても、行末から次の行頭へ戻るときに、どの行を読んでいたか分かりにくくなります。
図 7-3B では、文字サイズを変えず、行の間だけを広げています。
空白は飾りではなく、一行ずつを分ける働きをします。ただし、広すぎると同じ段落の行がばらばらに見えます。
図 7-3C は、行間を保ったまま文章の横幅を広げた例です。
行間と一行の長さは、別々の問題です。行間が狭い文章の横幅だけを短くしても、上下の詰まりは直りません。どこが読みにくいのかに合わせて調整します。
ブラウザでは、利用者が文字を大きくしたり、行間を広げたりできます。そのときに文字が切れたり、重なったり、ボタンが押せなくなったりしないことも大切です。完成した一枚だけでなく、文章が増えたり大きくなったりする画面までが Web デザインです。
7.3 文字の差が、読む順序を作る
文化祭の催しを紹介する画面には、催し名、日時、会場、説明、申込ボタンがあります。すべてを同じ大きさと太さで並べると、どこから読めばよいのか見た目から分かりません。
最も大きく太い「夕暮れの音楽会」が、このページの主題です。日時と会場は、そのすぐ下へ近づけて一組にしています。説明文の前には少し広い余白を取り、基本情報から長い文章へ切り替わることを示しています。
「申し込む」は青い面に入り、文章とは違う形です。説明の続きではなく、次にできる操作だと分かります。
読む順序は、大きさだけでは決まりません。太さ、色、前後の余白、左端のそろい方が一緒に働きます。すべてを同時に強くする必要もありません。大見出しを巨大にし、太くし、赤くし、さらに囲むと、ほかの情報が見つからなくなります。
大きいものが、いつも最重要とは限らない
催しの雰囲気を知りたい人には、大きな催し名が良い入口になります。開始時刻だけを急いで探している人には、日時の見つけやすさも必要です。
画面の主役を一つ作りながら、よく探される情報を埋もれさせないようにします。目立つ順序と、利用者が必要とする順序が大きく食い違っていないかを考えます。
見た目と HTML の見出しを合わせる
大きな文字が自動的に HTML の見出しになるわけではありません。HTML の h1 や h2 は文章の構造を伝え、CSS は見た目を作ります。
見た目では大見出しなのに HTML では普通の div だと、読み上げソフトから見出しとして探せません。反対に、HTML では見出しなのに本文と同じ見た目では、目で読む人が区切りを見つけにくくなります。見た目と HTML の両方で、同じ文章構造が伝わるようにします。
7.4 日本語と英語は、同じ数字でも同じ大きさに見えない
CSS で同じ文字サイズを指定しても、日本語と英語の見える大きさは同じにならないことがあります。
図の赤い点線は「文化祭」の見える輪郭、青い線は文字を並べる基準です。漢字は、文字に用意された四角い範囲を大きく使って見えます。
同じ文字サイズの「Festival」には、大文字と小文字が混ざります。日本語と同じ青い線へ置いても、見える輪郭の高さは同じになりません。
日本語の見出しの横へ英語を添えるとき、同じ font-size にするだけでは強さがそろわない場合があります。数字や記号、アイコンを横へ並べる場合も同じです。CSS の数値だけでなく、実際に見える大きさと上下の位置を見て調整します。
ただし、最初から一文字ずつ手でずらすのではありません。まず文字を並べる基準線で規則を作り、特定のアイコンだけがずれて見える場合に小さく補正します。
7.5 Web フォントが届く前にも、文字は表示される
デザインツールでは、選んだ書体が最初から表示されています。Web では、フォントのファイルがまだ届いていない時間や、取得に失敗した状態があります。
図 7-7A は、Web フォントが届く前に、端末へ入っている代わりの書体で表示した画面です。
完成時と同じ見た目ではありませんが、演目名も説明も隠れていません。この時点の文字幅で改行とボタンの幅が決まります。
図 7-7B は、Web フォントが届いたあとの画面です。
同じ文字列でも、一文字ごとの幅が違うため、改行やカードの高さが変わっています。その下にあるボタンも移動します。押そうとしていた場所が大きく動けば、誤って別のものを押す原因になります。
フォントを待つために文字を長く透明にするより、代替フォントで内容をすぐ表示します。そして、どちらの書体でも長い見出しがはみ出さず、ボタンの文字が切れず、切替時に周囲が大きく動かないように作ります。
美しい書体を選ぶことは大切です。しかし本文の読みやすさは、書体名だけでは決まりません。文字の大きさ、行間、一行の長さ、背景との明暗差、読み込み中の表示までを一緒に設計します。
次章へ
文字の大きさや太さは、読む順序を作ります。色もまた、目立つ場所を作り、同じ仲間や異なる状態を伝えます。
次章では、色の名前や好みだけで決めず、周囲との違いと、色以外に残す手がかりを考えます。
参考資料
- W3C, “CSS Fonts Module Level 4.” Web で書体を選び、代替書体へ切り替える仕組みの仕様です。
- W3C, “Requirements for Japanese Text Layout.” 日本語の横書き・縦書き・句読点などを扱う詳しい資料です。
- W3C WAI, “Understanding SC 1.4.12: Text Spacing.” 利用者が行間などを変えても内容を読めるようにする解説です。
- W3C WAI, “Understanding SC 1.4.4: Resize Text.” 文字を拡大したときの考え方です。
- WHATWG, “HTML Standard: Headings and Sections.” HTML の見出しが持つ意味を確認できます。