typography-expert

タイポグラフィの専門家

生業として書体を選んでいる人が書きました。このスキルの目的は、定番の候補リストを推奨することではなく、幅広い選択肢と審美眼を提供することです。正解の書体は一つではありません。あるのは適切な 雰囲気 であり、予算に応じてその雰囲気を実現する優れた書体がいくつかあります。いつも同じ4種類のフォントを選んでいるなら、それは選んでいるのではなく、惰性で使っているだけです。惰性で選ぶのはやめましょう。

このスキルを使う場面

✅ 以下の場合に使用します：

• 習慣ではなく、ムード／時代／業界／雰囲気を基準にしたフォントの選定と組み合わせ
• デザインシステムのタイポグラフィ階層とトークン
• タイプスケール（モジュラースケール、流動的な clamp()）
• バリアブルフォントの組み込みと軸の制御（wght、wdth、opsz、slnt、GRAD）
• Webフォントのパフォーマンス（サブセット化、font-display、セルフホストかCDNか、CLSを防ぐためのフォールバックメトリクスの size-adjust）
• OpenType 機能の実装（合字、スモールキャップス、数字、スタイルセット）
• ライセンスの判断（OFLか商用EULAか、デスクトップ／Web／アプリ、試用フォント）
• タイポグラフィのアクセシビリティ（WCAGのコントラスト、最小サイズ、ズーム、行間／字間）
• ダークモードにおけるタイポグラフィの補正
• 多言語対応（RTL、CJK、ダイアクリティカルマーク、文字セットのカバレッジ）

❌ 以下には使用しないでください：

• ロゴやワードマークの制作 → design-system-creator
• アイコンフォント／アイコンシステム → web-design-expert（アイコンフォントではなくSVGを使用）
• タイポグラフィと無関係な一般的なCSS
• 画像ベースまたはラスター化された文字表現 → 別の領域です
• ブランド名の考案や戦略 → これはビジュアルの実装です
• キネティック／モーションタイポグラフィ → native-app-designer

---

0. 定番を避ける（まずはこちらをお読みください）

これらの書体が悪いわけではありません。使い古されているのです。反射的に選ばれるため、「誰かが選んだ」ではなく、「機械か、急いでいた人が選んだ」と感じさせます。これらを使う理由が依頼内容にないなら、使わないでください。それぞれについて、陳腐に見える理由を一文で説明し、同じ役割を果たせる、より新鮮な書体を2つ挙げます。

使い古された書体	陳腐に見える理由	代わりに選ぶ書体
Inter（Rasmus Andersson、OFL）	2018〜2025年のウェブ全体でデフォルトのUIサンセリフ体として使われ、匿名性を感じるほど無難で目立ちません。	Hanken Grotesk（Alfredo Marco Pradil、OFL — より温かみのあるヒューマニスト系UIサンセリフ体） · Public Sans（USWDS、OFL — ニュートラルながら個性があります） · 有料：Söhneも今では使い古されています。代わりにUntitled Sans（Klim）を試してください。
Roboto（Christian Robertson、Apache）	Androidのシステムフォントで、「すでに読み込まれていたものを使った」という印象です。	Schibsted Grotesk（Bakken & Bæck、OFL） · Onest（OFL）
Open Sans（Steve Matteson、Apache）	2013年の「無難な企業向け」サンセリフ体で、CMSテンプレートのように見えます。	Source Sans 3（Paul Hunt / Adobe、OFL） · IBM Plex Sans（Bold Monday for IBM、OFL）
Montserrat（Julieta Ulanovsky、OFL）	幾何学的な「スタートアップのプレゼン資料」風サンセリフ体で、どこでも極太のウェイトが使われすぎています。	Hanken Grotesk · 有料：Aktiv Grotesk（Dalton Maag）またはGT America（Grilli Type）
Poppins（Indian Type Foundry、OFL）	何千ものランディングページで使われてきた、「親しみやすいアプリ」風の幾何学的な丸みのあるサンセリフ体です。	Gabarito（OFL、個性のある幾何学的な書体） · Figtree（OFL） · 有料：Visby（Connary Fagen）
Lato（Łukasz Dziedzic、OFL）	2010年代のヒューマニスト系の定番で、感じはよいものの、印象に残りません。	Instrument Sans（Rodrigo Fuenzalida + Jordan Egstad、OFL） · Mona Sans（GitHub、OFL）
Helvetica / Helvetica Neue（Linotype）	「ニュートラル」という評価が定着した瞬間に陳腐化しました。また、有料ライセンスが必要なため、Arialで代用されがちです。	どうしても必要なら、本物のNeue Haas Grotesk（Linotype/Monotype）を使ってください。あるいは、ざらつきのあるグロテスク体に切り替えましょう。GT America（Grilli Type）、ABC Diatype（Dinamo）がおすすめです。自由に使える代替書体ならArchivo（Omnibus-Type、OFL）です。
Fraunces（Undercase Type、OFL）	「癖のあるgとopsz軸を備えた柔らかなセリフ体」という、インディーSaaSのディスプレイ用セリフ体の定番になりました。	Newsreader（Production Type、OFL — こちらもopszを備えていますが、はるかに見かけません） · 有料：コントラストの強いディスプレイ用書体ならSignifier（Klim）またはDomaine（Klim）がおすすめです。
Geist（Vercel、OFL）	すべてのNext.jsスターターに同梱されており、「1時間前にひな形を作ったばかり」という印象です。	サンセリフ体：Mona Sans / Hubot Sans（GitHub、OFL）またはHanken Grotesk。等幅体：Commit Mono（OFL）またはMartian Mono（OFL）。
Söhne（Klim）	2021年から現在まで、プレミアムニュースレターやAI企業の定番サンセリフ体です（「シリーズAの資金調達に成功しました」というページで何度も見かけたはずです）。	Klimの別のグロテスク体ならUntitled SansまたはNational 2、Klim以外ならABC Diatype（Dinamo）、Aeonik（CoType）がおすすめです。
Fontshare / ITFの「スターターパック」 — Satoshi、General Sans、Clash Display、Cabinet Grotesk、Switzer、Space Grotesk（Indian Type Foundry、無料）	2021年以降、無料で洗練されていて、Dribbbleの投稿に必ずと言っていいほど登場します。「Clash Display + Satoshiの本文」は、もはや選択ではなくスタイルです。	Clash Display → Bricolage Grotesque（Mathieu Triay、OFL）、またはディスプレイ用にAnybody/Big Shoulders（OFL） · Satoshi/General Sans → Hanken Grotesk、Schibsted Grotesk、Instrument Sans · Space Grotesk → Departure Mono / Space Monoも問題ありませんが、使い古されています。Spline SansまたはFamiljen Grotesk（OFL）を試してください。

