ネオグロテスクとは｜Webで使う欧文書体の選び方

この記事の対象: 欧文書体の分類に自信がなく、案件ごとに選ぶ根拠が欲しいWeb制作者
読了時間: 約14分

欧文サンセリフを「なんとなくHelveticaに似たもの」で選んでいると、日本語と組んだときに文字の太さがそろわず、見出しだけが浮きます。ネオグロテスクという分類を知っておくと、日本語ゴシックと並べて違和感が出ない書体を、見た目の特徴から逆算して選べるようになります。

この記事では、グロテスク／ネオグロテスク／ジオメトリック／ヒューマニストの4分類を字形の違いで見分ける方法、日本語書体との組み合わせ、Webフォントとして読み込むときの重さ、system-uiで済ませてよい案件の線引きまでを扱います。コードはすべてそのまま貼って動く形で載せます。

ネオグロテスクとは何か｜グロテスクとの違いから見る

「グロテスク」は19世紀のサンセリフの呼び名

欧文サンセリフの分類で出てくる「グロテスク」は、気味が悪いという意味ではありません。19世紀のイギリスで、セリフ（文字の端の飾り）を持たない書体が登場したとき、当時の人々にとって見慣れない姿だったことから付いた呼称です。ドイツ語圏では同じ系統を「グロテスク（Grotesk）」と呼び、その名残が Akzidenz-Grotesk のような書体名に残っています。

グロテスク体の特徴は、字形に手描きの癖がまだ残っていることです。小文字の a や g の造形に不均一さがあり、文字ごとの幅のばらつきも大きい。Web制作で触れる機会があるのは、クラシックな佇まいを狙った案件で指定される場合です。

ネオグロテスクは「癖を削ぎ落としたグロテスク」

ネオグロテスク（Neo-grotesque）は、20世紀半ばにグロテスク体から癖を取り除き、幾何学的に整理し直した系統です。代表格が1957年のHelvetica、そして同じ年に出たUnivers。Webフォントとして広く使われている Inter や Roboto も、この系統に属します。

見分け方のポイントは次の3つです。

とくに終端の切り方が決定的です。Helveticaの c や s の先端は、斜めではなく水平に断ち切られています。ここが斜めに抜けていれば、ネオグロテスクではなくヒューマニスト系を疑ってください。

ネオグロテスクが解決すること

この系統が強いのは、情報量が多い画面で、書体そのものが主張しないことです。字形に個性がないため、UIラベル、表のヘッダ、価格、数字の羅列といった「読ませるが見せない」要素に向きます。逆に言えば、ブランドの個性を書体で出したい案件では、ネオグロテスクは弱い選択になります。

4分類を字形で見分ける｜グロテスク・ネオグロテスク・ジオメトリック・ヒューマニスト

この図の4系統のうち、Web制作で頻繁に判断が要るのはネオグロテスク、ジオメトリック、ヒューマニストの3つです。グロテスクは指定されたときだけ扱えば足ります。

ジオメトリックは「円と直線で作った書体」

ジオメトリック（Geometric）は、円・三角・四角という図形から文字を起こした系統です。1927年のFutura、Webフォントでは Poppins や Montserrat が該当します。

• 小文字 o がほぼ真円
• 小文字 a が1階建て（丸と縦棒だけ）
• 大文字の幅がそろっていて、整列したときの見た目が機械的

長所は、短い語をロゴ的に見せたときの強さです。欠点は長文で読みにくいこと。o が真円で、b d p q の区別がつきにくく、小さいサイズで文字の判別に時間がかかります。本文には使わず、見出しとナビに限定するのが安全です。

ヒューマニストは「手書きの骨格を残した書体」

ヒューマニスト（Humanist）は、ローマ字の手書きの骨格をサンセリフに持ち込んだ系統です。Frutiger、Open Sans、Lato、Source Sans が入ります。

