Rails開発者なら知っておきたいタイポグラフィの大事な基礎知識（翻訳）
Railsアプリでプロフェッショナルなタイポグラフィを使うようになれば、アプリの見た目が「まあまあ」から「本当のプロらしさが光る」ものへと様変わりします。この方面のトピックはそれこそ山ほどありますが、アプリを構築しているRails開発者や、Railsベースの静的サイトジェネレータを使っているRails開発者に絞り込んだ解説記事はあまり見かけません。
ただし、最初に大事なことを述べておきます。
多くの人々が「フォント（font）」と雑に呼んでいますが、実は書体（typeface、タイプフェース）と呼ぶのが正確な用語です。
書体は、InterやHelveticaのようなデザインを指す名前ですが、フォント（font）は、それを具体的に実装したものを指します（Inter Bold 16pxなど）。
🔗 フォントと書体は何が違うのか
書体は、文字セットの全体的なデザインを指します。書体の名前は、苗字と名前にたとえると「苗字」のようなものです。
たとえば、Helveticaや、Interや、San Franciscoといったものは、書体を指します。
フォントは、書体の特定の実装（バリエーション）であり、サイズ（12pxなど）、太さ（boldなど）やスタイル（italicなど）などのバリエーションを含んでいます。
たとえば、Helvetica Bold 12pxやInter italic 14pxやSan Francisco Extra bold 18pxといったものは、フォントを指します。
あなたが「フォントはXXで...」と指定したとしても、ほとんどの人は（デザイナーも含めて）あなたの言いたいことをちゃんと理解できるでしょう。しかし、友人知人にデザイナーがいるなら、フォントと書体を正しく使い分けることで一目置かれることでしょう！🥇
🔗 フォントファイルの基礎知識
現代のWebフォントにはさまざまなフォーマットがありますが、そのほとんどは今どき使ってはならないレガシーなフォーマットです。
- TrueTypeフォント（TTF）やOpenTypeフォント（OTF）
- どちらもデスクトップ向けのフォントフォーマットであり、ファイル容量が大きすぎるためWebには不向きです。
- Web Open Font Format（WOFF）
- Web向けの圧縮フォーマットですが、早々に時代遅れとなっています。
- WOFF2
- 最新の圧縮フォーマット、WOFFより30%小さい
使うフォーマットはWOFF2だけにすること。WOFF2はすべての最新ブラウザでサポートされており、ファイルサイズを大きく削減できます。
Jono Aldersonの以下の記事（私にとって懐かしいフォントの歴史にも触れていて楽しめる記事です）によると、適切に最適化されたWOFF2フォントを使っていないWebサービスは、何らかの形でフォントの読み込みが誤っている可能性があると指摘しています。
参考: You’re loading fonts wrong (and it’s crippling your performance) - Jono Alderson
InterやSource Sans Proなどの高品質なプロ用書体、そしてシステムフォントは、CSSのfont-feature-settings経由でOpenTypeの機能をサポートしています。こうすることで、「リガチャ」「カーニング」「tabular numbers」といったタイポグラフィの機能がCSSで利用可能になります。
body {
font-feature-settings:
"liga" 1, /* リガチャ（fiやflを組み合わせる） */
"kern" 1, /* カーニング（文字間のスペース） */
"tnum" 1; /* tabular numbers（数字をすべて等幅にする） */
}
訳注
ここで言うリガチャ（ligature）は、以下のように特定の文字の組み合わせを合字にする、欧米のフォント特有の慣習を指します。
tabular numbersは、正式にはTabular Figures（tnum）で、「数字だけをすべて等幅（固定幅、モノスペース）にする」機能であり、表にしたときに桁が揃うようにするのが目的です。以下は左の114がtnumで、右はpnum（通常のプロポーショナルな数字）です。
（リガチャやカーニングなどのタイポグラフィ用語についての解説を別記事で読みたい方は、ぜひ私までお知らせください！）
🔗 デフォルトスタック
カスタムフォントについて深堀りする前に、システムフォント（system font）について説明しましょう。現代のCSSでは、従来のように具体的なシステムフォント名をずらずら書き並べる代わりに、プラットフォームごとのデフォルトフォントに自動で対応付けられるキーワードをfont-familyに指定する方法が使われています。
body {
font-family: system-ui, sans-serif;
}
system-uiというキーワードを指定すると、プラットフォームごとに以下が自動で使われるようになります。
- macOSやiOS
- San Francisco
- Windows
- Segoe UI
- Android
- Roboto
- Linux
- Ubuntu
より細かく制御したい場合は、以下のように完全なsystem font stackを指定できます。
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
CSSの新しいキーワードは以下の通りです。
ui-sans-serif- システムのデフォルトのsans-serif UIフォント
ui-serif- システムのデフォルトのserif UIフォント
ui-monospace- システムのデフォルトのモノスペース（等幅）UIフォント
訳注
serifとは、文字に装飾的なヒゲ（serif）がある書体、sans-serifとは、文字の装飾的なヒゲがない書体のことです。sansはフランス語で「〜のない」という意味です。
システムフォントはシステムにインストール済みなので、ダウンロードが不要な分パフォーマンスに優れていますが、その代わりデザイン上の自由度が制限されます。
🔗 プロフェッショナルな書体を選ぶコツ
システムフォントだけでは足りない場合は、最初にGoogle Fontsを検討するとよいでしょう（このサイトではフィルタオプションも使えます）。
プライバシーを重視したい場合は、Bunny Fontsが使えます（上のGoogle Fontsのリンクにあるのと同じフィルタリングオプションを指定すれば、同じようにプロ用フォントファイルを絞り込めます）。Bunny FontsはGoogleと同じフォントを提供していますが、Googleみたいにフォントの利用状況をトラッキングしたりしません。
プロフェッショナルな書体とは、以下の要件を満たす書体です。
x-heightの値を大きく取れることx-heightは、大文字に対する小文字の相対的な高さのことです。x-heightを大きくできるフォント（Inter、Open Sansなど）は、特に画面上で小さな文字で表示したときに読みやすくなります。- UI向けのsans-serifも用意されていること
- 文字にヒゲが装飾されているserifフォントは長文を読むのに適していますが、ボタンやメニューなどのUIにはヒゲのないsans-serifフォントの方がすっきり表示できます。
- フォントの太さ（weight）が多数用意されていること
- プロフェッショナル用のフォントなら、400（regular）、500（medium）、600（semi-bold）、700（bold）を提供しているものです。これによって、太さを変更するためにわざわざ書体を切り替えずに済みます。
- フォントが組み合わせられていること
- UI要素に使う書体ファミリーは、1つに絞ること。ブログ記事などで書体のコントラストを演出したい場合は、見出しやUI文字にはsans-serifフォントを使い、本文テキストには同じ書体のserifフォントを使って、シンプルにまとめましょう。フォントの種類を増やせば増やすほど、読み込み時間も増大しますし、見た目も収拾がつかなくなって手に負えなくなります。
以下は、プロフェッショナルが選ぶ書体の例です。
- Inter
- Source Sans Pro
- Poppins
- Lato
🔗 Railsでカスタム書体を利用する
Railsでのフォントの読み込みは簡単です。WOFF2ファイルをapp/assets/fonts/ディレクトリに配置すればおしまいです。
app/assets/fonts/
├── inter-regular.woff2
├── inter-medium.woff2
├── inter-semibold.woff2
└── inter-bold.woff2
フォントをCDNから読み込まないこと。フォントを自前で持っておけば、外部へのリクエストを削減できますし、読み込みの振る舞いを完全に制御できます。ただし、どうしても必要だとしてもGoogleは使わないこと。
可変フォント（variable font）は現代にふさわしいアプローチです。従来のようにいくつもの静的フォントファイルを使うのではなく、すべての太さ（weight）を含んでいる1個の可変フォントファイルを利用します。
@font-face {
font-family: "Inter";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: font-url("Inter-VariableFont_wght.woff2") format("woff2-variations");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: font-url("Inter-Italic-VariableFont_wght.woff2") format("woff2-variations");
}
可変フォントを使うと以下のメリットが得られます。
- 太字用に4〜6個もの異なるファイルを使わなくても、1個のファイルで済む
- トータルのファイル容量を削減できる: 複数の静的なファイルより大幅に少ない
- 太字の切り替えがスムーズ: 従来のように
100単位の指定だけでなく、font-weight: 450のような太字も指定できるし、太字をアニメーションでスムーズに切り替えることすら可能（すごい！） - パフォーマンスが優れている: HTTPリクエストが少なくて済み、読み込みも高速
Interフォントを可変フォントにしたときの効果については、以下のAdobeサイトを参照してください。
参考: Inter Variable | Adobe Fonts
可変フォントが利用できない場合は、適切な太字に対応付けられた静的フォントにフォールバックします。
@font-face {
font-family: "Inter";
src: url("inter-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("inter-medium.woff2") format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* 省略 */
Tailwind CSSを使っている場合は、以下のようにCSSカスタムプロパティで最高にすっきりと書けます。
@layer base {
:root {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Crimson Pro", ui-serif, Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
}
ここで指定したフォントは、Tailwindのfont-sans、font-serif、font-monoクラスに自動的に対応付けられます。追加の設定は不要です。
素のCSSを使う場合は、以下のようにフォールバック用のフォントを指定してください。
body {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
ほとんどの場合、font-display: swapを使うようにしましょう。そうすることで、フォールバック用のテキストが即座に表示され、カスタムフォントが読み込まれたタイミングで差し替えられます。
font-display: blockは、読み込み中に非表示のテキストを作成しますが、これは利用を避けましょう。
さらに高度な最適化について知りたい方は、以下の記事を参照してください。この記事では、フォントが差し替えられたときのレイアウトのがたつきを最小化するためのsize-adjust、ascent-override、descent-overrideの利用法について解説しています。
Railsアプリ（もしくはRailsベースの静的サイトジェネレータ）の外観を美しく整えて信頼感を高めるためのプロフェッショナルなタイポグラフィについての解説は、以上でおしまいです。
システムフォントのまま雑に構築したアプリと、厳選されたカスタム書体で丁寧に構築されたアプリの違いは歴然としています。たとえユーザーがその高級感を言葉でうまく説明できないとしても、ユーザーは即座にその違いに気づくものです。😊
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。
元記事は英語圏のWebデザインを念頭に置いているため、日本語のWebデザインでは事情が異なる可能性もあります。ご了承ください。