**上位の原則：**書体を選ぶ理由が「すっきりしていてモダンだから」だけなら、それは選択したことになりません。すっきりしていてモダンなのは最低条件であって、依頼内容ではありません。

---

1. フォントを選ぶ前にレジスターを決める

書体を挙げる前に、必ずレジスター、つまりムード、時代、業界、媒体、語り口を決めてください。同じ「モダン」という言葉でも、レジスターによって指し示す書体は5種類に分かれます。以下のフレームワークに沿ってから選び、3つの予算帯で選択肢を提示すれば、予算を退屈な結果の言い訳にせずに済みます。

以下では、予算帯を次のように定義します。Libre＝無料、OFL/Apache ライセンス、セルフホスト可能。PWYW/Trial＝価格自由、または個人利用なら十分な無料トライアル（商用利用は有料）。Commercial＝商用ファウンドリーの小売ライセンス。

温かみのあるエディトリアル（雑誌、長文、「人間味があり、考え抜かれている」）

• **Libre：**本文とディスプレイ用には Newsreader (Production Type)、本文用には Source Serif 4 (Adobe)、画面での読書を優先するなら Spectral (Production Type)。
• **PWYW/Trial：**幅の狭いエディトリアル見出しには Editorial New (Pangram Pangram)、Reckless (Displaay、トライアル)。
• **Commercial：**Tiempos Text/Headline (Klim)、メスとブロードニブのような温かみを求めるなら GT Sectra (Grilli Type)、Lyon (Commercial Type)。

インダストリアル／テクニカル／エンジニアリング

• **Libre：**IBM Plex (Sans/Mono/Serif, Bold Monday) — 最も信頼感のある Libre 技術系スーパーファミリーです。レトロなNASA風の遊び心を加えたい場合に限り、Space Monoを使います。
• **PWYW/Trial：**端正なグロテスク体なら Basier (atipo、PWYW)、ステンシル風のテック系ディスプレイ体なら Chaney (atipo)。
• **Commercial：**GT America (Grilli Type)、ABC Monument GroteskまたはABC Diatype Mono (Dinamo)、Akkurat (Lineto, Laurenz Brunner) — スイス仕様のオリジナルで、頼れる定番です。

ラグジュアリー／ファッション／ビューティー

• **Libre：**極めて繊細で、Garamondに近いディスプレイ体なら Cormorant (Christian Thalmann, OFL)、コントラストの強いタイトル用には Libre Caslon Display (OFL)。
• **PWYW/Trial：**彫刻的でシャープなセリフ体の Migra (Pangram Pangram)、Tobias / Reckless (Displaay、トライアル)。
• **Commercial：**Domaine Display (Klim)、Canela (Commercial Type)、鋭さのある、ディドンに近い本格的なリバイバル書体 Genath (Optimo, François Rappo)。

市民／公共機関／公共部門

• **Libre：**文字どおり政府機関向けに作られた Public Sans (USWDS)、Source Sans 3、Franklin Gothicの代替書体として Libre Franklin (OFL)。
• **PWYW/Trial：**控えめで読みやすく、公共機関に適した Wotfard (atipo、PWYW)。
• **Commercial：**National 2 (Klim)、サイン用途に適した読みやすさの FF Meta または Stratos。

文学的／本好き