• c や s の終端が斜めに抜ける
• 小文字の高さ（x-height）に対して、上下に伸びる部分（アセンダ・ディセンダ）が長め
• l（小文字L）と I（大文字i）と 1 の区別がつきやすい

小さいサイズでの読みやすさが4系統でもっとも安定します。長文を読ませる案件、フォームのラベル、エラーメッセージ、医療や金融のように読み間違いが損害になる場面では、ヒューマニストを選ぶ理由が明確にあります。

医療系サイトの配色や印象設計を見ていくと、書体も含めて「迷わせない」方向に寄せている例が多く見つかります。

業界・事例
病院・医療・薬品Webサイトデザイン事例7選｜傾向をカラー別に解説
Soreiine!!に掲載している病院・医療・薬品カテゴリの事例は7件。数としては多くありませんが、この業種は「信頼感」と「親しみやすさ」という相反する要求…

4分類の使いどころを言い切る

「どれも良い」という結論は、選定の責任を読者に投げているだけです。案件が始まったら、まず本文で欧文がどれだけ出るかを数えてください。欧文が本文に混ざる量が多ければヒューマニスト、ほぼ見出しと数字だけならネオグロテスク、扉の1語だけならジオメトリックが通せます。

日本語書体と組むときの相性で選ぶ

合わせる軸は「太さ」と「x-height」の2つ

和欧混植で破綻する原因は、ほとんどがこの2つです。

1. 線の太さがそろわない　欧文のRegularが日本語のMediumより細く見えると、英字部分だけが薄く沈みます。
2. 小文字の高さが合わない　日本語の漢字の高さに対して欧文の小文字が低すぎると、英単語が行の下に落ちたように見えます。

ネオグロテスクはこの2点で扱いやすい側にいます。x-heightが高めに設計されているものが多く、日本語ゴシックの漢字の高さと並べたときに落差が小さい。これがネオグロテスクが和欧混植で定番になっている理由です。

日本語書体ごとの組み合わせ

游ゴシックにHelveticaを当てて見出しが黒く重くなった経験がある人は、太さの不一致を見ています。游ゴシックのBoldはWindows環境で細く出ることがあり、欧文側だけが太く残ります。この組み合わせを選ぶなら、欧文側を1段落として調整してください。

和欧混植のCSS（そのままコピーして動く）

font-family に欧文を先に書くのが基本です。ブラウザは1文字ずつ前から探しに行くため、欧文を先に置けば英数字は欧文書体、日本語は後ろの日本語書体が当たります。

