あなたのUIタイポグラフィが初心者っぽく見える理由:正確な数値つき6つの修正

初心者っぽいタイポグラフィは、たいてい大きなミスひとつが原因ではありません。感覚で決めた小さなミスが6つ積み重なっているのです。ちょうど良さそうに見えたサイズ、楽しそうだったフォント、上品に見えたグレー。上級者のタイポグラフィが落ち着いて見えるのは、そのすべての選択にルールがあるからです。6つを数値つきで紹介します。

1. タイプスケールを使う

Heading31px

Heading27px

Heading22px

Heading17px

Heading15px

Heading13px

✕ 初心者:サイズを感覚で選んでいる

Heading39px

Heading31px

Heading25px

Heading20px

Heading16px

✓ 上級者:ひとつの比率、16から1.25倍

左は、サイズをひとつずつ単独で決めています。31、27、22、17、15、13。段差がバラバラなので、ほとんど同じに見えるレベルもあれば、急に跳ねるレベルもあります。右は、どのサイズも直前のサイズの1.25倍です。16、20、25、31、39。段差が均等なので、各レベルが次のレベルとはっきり違って見えます。

ほとんどのインターフェースには1.2から1.333の比率が合います。ひとつ選んで書き留め、リストにないサイズは決して入力しないこと。CSSなら短い変数のセット、Figmaならテキストスタイルのセットです。比率の選び方はモジュラータイプスケールのガイドで解説しています。

:root { --text-sm: 0.8rem; /* 12.8px */ --text-base: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.563rem; /* 25px */ --text-2xl: 1.953rem; /* 31px */ --text-3xl: 2.441rem; /* 39px */ }

2. ひとつのファミリー、2つのウェイト

リスボンの週末

ちょっとした旅日記3日間、2つの街、そしてとても長いトラムの旅。

続きを読む

✕ 初心者:1枚のカードに4つのフォント

リスボンの週末

ちょっとした旅日記3日間、2つの街、そしてとても長いトラムの旅。

続きを読む

✓ 上級者:ひとつのファミリー、レギュラーとボールド

フォントを足すたびに個性も増え、1枚のカードに4つの個性があれば喧嘩を始めます。読む人はどれがブランドなのか分かりません。ひとつのファミリーを2つのウェイトで、読むためにレギュラー、見出しにボールドと使えば、画面に必要なレベルはすべてつくれます。

2つ目のファミリーが欲しいなら、見出し専用のように役割をひとつだけ与え、どこでもそこに留めてください。ひとつの要素を「特別」にするためにフォントを足してはいけません。

3. 読めるグレー

ご注文の商品をお届け中です

到着は14:20から14:40。配達員が近づいたらSMSでお知らせします。

✕ 白地に#B0B0B0:読みにくい

ご注文の商品をお届け中です

到着は14:20から14:40。配達員が近づいたらSMSでお知らせします。

✓ 白地に#6B6B6B:読みやすい

明るいモニターのデザインファイルでは、薄いグレーは洗練されて見えます。ところが屋外のスマホでは消えてしまいます。左の到着時間はカードで最も役に立つ行なのに、最も読みにくい行になっています。

#6B6B6B は黒いタイトルの隣でも控えめな印象のままで、しかも読めます。目安として、白地の補助テキストは約 #767676 より薄くしないこと。これが本文のアクセシビリティ最低基準を満たす最も薄いグレーです。

4. 大文字はラベルだけ

利用規約を更新しました。次回のご注文の前に変更内容をご確認ください。

✕ 初心者:文章を大文字にしている

UPDATE

利用規約を更新しました

次回のご注文の前に変更内容をご確認ください。

✓ 上級者:大文字のラベルと通常の文章

大文字は単語の形を消してしまいます。小文字では、背の高い字と低い字が単語に輪郭を与え、目がそれを認識します。大文字ではどの単語も長方形になるので、文章を一文字ずつ読むことになります。だから大文字の段落は怒鳴っているように感じられ、読むのにも時間がかかります。

大文字は本来の用途、つまりセクションタグ、ステータス、ボタンのような1〜3語の短いラベルで力を発揮します。それより長いものは通常の文章表記にしましょう。

5. 見出しは詰めて、本文はゆったり

余白もタイポグラフィの一部

行間が詰まると段落は壁になります。本文には息をする余裕を与え、見出しはきゅっと締めましょう。

✕ 初心者:ゆるい見出し、窮屈な本文

余白もタイポグラフィの一部

行間が詰まると段落は壁になります。本文には息をする余裕を与え、見出しはきゅっと締めましょう。

✓ 上級者:見出しは1.1、本文は1.5

行間は、サイズによって正反対の役割を持ちます。大きな見出しは文字の内側にすでに十分な空間があるので、1.1なら全体がひとつの形としてまとまります。小さな本文は、目が次の行の頭を見つけられるよう行間に余裕が必要なので、1.5にします。

初心者版はこの逆をやりがちで、全部に同じ行間をかけたことが原因のことも多いです。値を2つ決めて、どこでも使いましょう。見出しは1.1から1.2前後、本文は1.4から1.6です。

6. サイズ、ウェイト、色、余白

注文 #2841

配達完了本日 14:203点合計 ¥4,280

✕ 初心者:すべて太字、サイズもひとつ

● 配達完了

注文 #2841

本日 14:20 · 3点合計 ¥4,280

✓ 上級者:4つの道具、ひとつの明確な順序

すべてが太字なら、何も目立ちません。初心者のカードは同じサイズ、同じウェイトの5行なので、大事な1行を見つけるには全部読むしかありません。

上級者のカードは4つの道具を、それぞれ少しずつ使っています。注文番号は大きく、ステータスには色とドット、詳細はグレーに落とし、合計は余白で切り離す。どの道具も強く押し込んでいないから、落ち着いて見えるのです。詳しくはタイポグラフィの階層をご覧ください。

6つの修正を1つの表で

FAQ

UIに良いタイプスケールは?

16pxを基準に、1.2から1.333の比率です。1.25なら16、20、25、31、39pxになり、ほとんどの画面に十分なレベル数です。

UIで使うフォントは何種類が適切?

ひとつのファミリーを2つのウェイトで使えば十分です。2つ目のファミリーは見出しなど固定の役割がひとつある場合だけ足し、どこでも同じように使ってください。

本文の行間はどれくらいにすべき?

本文は約1.5、大きな見出しは約1.1から1.2です。

白地で読めるグレーは?

#767676 は、白地の本文でWCAGの最低基準を満たす最も薄いグレーです。#6B6B6B はもう少し余裕があり、それでも補助的な印象に見えます。

UIの文字はすべて大文字にすべき?

1〜3語の短いラベルだけにしてください。長い文章は大文字だと単語の形が失われ、読むのが遅くなります。

出典

• タイプスケール:16 × 1.25ⁿ = 20、25、31.25、39.06(表示は丸めた値)。
• 白地に対するコントラスト比(WCAG 2の計算式で算出):#B0B0B0 は 2.2対1、#767676 は 4.5対1、#6B6B6B は 5.3対1。WCAGは本文に4.5対1を求めています(1.4.3 Contrast (Minimum))。
• 最初にUX Brainyでカルーセルとして公開されました。