• **Libre：**忠実なGaramondの EB Garamond (OFL)、学術的な長文には Cardo (OFL)、画面表示には Newsreader。
• **PWYW/Trial：**文学作品の表紙に合うレジスターには Editorial New。
• **Commercial：**Tiempos (Klim)、Arnhem (OurType, Fred Smeijers)、Lyon Text (Commercial Type)。

ブルータリスト／ラフ／カウンターカルチャー

• **Libre：**Velvetyneのカタログは宝庫です — Fivo Sans、Pilowlava、Basteleur、Le Murmure（Libre、この用途にぴったりの書体）、新聞が劣化したような雰囲気には Redaction (Titus Kaphar & Forest Young, OFL)。
• **PWYW/Trial：**Uncut.wtfのディスプレイ体セクション、無表情なグロテスク体には Collletttivo (Apfel Grotezk、Libre)。
• **Commercial：**ABC Whyte / ABC Gravity (Dinamo)、OH no Type Co の書体ならどれでも（Hobeaux、Vulf Mono）。

レトロフューチャー／70〜80年代／SF

• **Libre：**ピクセル調のモノスペース体なら Departure Mono (OFL)、Orbitron (OFL)は控えめに、劣化した未来感には VTF Redaction。
• **PWYW/Trial：**カサンドル時代のポスター風には Cassannet Plus (atipo、アールデコ調の幾何学体)、Round 8 (atipo)。
• **Commercial：**圧縮されたポスターフューチャー感には Druk (Commercial Type)、ABC Gravity (Dinamo)、幅を狭くした Sharp Grotesk (Sharp Type)。

静かなスイス風／ネオグロテスクの抑制

• **Libre：**Interより骨格がしっかりしたグロテスク体なら Archivo (Omnibus-Type)、人文主義的なスイス風との折衷なら Hanken Grotesk。
• **PWYW/Trial：**Basier (atipo)。
• **Commercial：**Akkurat (Lineto)、Untitled Sans (Klim)、ABC Diatype (Dinamo)、本物の Neue Haas Grotesk (Monotype)。

遊び心のある消費者向け／ライフスタイル／DTC

• Libre： Bricolage Grotesque（Mathieu Triay）— 表現豊かで、wdth+opsz 軸を備えています。Gabarito。Fredoka（OFL）は、本当に子どもらしい雰囲気が必要な場合に限ります。
• PWYW／試用： Sfizia（atipo）、Pangram PangramのPP Mori／PP Neue Montreal（無料で試用可能）。
• 商用： Covik SansまたはDegular（OH no Type Co）— 温かく生き生きとしており、「幾何学的というよりオーガニック」です。幅軸を活用できるディスプレイ書体にはObviously（OH no Type Co）。

学術／科学／データ量の多いデザイン

• Libre： IBM Plexのスーパー・ファミリー（sans＋serif＋monoで骨格を共有しており、論文やダッシュボードに最適です）。数学にはSTIX Two（OFL）、本文にはSource Serif 4。
• PWYW／試用： UIクロームにはWotfard。
• 商用： 購入できる最高峰の洗練された学術セリフ体にはLexicon（Bram de Does）、ジャーナルにはTiempos。

---

2. ペアリングは感覚ではなく論理で

ペアリングには、いくつかのルールがあります。ルールに従い、運任せにしないでください。

1. 主力書体を1つ、個性派書体を1つ。 本文、UI、キャプションの文字の90％を担う、ニュートラルでウェイトの豊富な主力書体と、見出し用の表現豊かな「個性派」書体を1つ選びます。表現豊かな書体を2つ共存させようとすると、プレゼン資料がどれも大声で主張するようになります。
2. 分類でコントラストをつけ、骨格で調和させる。 異なるカテゴリーを組み合わせ（ヒューマニスト系セリフ体の本文用書体とグロテスク系ディスプレイ書体など）、それぞれの役割を明確にします。ただし、似た構造上の考え方やプロポーションなど、共通の骨格があるか確認してください。ジオメトリック系セリフ体とヒューマニスト系サンセリフ体は相性がよくありません。
3. ポイントサイズではなくxハイトを合わせる。 同じfont-sizeでも、書体によって大きさが違って見えることがあります。小文字のxハイトを比べ、font-sizeまたはsize-adjustで調整します。xハイトの不一致は、素人っぽいペアリングの最もわかりやすい目印です。
4. スーパー・ファミリーを使う近道。 迷ったら、共通の骨格を持つsans＋serif＋monoを揃えた1つのファミリーを使います。IBM Plex（Libre）、Source（Sans 3／Serif 4／Code Pro、Libre）、Recursive（Libre、可変）、または商用スーパー・ファミリーのKlimのNational＋Klimのセリフ体、Linetoのファミリー、GT America＋GT Sectraなどです。調和が保証され、ペアリングのリスクもありません。
5. 同じデザイナー／同じファウンドリー。 同じデザイナーの書体は、字間やリズムを共有していることがよくあります。OH no Type Coの書体カタログ内の組み合わせ、Klimの書体同士、Production TypeのNewsreaderとProduction Typeのサンセリフ体などが該当します。
6. 歴史的な相性。 同じ時代の書体は共通の特徴を持っています（2つのディドン体、またはカリグラフィーにルーツを持つガラルド体とヒューマニスト系サンセリフ体など）。緊張感を出すことが狙いでない限り、1490年代のガラルド体と1990年代のテクノ系ディスプレイ書体を組み合わせないでください。
7. ファミリーは2つまで。 3つ目を使うのは、コード／データ専用のモノスペース体を加える場合に限ります。それ以上では階層ではなく混乱が生まれます。ファミリー内で、ウェイト、幅、opsz、文字種を使って変化をつけてください。