:root {
  --font-latin: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

body {
  font-family: var(--font-latin), var(--font-jp);
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  color: #1f2328;
  background: #ffffff;
}

h1, h2, h3 {
  font-family: var(--font-latin), var(--font-jp);
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-weight: 700;
}

/* 英数字だけ微調整したいとき。日本語には影響しない */
.latin-tune {
  font-synthesis: none;
}

font-feature-settings: "palt" 1 は日本語の約物（句読点やカッコ）の余白を詰める指定です。見出しで句読点の前後が開いて見えるときに効きます。本文に当てると行の詰まりすぎを招くことがあるので、見出しだけに限定する運用も成立します。

font-synthesis: none は、Boldのフォントファイルが無いときにブラウザが勝手に太らせる（擬似ボールド）のを止める指定です。擬似ボールドは字形が潰れて汚くなるため、ウェイトを読み込んでいない場合は無効化したほうが読みやすくなります。Chrome・Safari・Firefoxの近年のバージョンで使えますが、自分の対応環境は MDN のブラウザ互換性表か、CSS.supports('font-synthesis', 'none') で確認してください。

特定の文字だけ別の書体を当てる

数字だけを欧文書体で出したい、記号だけ差し替えたい、という場面では unicode-range を使います。

/* 英数字と基本記号だけ Inter を当てる */
@font-face {
  font-family: "LatinOnly";
  src: local("Inter"), url("/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20A0-20BF;
}

.mixed {
  font-family: "LatinOnly", "Noto Sans JP", sans-serif;
}

unicode-range を指定しておくと、ブラウザはその範囲の文字がページに現れたときだけフォントを取りに行きます。日本語だけのページでは欧文ファイルが落ちてこないため、無駄な転送が減ります。

Webフォントの重さと、system-uiで済ませる判断

日本語Webフォントは欧文より大幅に重い

欧文書体の収録文字数は、ラテン基本と記号を合わせて数百字です。日本語はJIS第1・第2水準まで入れると数千字になり、ファイルサイズが桁で変わります。ここを無視して「Noto Sans JPを全ウェイト読み込む」と書くと、初回表示が目に見えて遅くなります。

重さを削る手は4つあります。

• ウェイトを絞る　Regular（400）とBold（700）の2つで組めるデザインにする。300や500まで欲しくなるのはデザイン側の設計が甘いときが多い
• 可変フォント（Variable Font）を1本にする　複数ウェイトを別ファイルで読むより軽くなる場合がある。ただし可変フォントは1ファイルが大きいので、使うウェイトが2つだけなら静的ファイル2本のほうが軽い。実測で比べる
• サブセット化する　使う文字だけ抜き出す。固定文言のロゴやキャッチなら劇的に小さくなるが、ユーザー投稿がある画面では文字が欠けるので使えない
• 日本語は端末のフォントに任せ、欧文だけWebフォントにする　前節の unicode-range がこれにあたる

font-display の選び方を言い切る

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

font-display の値で挙動が変わります。

本文は swap で固定していいという結論です。block を本文に当てると、回線が細い環境で本文が真っ白な時間が生まれます。読めない時間はアクセシビリティの問題であり、計測上もコンテンツの描画完了が遅れます。

ただし swap には副作用があります。代替フォントから本来のフォントに切り替わる瞬間、文字の幅が変わってレイアウトがずれます。これが Cumulative Layout Shift（累積レイアウト変更）として計測に出ます。対策は size-adjust と記述子で代替フォントの寸法を寄せることです。

/* 代替フォントの寸法を Inter に寄せて、入れ替わり時のズレを減らす */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: "Inter", "Inter Fallback", "Noto Sans JP", sans-serif;
}

数値は書体の組み合わせごとに変わるので、この値をそのまま信じないこと。切り替わりの瞬間を開発ツールのスクリーンショット連写で見て、文字の送りが合うまで size-adjust を1%刻みで動かすのが現実的な詰め方です。size-adjust と各 -override 系はChrome・Firefoxの近年のバージョンで動きますが、Safariの対応状況は案件の対応バージョンで実機確認してください。

読み込みを先に始める

HTMLの <head> に1行入れるだけで、CSSの解析を待たずにフォントの取得が始まります。

<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>

crossorigin を省くと二重に取得されます。付け忘れが本当に多い箇所なので、ネットワークタブで同じファイルが2回出ていないか確認してください。preloadするのは最初の画面で確実に使うファイルだけです。全ウェイトをpreloadすると、重要な画像の取得が後ろに押し出されて逆に遅くなります。

この順で決めると、「とりあえずGoogle Fontsから5ウェイト」という状態を回避できます。判断の起点は常に、欧文がどこに何文字出るかです。

system-ui で済ませてよい案件、だめな案件

system-ui は、閲覧している端末のUI既定フォントを指す値です。macOS・iOSではSan Francisco系、WindowsではSegoe UI系、AndroidではRobotoが当たります。Webフォントを1バイトも読まずにネオグロテスク／ヒューマニスト寄りの見た目が得られるのが最大の利点です。

.ui-stack {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

-apple-system を併記しているのは、古いSafariが system-ui を解釈しない場合の保険です。並び順を変えると当たる書体が変わるので、この順を崩さないでください。

使ってよいか、案件の種類で言い切ります。

ブランド表現で書体が主役になる領域は、やはり譲れません。アパレルやアートの事例を並べて見ると、扉の1語に何を使うかで印象が決まっているのがわかります。

業界・事例
アパレル・ファッションのWebサイトデザイン事例5選｜傾向を分類してわかったこと
Soreiine!!ギャラリーに掲載されているアパレル・ファッションカテゴリのサイトは5件。母数としては小さいものの、この5件を並べてみると「なぜこの業種は…

端末差を気にせず端末のUIフォントに寄せたい場合は、system-ui 以外の汎用値も使えます。ui-sans-serif（UIのサンセリフ）、ui-monospace（UIの等幅）などが近年のブラウザで解釈されます。対応していないブラウザでは単に無視されて次の候補に進むため、並べて書いておく分には害がありません。

読みやすさとアクセシビリティへの影響

コントラストは「文字の太さ」で変わる

同じ色でも、細い書体では読みにくくなります。WCAGのコントラスト比の基準は、通常の文字で4.5:1、大きい文字（おおよそ24px以上、または太字で19px以上）で3:1です。ネオグロテスクは線が均一で、Lightウェイトを薄いグレーで置くと基準を割りやすい。

/* 本文の最低ライン。薄いグレーの見出しをやるなら太さか大きさで補う */
body {
  color: #1f2328;      /* 白地に対して十分なコントラスト */
  background: #ffffff;
}

.note {
  color: #5a6069;      /* 補助テキスト。実測で4.5:1を超えるか確認する */
  font-size: 0.9375rem;
}

/* Light ウェイトを使うなら色は濃いままにする */
.hero-lead {
  font-weight: 300;
  color: #1f2328;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
}

比率は目で判断せず、ブラウザの開発ツールの色選択画面に出るコントラスト比か、WebAIMのContrast Checkerで数値を確認してください。「薄いグレーが上品だから」で決めると、ロービジョンの利用者が読めなくなります。

文字サイズと行送りの下限を決める

• 本文は16px（1rem）以上。ネオグロテスクで14pxまで落とすと、l と 1 の判別が落ちる
• 行送り（line-height）は日本語本文で1.7〜1.9。欧文のみなら1.5前後でも読める
• 1行の文字数は日本語で35〜45字。max-width: 38em 程度で止める
• 均等割り（text-align: justify）は日本語で単語間が不自然に開くため使わない

.article {
  max-width: 38em;
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

word-break: keep-all と overflow-wrap: anywhere の組み合わせは、日本語の単語を途中で折らず、はみ出す長いURLだけは折る指定です。日本語の改行位置を制御したいときの基礎になります。

ユーザーの文字サイズ設定を壊さない

font-size に px を直書きすると、ブラウザの文字サイズ設定（「大」「特大」）が効かなくなる環境があります。ルートに px を置かず、rem で積み上げてください。

html {
  font-size: 100%;   /* ユーザー設定を尊重する */
}

body {
  font-size: 1rem;
}

html { font-size: 62.5% } という古い手法は、計算が楽になる代わりにユーザー設定との相性が悪くなります。今から書くなら使わないでください。

キーボード操作とフォーカス表示

書体の話から外れて見えますが、outline: none を一括で消す指定が書体リセットと一緒にCSSの先頭に入っているケースが多いので、ここで押さえます。

/* ポインタ操作では出さず、キーボード操作では必ず出す */
:focus-visible {
  outline: 3px solid #1f6feb;
  outline-offset: 2px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible は Chrome・Firefox・Safari の近年のバージョンで使えます。対応していない環境では :focus のまま表示されるだけなので、劣化の方向が安全です。フォーカスの枠色は背景に対して3:1以上を確保してください。

キーボード操作の確認は、ハンバーガーメニューのような開閉を持つ部品でとくに崩れやすい箇所です。

テクニック
スマホ用ハンバーガーメニューの実装方法｜アクセシビリティ対応の開閉とフォーカス管理
スマホのハンバーガーメニュー、見た目は作れても「開いている間に背後がスクロールする」「Escで閉じない」「Tabを押すとメニューの後ろのリンクにフォーカスが…

動きを減らしたい人への配慮

書体の切り替わりに合わせてフェードさせる演出を入れる場合は、動きを止める設定を尊重します。

.font-fade {
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .font-fade,
  .font-fade * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

prefers-reduced-motion はOSの「視差効果を減らす」設定を拾います。フォントの差し替えに演出を足すこと自体、効果が薄いうえに描画を増やすので、入れない判断のほうが筋が通ります。

表示速度への影響と、やりがちな失敗

書体まわりで速度を落とす典型

• 全ウェイト読み込み　100から900まで読むと転送量が膨らむ。使っているウェイトを開発ツールで数えて、使っていないものを消す
• 可変フォントの無自覚な採用　ウェイトが2つしか要らないのに可変フォントを入れると、かえって重くなる場合がある
• 日本語フォントのpreload　重いファイルをpreloadすると、ファーストビューの画像や主要CSSの取得が後回しになる
• テキストに filter や text-shadow を重ねる　とくに backdrop-filter を文字の背後に敷くと、スクロールごとに再描画が走って体感が落ちる。半透明の帯で文字を乗せるときは、filter ではなく単色の半透明背景で済ませられないか先に検討する
• フォント切り替えに伴う再レイアウト　前述の size-adjust で寸法を寄せておく

計測して判断する

# Chrome のネットワークタブで font を絞り込み、
# 「転送量」「リクエスト数」「同じファイルの重複」を見る
# 併せて Performance タブで Layout Shift を確認する

数字を見ずに「軽くしました」と言わないのが基本です。削る前と後で、フォントのリクエスト数と合計転送量、そして入れ替わり時のレイアウト変化量を記録してください。

リニューアルの発注前段階でフォント方針まで決めておくと、実装フェーズでの手戻りが減ります。

リニューアルガイド
Webリニューアルのチェックリスト｜発注前に埋める47項目【2026年】
リニューアルの担当になって最初に困るのは、「やることが多いのは分かるが、どの順番で何を決めればいいのか分からない」という点です。制作会社に相談すれば進行表は…

案件ごとの選定を言い切る

Web制作者の多くは、欧文書体を「見た目の好み」だけで選んでいます。だから「どれも良い」では役に立ちません。案件が来たときに、この表のどこに入るかで決めてください。

この2つで迷ったら、本文に欧文がどれだけ混ざるかで決めます。ジオメトリックは扉の1語に限定し、本文には回さないこと。

最小構成のCSS（このまま貼って使える）

欧文はネオグロテスク、日本語は端末任せ、見出しだけウェイトを足す構成です。日本語Webフォントを読まないので初回表示が軽くなります。

@font-face {
  font-family: "InterLatin";
  src: local("Inter"), url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2212;
}

@font-face {
  font-family: "InterLatin";
  src: local("Inter"), url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2212;
}

:root {
  --stack: "InterLatin", system-ui, -apple-system, "Segoe UI",
           "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

html { font-size: 100%; }

body {
  font-family: var(--stack);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #1f2328;
  background: #ffffff;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--stack);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-feature-settings: "palt" 1;
}

.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.num に入れた font-variant-numeric: tabular-nums は、数字の幅をそろえる指定です。価格や件数が並ぶ表で、数字の位置が揃わずガタつくときに効きます。ネオグロテスクの多くがこの機能を持っていますが、書体によっては入っていないので、適用前後を見比べて確認してください。

-webkit-font-smoothing: antialiased は WebKit 系（Safari、macOSのChrome）で文字を細く見せる指定です。細くなりすぎてコントラストが落ちることがあるため、ロービジョンへの配慮を優先する案件では入れない判断もあります。

書体を決める前に確認する3点

1. クライアントのVIに書体規定があるか　既に決まっているなら選定の議論は不要。ライセンス形態（Webフォントとして使えるか）だけ確認する
2. 商用利用とページビューの制限　有償Webフォントは月間ページビューで課金が変わるものがある。契約条件を見ずに実装しない
3. 日本語の落ち先　欧文だけ指定して日本語の候補を書き忘れると、端末によって予期しない書体が当たる。必ず日本語の候補を2つ以上並べる

流行っているから使う、という選び方だけはしないでください。Interが広く使われているのは、UIで主張しないという設計目的に合っているからです。ブランドの個性を出したい案件で同じ理由は成立しません。

デザイン制作会社のサイトを見比べると、書体の選定理由がそれぞれの立場を示しているのがわかります。

業界・事例
デザイン事務所・制作会社のWebサイトデザイン傾向｜掲載12件を分類
Soreiine!!のギャラリーに掲載している全162件のうち、デザイン事務所・制作会社カテゴリに分類されるのは12件です。母数としては決して大きくありませ…

よくある質問

ネオグロテスクとグロテスクの違いを一言で言うと何ですか

グロテスクは19世紀のサンセリフで、手描きの癖と字幅のばらつきが残っています。ネオグロテスクはそこから癖を取り除き、終端を水平・垂直に切り、軸を完全に垂直に整理し直した20世紀半ばの系統です。HelveticaとUniversが代表で、Webフォントの Inter や Roboto も同じ系統に入ります。

HelveticaとInterはどう使い分けますか

Helvetica系はOSに入っていることが多く、追加の読み込みなしで当てられる点が利点です。Interは画面での可読性を意識して設計されており、ウェイトの段階が細かく、数字の等幅表示などUI向けの機能を持っています。UIや管理画面はInter、既存のブランド規定でHelveticaが指定されているならHelveticaを使う、という切り分けで足ります。

system-ui だけで組むのは手抜きになりませんか

案件の種類で決まります。管理画面・社内ツール・ECの購入フローは、速度と可読性が表現より優先されるため system-ui で組むほうが正しい判断です。一方でブランドサイトやアパレル、アートの案件は書体が表現の一部なので、system-ui では要件を満たせません。手抜きかどうかではなく、何を優先する画面かで分けてください。

日本語Webフォントを読み込むと必ず遅くなりますか

収録文字数が多いため、欧文より重くなるのは避けられません。ただし軽くする手はあります。ウェイトを400と700の2つに絞る、unicode-range で欧文と日本語を分けて日本語は端末任せにする、固定文言ならサブセット化する、の3つが実務で効く順です。ユーザー投稿がある画面ではサブセット化は使えないので、文字が欠ける可能性を先に確認してください。

font-display は swap 以外を使う場面がありますか

本文は swap で固定して構いません。optional は装飾的な見出しで、間に合わなければ代替で出してよい場合に使います。block は本文に当てると読めない時間が生まれるため、ロゴに近い扱いの短い固定文字以外では選ばないでください。

まとめ

ネオグロテスクは、Helveticaから Inter までを含む「癖を削ぎ落としたサンセリフ」の系統です。字形に個性がないため、日本語ゴシックと混植したとき、そして表や数字が並ぶUIで強い。見分ける場所は、終端の切り方・軸の垂直さ・小文字 a の構造の3つです。

選定の判断は、本文に欧文がどれだけ混ざるかから逆算します。混ざる量が多いならヒューマニスト、見出しと数字が主ならネオグロテスク、扉の1語だけならジオメトリック。管理画面・社内ツール・ECの購入フローは system-ui で済ませ、ブランドサイトは書体を読み込む。この線引きを案件の最初に決めておくと、実装の後半で手戻りが起きません。

速度とアクセシビリティは、書体の選定と同時に決まります。ウェイトを絞り、unicode-range で日本語を切り離し、font-display: swap と size-adjust で入れ替わりのズレを抑える。コントラスト比は目で判断せず数値で確認し、:focus-visible を消さない。ここまでをセットで扱えば、「書体を選んだ」と言えるようになります。