デザインの基礎

タイポグラフィ

組版設定全体または個別のフォントトークンを選び、サイトの書体を一度設定します。

このページの内容

text-<token> を使うと、文字サイズ、行の高さ、字間を1つのクラスでまとめて設定できます。ウェイト、フォントファミリー、色は別のクラスで追加します。

読みやすい文字の階層

標準のウェイトのまま、文字サイズ、余白、文字の役割で階層を作ります。どのプレビュー幅でも本文全体を表示します。

<p class="text-xs font-regular fg-text-muted">Field notes / 024</p><h2 class="text-2xl font-regular fg-text-strong">Make room for the details.</h2><p class="text-sm">A consistent type scale helps readers move from the main idea to the supporting detail.</p>

生成された CSS

@layer theme {  :root,  :host {    --font-weight-regular: 400;    --font-size-2xl: 1.5rem;    --text-2xl: var(--font-size-2xl);    --text-2xl--line-height: 1.35;    --text-2xl--letter-spacing: -.015em  }}@layer utilities {  .text-2xl {    font-size: var(--text-2xl);    line-height: var(--text-2xl--line-height, normal);    letter-spacing: var(--text-2xl--letter-spacing, normal)  }  .font-regular {    font-weight: var(--font-weight-regular)  }}

この階層は標準のウェイトを保ち、文字サイズ、余白、文字の役割で構成しています。強調は内容が必要とする箇所だけに加えます。見出しだからといって太くする必要はありません。各設定と追加方法は文字を参照してください。

#組版設定と文字サイズ

font-<size> は文字サイズだけを変え、継承した行の高さと字間は保ちます。text-<token> は3つすべてを設定します。同じ文字サイズで両者を比べてください。

同じ文字サイズ、2つの組版設定

2つの見本は文字サイズも内容も同じです。font-3xl は親要素の行の高さと字間を継承し、text-3xl は3つのプロパティをすべて設定します。

<div class="leading-md tracking-normal">  <p class="font-3xl">Designing for a clearer reading experience.</p>  <p class="text-3xl">Designing for a clearer reading experience.</p></div>

生成された CSS

@layer theme {  :root,  :host {    --font-size-3xl: 2rem;    --text-3xl: var(--font-size-3xl);    --text-3xl--line-height: 1.25;    --text-3xl--letter-spacing: -.02em  }}@layer utilities {  .text-3xl {    font-size: var(--text-3xl);    line-height: var(--text-3xl--line-height, normal);    letter-spacing: var(--text-3xl--letter-spacing, normal)  }  .font-3xl {    font-size: var(--font-size-3xl)  }}

本文、見出し、ディスプレイ用のスタイルには text-<token> を使います。font-<size>、leading-<token>、tracking-<token> は、意図的に組版設定から外す場合に使います。

接頭辞の font- はファミリーとウェイトのキーも受け付けます。font-sans はファミリーを選び、font-bold はウェイトを指定します。これらの名前空間で独自の名前が重ならないようにしてください。値と解決規則はフォントに一覧があります。

#サイトの書体

アプリの書体は @theme で一度設定します。プリセットの base レイヤーが文書に適用するので、マークアップにフォントのクラスは不要です。

globals.css

@import "@master/css";@theme {  --font-sans: "Geist", "Noto Sans TC";  --font-mono: "IBM Plex Mono";  --font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";  --font-feature-mono: "cv01", "cv02", "cv29";}

base レイヤーは --font-sans を --font-family-sans 経由で解決し、body とシャドーホストに適用します。--font-mono は --font-family-mono 経由で解決し、code、kbd、samp、pre に適用します。--font-feature-* トークンは省略でき、normal にフォールバックします。フォームコントロールは周囲のフォントを継承します。フォントファイルは @font-face または配信元のスタイルシートで読み込みます。単一の要素には font-mono などのクラスを使います。

#実際の文章で検証する

実際のコンテンツ幅で、短い見出し、長い見出し、段落全体を確認します。狭い画面と拡大した文字でも繰り返してください。計算後の文字サイズだけでなく、改行位置やアクセント記号、ディセンダーの欠けも確認します。

フォントファミリーの宣言は要求であり、ファイルの読み込みや全字形の収録を証明するものではありません。特にラテン文字と CJK 文字が同じ行にある場合は、実際に使われたフォントを確認します。コンテナーは文字に合わせて伸びられるようにし、英語の見本の行数を保つためだけにカードの高さを固定しないでください。

タイポグラフィ

#概要

#組版設定と文字サイズ

#サイトの書体

#実際の文章で検証する