組み合わせ例（スターターパックからの書体はありません）：

• 温かみのあるエディトリアルサイト： ディスプレイにNewsreader＋本文にHanken Grotesk（どちらもLibre）。
• 技術系プロダクト： UIにIBM Plex Sans＋データにIBM Plex Mono（同じスーパー・ファミリー、Libre）。
• ファッション系ランディングページ： Migra（Pangram Pangram、ディスプレイ）＋Untitled Sans（Klim、本文）。
• 市民向けアプリ： ディスプレイにLibre Franklin＋本文にPublic Sans（どちらもLibre）。
• 遊び心のあるDTC： ディスプレイにBricolage Grotesque＋本文にSchibsted Grotesk（どちらもLibre）。

---

3. 分類別カタログ

各クラスの本当に興味深い書体と、制作したデザイナー／ファウンドリーを紹介します。Libre（L）と商用（C）が混在しています。いつもの選択肢から抜け出すために活用してください。

ヒューマニスト系サンセリフ体

カリグラフィーにルーツを持ち、ストロークに抑揚があり、開口部が広く、温かみがあって読みやすい書体です。

• Hanken Grotesk（Alfredo Marco Pradil／Hanken Design Co.）— L
• Source Sans 3（Paul Hunt、Adobe）— L
• FF Meta（Erik Spiekermann）— C、代表的なヒューマニスト系主力書体
• Skolar Sans（David Březina、Rosetta）— C、多文字体系に優れています
• Whitney（Tobias Frere-Jones／Frere-Jones Type）— C

ネオ・グロテスク

「中立的」なスイス系の流れ（Helvetica／Akzidenzの伝統）ですが、優れたものを選びましょう。

• Archivo (Omnibus-Type) — L
• Neue Haas Grotesk (Christian Schwartz、Max Miedingerに基づく) — C、本物のHelvetica
• GT America (Noël Leu + Seb McLauchlan / Grilli Type) — C、アメリカン・ゴシック × スイス
• ABC Diatype (Dinamo) — C
• Aeonik (CoType) — C

ジオメトリック・サンセリフ

バウハウスの円と線（Futura系譜）。

• Gabarito (L)、Spline Sans (L)
• Visby (Connary Fagen) — C
• Cassannet Plus (atipo) — PWYW、アール・デコ調のジオメトリック
• Avenir Next / Avenir (Adrian Frutiger) — C、人間味のあるジオメトリック

グロテスク／インダストリアル

より初期の、粗削りなグロテスク体と機械的なゴシック体。

• Le Murmure (Velvetyne) — L、表情豊かなディスプレイ・グロテスク
• Apfel Grotezk (Collletttivo) — L、無表情
• ABC Monument Grotesk (Dinamo) — C
• Aperçu (Colophon、現在はMonotype) — C
• Sharp Grotesk (Lucas Sharp / Sharp Type) — C、21幅 × 7ウェイト

ガラルド／オールドスタイル・セリフ

1490年代〜1600年代のヒューマニズムに根ざし、コントラストが低く、ブラケット付きセリフと斜めのストレスが特徴です。

• EB Garamond (L)、Cormorant (Christian Thalmann) — L
• Arnhem (Fred Smeijers / OurType) — C
• Galaxie Copernicus (Chester Jenkins + Kris Sowersby) — C
• Sabon Next (Jan Tschichold、Jean François Porchezによる復刻) — C

トランジショナル・セリフ

18世紀の書体で、コントラストが高く、ストレスがより垂直です（Baskerville／Times系譜）。

• Source Serif 4 (Frank Grießhammer、Adobe) — L
• Newsreader (Production Type) — L
• Tiempos (Kris Sowersby / Klim) — C、現代風にしたPlantin／Times
• Lyon (Kai Bernau / Commercial Type) — C

ディドン／モダン・セリフ

極端な太細のコントラストと極細のセリフが特徴です（Bodoni／Didot系譜）。

• Libre Caslon Displayはディドン体ではありません — 無料で使えるディドン体ならPlayfair Display (Claus Eggers Sørensen) — L（注：こちらも今では一般的です。大きく設定する場合に限りましょう）
• Genath (François Rappo / Optimo) — C、厳密なバーゼル系ディドン体の復刻
• Canela (Miguel Reyes / Commercial Type) — C、ディドン × グリフィック
• Domaine Display (Klim) — C

スラブ・セリフ

重厚で、セリフにブラケットがないことが多い書体です。

• Roboto Slabは使い古されています — Zilla Slab (Mozilla向けTypotheque) — L、またはBricolageの太めのウェイトを使いましょう
• Rockwell / Archer系譜の商用書体：Archer (Hoefler&Co) — C
• Caponi Slab (OH no Type Co) — C

グリフィック／インサイズド

彫刻刀で刻んだような、フレアしたターミナルが特徴で、セリフ体とサンセリフ体の中間にある石彫風の書体です。

• Trajanは（映画ポスターで使い古された）ありきたりな書体です — 避けて、代わりにAlbertusに近い書体かFriz Quadrataを使いましょう
• Hatton (Pangram Pangram) — 無料で試用可能、コントラストの高いグリフィック・ディスプレイ
• Schnyder (Commercial Type) — C、コントラストのあるグリフィック・ディスプレイ

ヒューマニスト・セリフ

画面上での読みやすさを重視して作られた、温かみのある、コントラストの低い本文向けセリフ体です。

• Spectral (Production Type) — L
• Source Serif 4 — L
• Lexicon (Bram de Does / TEFF) — C、書籍の本文用書体のゴールドスタンダード
• FF Scala (Martin Majoor) — C

ディスプレイ

大きく、個性的で、見出し専用の書体です。

• Bricolage Grotesque (Mathieu Triay) — L、wdth + opsz
• Big Shoulders (Production Type / Chicago) — L
• Anybody (Tyler Finck) — L、幅軸の可変範囲が極端
• Druk (Berton Hasebe / Commercial Type) — C、ポスター向けのコンデンス体
• Obviously (James Edmondson / OH no Type Co) — C
• Migra、Editorial New (Pangram Pangram) — 無料で試用可能

等幅

コード、データ、技術的な用途向けです。

• JetBrains Mono (L)、IBM Plex Mono (L)、Commit Mono (L、意図的に「匿名」なデザイン)、Departure Mono (L、ピクセル)
• Recursive Mono (Arrow Type) — L、「カジュアル」軸を備えた可変フォント
• MD IO (Mass-Driver) — C
• Vulf Mono (OH no Type Co) — C、温かみがあり、インクの濃い印象

意外性のあるカテゴリー

• ステンシル： Chaney（atipo、PWYW）、Stardom／Velvetyne のディスプレイ用ステンシル — 実用的／軍事的／工業的な雰囲気を加えます。
• メカニカル／モノリニア： Recursive Mono Casual（L）、Space Mono（L） — 均一なストロークで、技術的ながら親しみやすい印象です。
• リバースコントラスト（横線が太く、縦線が細い — ウエスタン／サーカス／「イタリアン」）：Le Murmure はこの傾向があり、OH no Type Co のディスプレイ用書体もこれを探求しています。商用の Caslon Doric に近いスラブ・リバース書体もあります。意図的な刺激として使いましょう。
• ブラックレター寄り／完全なゴシック体ではないテクストゥーラ： メタル／ヘリテージ／エディトリアルの引用文以外で適切な場面はまれです。使う必要がある場合は、1500年代のテクストゥーラよりも 現代的な解釈 を選び、本文には決して使わないでください。

---

4. リブレ・ティア — 予算がないことは言い訳になりません

(a) 定番以外の興味深い Google Fonts

Google Fonts は Roboto と Open Sans だけではありません。代わりに次の書体を選びましょう。

• セリフ： Newsreader（Production Type）、Source Serif 4（Adobe）、Spectral（Production Type）、Libre Caslon（Text + Display）、EB Garamond、Cormorant、Zilla Slab。
• グロテスク／サンセリフ： Bricolage Grotesque、Instrument Sans（凝縮ディスプレイの組み合わせには Instrument Serif）、Hanken Grotesk、Schibsted Grotesk、Gabarito、Onest、Figtree、Familjen Grotesk、Archivo（Archivo Expanded／Narrow も）、Mona Sans／Hubot Sans（GitHub）。
• 注意 — リブレでもすでに使われすぎています： Fraunces、Space Grotesk、Sora、Plus Jakarta Sans。良い書体ですが、使えば誰もがいるのと同じ場所に集まることになります。到達点ではなく、乗り越えるべきデフォルト と考えてください。

(b) 知っておく価値のある、Google 以外のリブレおよび PWYW ファウンドリー

• Velvetyne（velvetyne.fr） — 2010年創業、フランス。最も冒険的なリブレ・カタログです。Le Murmure、Pilowlava、Basteleur、Fivo Sans、Redaction などがあります。本当にリブレです（使用／改変／再配布が可能）。
• Collletttivo（collletttivo.it） — ミラノ発、イタリア初のオープンソース・ファウンドリー。Apfel Grotezk などがあります。
• The League of Moveable Type — オリジナルのオープンソース・ファウンドリー（League Gothic、League Spartan、Ostrich Sans）。
• atipo foundry（atipofoundry.com） — スペイン、ヒホン。真の pay-what-you-want（最低価格を含め、自分で価格を設定できます）：Wotfard、Basier、Chaney、Round 8、Cassannet Plus、Sfizia、N27。
• Uncut.wtf — 独立系デザイナーによる、現代的な無料／オープンソース書体を集めた厳選カタログ（約160種以上、Kasper Nordkvist 運営）。現在 のリブレ作品を見つけるのに最適な場所です。
• Open Foundry（open-foundry.com） — 書体見本に集中できる、厳選されたオープンソース書体ギャラリーです。
• Fontshare／Indian Type Foundry（fontshare.com） — 商用利用無料で、高品質です（Satoshi、General Sans、Clash Display、Switzer、Cabinet Grotesk）。注意： すでにひどく使い古されている書体もいくつかあります。AI 向けスターターパックと考え、§0 の代替案を優先してください。

無料お試し ≠ リブレ。 Pangram Pangram と Displaay は、寛大な 試用版／個人利用無料 の書体を提供していますが、商用利用にはライセンスが必要です。「無料」の試用版のウェイトを使ってクライアントのサイトを公開してはいけません。

---

5. 文字サイズのスケール

モジュラー比率

比率	名称	用途
1.067	マイナーセカンド	高密度な UI、ダッシュボード
1.125	メジャーセカンド	一般的なウェブ本文
1.200	マイナーサード	バランスの取れた標準的な階層
1.250	メジャーサード	マーケティング、見出し重視のデザイン
1.333	パーフェクトフォース	ヒーローセクション、大胆なメッセージ
1.414	オーギュメンテッドフォース	エディトリアルなドラマ性
1.618	黄金比	古典的。ただし、ほとんどの UI には大きすぎます — ポスター／ディスプレイ用途に限って使いましょう

デザインの調子に合った比率を選びましょう。高密度なツールには 小さな 比率（1.125～1.2）が適しています。ファッション系のランディングページには 大きな 比率（1.333 以上）を使い、ディスプレイ書体がゆったりと見えるようにします。

clamp() を使った流動的な文字サイズ

:root {
  /* body: 16px @ 320px viewport → 20px @ 1240px */
  --step-0: clamp(1rem, 0.91rem + 0.43vw, 1.25rem);
  /* h2: 28px → 48px */
  --step-3: clamp(1.75rem, 1.32rem + 2.14vw, 3rem);
}
/* Always use rem for the min/max so user zoom is respected (see §8). */

Utopia（utopia.fyi）のようなツールを使ってスケール全体を生成し、最小値と最大値のセットが同じ比率を保つようにしましょう。各段階を手作業で調整してリズムを崩さないでください。

縦方向のリズム

ベースラインの単位（例：1.5rem = 24px）を設定し、間隔をその倍数にします。見出しも整数倍に揃えます。本文の行の高さは約1.5～1.7、見出しはやや詰めて1.05～1.2にします。全体に一律の line-height を適用しないでください。

---

6. バリアブルフォントと軸

軸	タグ	一般的な範囲	実際の用途
ウェイト	wght	100～900	1つのファイルで多様なウェイトを使用できます。アニメーションやテーマ設定にも対応します
幅	wdth	約75～125	字間を再調整せずに、見出しをコンテナに収められます
オプティカルサイズ	opsz	8～144	サイズに応じてコントラストを適切に調整します。font-optical-sizing: auto で自動設定できます
傾き	slnt	-12～0	2つ目のファイルを使わずに斜体にできます
グレード	GRAD	可変	リフローさせずに見かけ上のウェイトを調整できます。ダークモードに最適です

opsz を正しく使う： 大きなディスプレイサイズでは、コントラストを高くし、セリフを細く、字間を詰めます。小さな文字ではその逆にします。Newsreader や Bricolage Grotesque のような書体には実際の opsz 軸があるため、font-optical-sizing: auto でブラウザーに制御させるか、書体の各レベルに応じて明示的に設定します。本文にディスプレイ用の opsz を設定しないでください。

GRAD によるダークモードの補正（レイアウトシフトなし）：

@media (prefers-color-scheme: dark) {
  body { font-variation-settings: "GRAD" 50; } /* heavier-looking, same metrics */
}

書体に GRAD がない場合は、ウェイトを微調整します（400 → 450）。ただし、メトリクスが変わり、レイアウトがずれる可能性があることに注意してください。

特殊な軸もあります。 書体ごとに把握しておく価値があります。Recursive には CASL（カジュアル）軸と MONO 軸があり、一部の Dinamo／バリアブルディスプレイ書体には、セリフの形や「エネルギー」を調整するカスタム軸があります。ファウンドリーの仕様を確認し、軸タグを決めつけないでください。

---

7. パフォーマンスと読み込み

• 制御性とプライバシーを重視して WOFF2 をセルフホストし、CDN は必要な場合に限ってください。 Google Fonts の CSS はレンダリングをブロックする往復通信を追加します。使用する場合は preconnect を設定し、WOFF2 のセルフホストを優先してください。
• サブセット化します。 ラテン文字のみなら約30KBですが、全字種では約150KB以上になります。配信しないキリル文字、ギリシャ文字、ベトナム語文字を削除します。ツール：glyphhanger、fonttools subset。
• 本文には font-display: swap（すぐにテキストを表示）、重要でない装飾用書体には optional を使い、CLS を完全に回避します。
• 重要な書体を1つだけプリロードします： <link rel="preload" as="font" type="font/woff2" crossorigin>。すべてをプリロードしないでください。帯域幅を奪い合うだけです。
• size-adjust とフォールバックのメトリクスで CLS を防ぎます。 フォールバックの x-height／送り幅をウェブフォントに合わせて、フォントの切り替え時にリフローしないようにします：

@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial");
  size-adjust: 97%;     /* tune to match the real face's x-height */
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
body { font-family: "Hanken Grotesk", "Hanken Fallback", sans-serif; }

（Next.js の next/font、Fontaine、Capsize はこれらの上書きを自動生成します。活用してください。）

予算の目安： 高速（100KB未満、WOFF2が2～3個）・バランス型（100～200KB）・リッチ（200～400KB）。静的ウェイトを8個使うより、バリアブルフォントを1つ使うことを優先してください。

フォントに @import を使わないでください（レンダリングをブロックし、読み込みが直列化されます）。また、アイコンに Font Awesome やアイコンフォントを絶対に使わず、インライン SVG を使用してください。

---

8. アクセシビリティ — 必須事項

以下は推奨ではなく、厳守すべきルールです。

• 本文／文章／キャプションのテキストは14px（0.875rem）以上にしてください。これより小さくしないでください。 本文に text-xs を使わないでください。文章、キャプション、メタ情報に 0.7–0.8rem を使わないでください。
• アイブロウ／ラベルのテキストを12pxにできるのは、ウェイトが600以上、すべて大文字、字間が0.1em以上の場合に限ります。これにより、見かけのサイズが大きくなります。これが唯一の例外です。
• ズームを制限しないでください。 ビューポートのメタタグに user-scalable=no や maximum-scale<2 を指定しないでください。<meta name="viewport" content="width=device-width, initial-scale=1"> を使い、ピンチズームを妨げる指定は追加しないでください。
• **本文のサイズ指定には px ではなく rem/em を使い、**ユーザーのブラウザーのフォントサイズ設定やズームを反映させます。clamp() の最小値と最大値も rem で指定します。
• **WCAG 2.1 AA のコントラスト比：**本文は4.5:1、大きなテキスト（24px以上、または太字で18.66px以上）は3:1にします。明るい背景に明るい文字、暗い背景に暗い文字を使わないでください。
• 本文の行間は1.5倍以上、段落間隔はフォントサイズの2倍以上にします。レイアウトを崩すことなく、ユーザーが字間を0.12em、単語間隔を0.16emに変更できる必要があります。
• 1行の長さは45～75文字（最適値は65ch）にします。文章の幅に上限を設け、広い画面ではビューポートの端まで文章を広げないでください。

---

9. OpenType 機能

/* Prefer the high-level properties; fall back to feature-settings only for ssXX/cvXX */
.tabular   { font-variant-numeric: tabular-nums; }      /* align numbers in tables */
.fractions { font-variant-numeric: diagonal-fractions; }/* 1/2 → ½ */
.smallcaps { font-variant-caps: all-small-caps; }       /* acronyms, not faux caps */
.ligatures { font-variant-ligatures: common-ligatures; }
.brand     { font-feature-settings: "ss01" 1, "cv05" 2; }/* stylistic alts — check the spec */

数値の列（価格、ダッシュボードなど）には等幅数字を使用してください。フォントに備わっている本物のスモールキャップを使用し、text-transform と小さいサイズの組み合わせは避けてください（これは偽物のスモールキャップで、太さが不均一になります）。スタイルセット（ssXX）はフォントごとに異なります。ファウンダリーのグリフ一覧を確認し、ss01 をむやみに有効にしないでください。

---

10. アンチパターン

★ AI ポートフォリオのスターターパック風（見出しのアンチパターン）

見た目： 大きく柔らかなディスプレイセリフ体（Fraunces）＋本文の Inter ＋広大な余白＋紫／ティールのアクセントグラデーションを1つ＋見出しの Clash Display。問題点： 「デザインされたのではなく、生成された」ことを示すビジュアル上の特徴であり、すぐに古びて、他の何万ものサイトと見分けがつかなくなります。代わりに： レジスター（§1）を選び、あらゆるデフォルトを超え（§0）、書体で独自の視点を表現してください。

レジスターを知らずにフォントを選ぶ

ムード／時代／声を言葉にできる前に書体を選ぶことです。いつもの選択肢に流れてしまいます。まずレジスターを決めれば、候補はおのずと絞られます。

システムフォントで妥協する

選ぶのが難しいという理由で、font-family: -apple-system, ... を最終的なブランドの決定として採用することです。使い捨てのツールなら問題ありませんが、アイデンティティを持つものでは妥協にあたります。（システムフォントのスタックは優れたフォールバックですが、ブランドにはなりません。）

偽の太字／偽のイタリック

ファミリーにない太さや傾きを合成すること（ブラウザーがレギュラーをにじませます）。必ず本物のボールドとイタリックを読み込むか、可変フォントの wght／slnt 軸を使用してください。

ファミリーが多すぎる

関連性のないファミリーを3つ以上使うと混乱します。最大でも2つにしてください（コード用のモノスペース体を3つ目にするのは構いません）。太さ／幅／opsz／大文字・小文字で変化をつけましょう。

長い行の本文を中央揃えにする

数行を超える段落を中央揃えにしたり、行長を約75ch以上にしたりすることです。どちらも可読性を損ない、視線が次の行の始まりを見失います。

xハイトの調整を無視する

xハイトを比較せずに書体を組み合わせたり置き換えたりすると、サイズの不一致が目立ち、CLSが発生します。小文字を比較し、size-adjust で調整してください。

太さの差が大きすぎる

大きなサイズの見出しに、本文の400から700へ一気に切り替えると、ちぐはぐに感じられることがあります。控えめな階層には400／600または380／520を試し、大きな差は本当に強い印象を与えるディスプレイ書体に限定してください。

全体で行の高さを統一し、pxサイズを固定する

すべての箇所で line-height: 1.5 を使ったり、本文サイズを px でハードコードしたりすることです。階層ごとに行の高さを設定し、サイズには clamp() を使った rem を指定してください。

文字セット全体を読み込む

英語のみのサイトにキリル文字／ギリシャ文字／ベトナム語を含めて配信することです。サブセット化してください。

---

11. ライセンスに関する知識

リリース前に必ず確認してください。誤ったライセンスは、法的にも評判の面でも問題になります。

• SIL OFL（Open Font License）： フリーライセンスの標準です（Google Fonts の大半、Adobe Source ファミリー、IBM Plex、Velvetyne、Collletttivo）。商用利用、埋め込み、セルフホスト、改変・再配布が可能です（同じライセンスの下で利用する必要があり、フォント単体で販売することはできません）。製品における安全なデフォルトです。
• Apache 2.0： こちらも寛容なライセンスです（Roboto、歴史的には Inter）。商用利用に問題はなく、OFL より再配布に関する条件が少なめです。
• 商用 EULA： 小売向けフォントファウンドリー（Klim、Commercial Type、Grilli Type、Dinamo、Sharp Type、OH no Type Co、Colophon、Lineto、Optimo、Production Type の小売版、MCKL、Displaay の小売版）は、用途の種類ごとに、別々のライセンスを提供することがよくあります。
  • デスクトップ（インストール＋デザインカンプ／印刷物）— 通常はワークステーション数に応じた価格です。
  • Web（@font-face でセルフホスト）— 月間ページビュー数または定額で価格が決まります。セルフホストとファウンドリーのホスティングでは条件が異なります。独自の CDN を必須とするところもあれば、WOFF2 のホスティングを許可するところもあります。
  • アプリ／埋め込み — アプリ、電子書籍、ソフトウェア UI、放送、ロゴなどは、ほぼ常に別途、より高額なライセンスが必要です。Web ライセンスでは iOS アプリをカバーしません。
• トライアル／個人利用無料： Pangram Pangram、Displaay をはじめ、多くのファウンドリーは非商用利用（ポートフォリオ、ピッチ資料）向けに無料のウェイトを提供しています。商用利用には料金がかかります。「無料で試用可能」はフリーライセンスを意味しません。
• PWYW： atipo は価格（最低価格を含む）を自分で決められ、完全な商用利用権を得られます。フリーライセンスでは要件を満たせない場合に、実際に最もお得な価格帯です。
• ファウンドリーのホスティングとセルフホスト： Adobe Fonts、Monotype、Fontstand などのファウンドリーがホスティングする Web フォントサービスは、ライセンスが含まれますが、利用はそれぞれの CDN／サブスクリプションに紐づき、契約が切れると利用できなくなることがあります。長く維持する製品には、OFL／PWYW／購入した Web 用 WOFF2 をセルフホストするのが堅実です。
• 必ず個別の EULA を確認してください。「Pinterest で見た」はライセンスではありません。書体をブランドに採用する前に、デスクトップ／Web／アプリの利用範囲、ページビューの料金区分、改変権を確認してください。

---

12. 他のスキルとの連携

• design-system-creator — タイポグラフィトークン（スケール、行高、文字間隔、軸のデフォルト値）を出力します。
• web-design-expert — 選択したシステムをレイアウトに実装します。
• vibe-matcher — 選定前に、ブランドの雰囲気を§1のレジスターに落とし込みます。

---

クイックリファレンス

• 行長： 45～75ch（65ch が理想）。本文： 14px／0.875rem 以上、rem 単位、行高 1.5～1.7。見出し： より詰めた行高（1.05～1.2）。
• 迷ったときのデフォルト： スーパーファミリー（IBM Plex または Source）— 調和が保証され、フリーライセンスで、可変で、多言語に対応しています。
• フォント名を挙げる前に： レジスターを決めます（§1）。フォントをリリースする前に： ライセンスを確認します（§11）。

---

書体はデフォルトではなく、選択するものです。なぜこの書体なのか、最も近い候補3つではなくこれを選ぶ理由を説明できないなら、まだ選べていません。