wensity/wensity-typography

Wensity Typography

インターフェースにおいて、タイポグラフィがほとんどの作業を担います。タイポグラフィが適切であれば、プレーンなページでもデザインされたように見えますが、間違っていると、どんなに色や動きを加えても救えません。このスキルは、一度セットアップすればあらゆる場所に適用できるシステムを提供します。

以下の値はデフォルトです。プロジェクトに既にタイポグラフィシステムがある場合は、それを維持し、使用方法を改善してください。指示があった場合のみ置き換えてください。

1. ファミリーを選ぶ

• 通常は1ファミリーで十分です。 本物のウェイトランジションを持つ優れたサンセリフ体は、ディスプレイ、見出し、本文、UIをカバーします。最初のファミリーでできない役割がある場合にのみ、2番目のファミリーを追加します。マーケティングページ用の個性的なディスプレイサンセリフ、コードとデータ用のモノスペースなどです。
• サンセリフのみ：セリフ体とイタリック体は使用しません。 見出し、本文、引用、キャプションはすべてサンセリフ体の直立で設定します。セリフ体のタイトルやイタリック体の行は、Webプロダクトではテンプレートの仮装のように見えるため、ブログ、ドキュメント、ラグジュアリーページでも両方とも避けます。トーンはウェイト、サイズ、スペーシングで伝えます。
• モノスペースを含めて、3ファミリーを超えてはなりません。 3つ目のテキストファミリーは優柔不断さを示します。
• 習慣ではなく、主題に合わせて選びます。 すべてのプロジェクトに同じ書体を使用しないでください。プロダクトの世界が印刷物やハードウェアでどのように見えるかを尋ね、そのキャラクターに合った書体を選んでください。

プロダクトの雰囲気	選ぶべき書体	無料の例
精密なツール（開発ツール、データ、インフラ）	タイトなグロテスク、データ用モノ	Geist、Switzer、Onest；Geist Mono、JetBrains Mono
落ち着いた金融・ヘルスケア（金融、保険、クリニック）	安定したネオグロテスクまたはヒューマニストサンセリフ	Inter、Public Sans、Source Sans 3
フレンドリーな消費者向け（ソーシャル、フード、旅行、教育）	より丸みを帯びたジオメトリックまたはヒューマニストサンセリフ	Plus Jakarta Sans、Figtree、Nunito Sans、DM Sans
自信に満ちたブランドやスタートアップのマーケティングページ	ディスプレイサイズで個性を発揮するサンセリフ	General Sans、Manrope、Bricolage Grotesque、Space Grotesk
読書と出版（ドキュメント、ブログ、雑誌）	真のテキストカットを持つ落ち着いたサンセリフ、同じファミリーのタイトなタイトル	Inter、Satoshi、Source Sans 3
ファッション、エディトリアル、ラグジュアリー	大きくタイトに設定された洗練されたディスプレイサンセリフ、タイトルのみ	Satoshi、General Sans、Clash Grotesk

• 書体が仕事をこなせるか確認します： 必要なウェイト（通常は400、500、600）、タビュラーフィギュア、適切な句読点、出荷する言語、複数のウェイトを使用する場合はバリアブルバージョン。

2. サイズではなく役割を定義する

テキストをその役割で名前付けます。コンポーネントは役割名を使用し、役割定義のみがピクセル値を保持します。7つの役割でほとんどのインターフェースをカバーします。

役割	使用箇所	マーケティングページ	アプリUI
display	ヒーローヘッドライン、1ページに1つ	48〜80px、ウェイト600、行高0.95〜1.05、トラッキング -0.03em〜-0.04em	ほとんど使用しない
title	ページおよびセクション見出し	32〜44px、ウェイト600、行高1.1、トラッキング -0.02em	20〜24px、ウェイト600、行高1.25、トラッキング -0.01em
heading	カード、パネル、サブセクション見出し	20〜24px、ウェイト600、行高1.25、トラッキング -0.01em	15〜16px、ウェイト600、行高1.4
body	段落	16〜18px、ウェイト400、行高1.55〜1.65	14〜15px、ウェイト400、行高1.5
label	ボタン、入力、ナビゲーション、テーブルヘッダー	14〜15px、ウェイト500、行高1.3	13〜14px、ウェイト500、行高1.3
caption	ヘルパーテキスト、メタデータ、タイムスタンプ	13〜14px、ウェイト400、行高1.45	12〜13px、ウェイト400、行高1.4
code	インラインコード、コードブロック、ID	周囲のテキストの0.9em、モノ	同様

スケールのルール：

• ステップは明らかに異なっている必要があります。 隣接する役割は、サイズで少なくとも約20%異なるか、サイズステップとウェイトステップの両方で異なります（14px 500のラベルが13px 400のキャプションの上にあるのは問題ありませんが、異なる役割を果たす15px 400と16px 400が隣接しているのは問題です）。
• 比率は役立ちますが、表が優先されます。 マーケティングページにはステップ間の比率1.25〜1.333が適しており、密度の高いアプリUIには1.125〜1.2が適しています。整数ピクセルに丸めます。
• 最大3つのウェイト： レギュラー(400)、ラベル用ミディアム(500)、見出しとディスプレイ用セミボールド(600)。階層はサイズ、色、スペースからも得られるため、5つのウェイトは必要ありません。大きなディスプレイ行で600が重すぎる場合は、4番目のウェイトを追加する代わりに、ディスプレイに500を使用します。
• マーケティングページのdisplayとtitleのみ、流動的サイズ： font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem)。本文とUIテキストは固定して、密度の高いレイアウトが予測可能になるようにします。
• 本文テキストの下限： マーケティングおよび読書ページでは16px、密度の高いアプリUIでは14px。入力テキストはモバイルで16pxにします。そうしないと、iOS Safariがフィールドにフォーカスが当たったときにページをズームします。

Tailwind CSS v4では、役割を一度だけ定義します（ファミリー名は選択したものに置き換えてください）。

@theme {
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.035em;
  --text-display--font-weight: 600;

  --text-title: 2.25rem;
  --text-title--line-height: 1.1;
  --text-title--letter-spacing: -0.02em;
  --text-title--font-weight: 600;

  --text-heading: 1.25rem;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.01em;
  --text-heading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.6;

  --text-label: 0.875rem;
  --text-label--line-height: 1.3;
  --text-label--font-weight: 500;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.45;
}

その後、マークアップでtext-[44px]やtext-4xl leading-tight tracking-tightの連鎖の代わりにtext-display、text-title、text-bodyを使用します。Tailwind v3では、同じ値をtheme.extend.fontSizeのもとに[size, { lineHeight, letterSpacing, fontWeight }]タプルとして配置します。

3. 行高と文字間隔

• 行高はサイズが大きくなるにつれて低くなります。 ディスプレイ0.95〜1.05、タイトル1.1〜1.2、本文1.5〜1.65、ラベル1.2〜1.35。64pxのヘッドラインを行高1.5で設定すると、バラバラの行になってしまいます。
• 大きなテキストにはタイトなトラッキング、本文にはなし。 ディスプレイ -0.03em〜-0.04em、タイトル -0.02em、見出し -0.01em、本文とラベルは0。-0.05emよりタイトにしないでください。文字が接触し始めます。選択した書体に合わせて目視で調整します。
• 小文字の本文およびインターフェーステキストに正のトラッキングは付けません。 正のトラッキングはオールキャップスのテキストにのみ役立ちます。オールキャップスのテキストは稀であるべきです（セクション6を参照）。
• 広い行はより多くのリーディングを必要とします。 本文テキストが75文字近くになる場合は、行高1.6以上を使用します。50文字の場合は、1.5で十分です。
• 暗い背景上の明るいテキストは、より重く、タイトに見えます。 ダークテーマでは、本文の行高に約0.05を追加します。

4. メジャーと改行

• 本文テキスト：1行あたり60〜75文字。 段落にはmax-width: 65chを設定します。ページ全体には設定しません。キャプションやヘルパーテキストはより狭くても構いません。
• ディスプレイヘッドライン：1行あたり約12〜20文字。 1440pxの画面を1行で横断するヘッドラインには形がありません。max-widthをchで、またはコンテナの幅で制約します。
• 見出しをバランスさせ、段落をプリティラップします。

h1, h2, h3, .text-display, .text-title { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

どちらもプログレッシブです。古いブラウザは無視します。balanceはヘッドラインの行を均等にします。prettyは段落の最終行に単一の単語が孤立するのを防ぎます。

• 手動改行はフレーズ間のみに使用し、テキストがレンダリングされるすべての幅で確認します。スマートフォンで行中に来てしまう<br>は、デフォルトの折り返しよりも悪い結果になります。<br>よりもmax-widthを優先します。
• ユーザーコンテンツ内の長い単語やURLは、そのコンテナにoverflow-wrap: anywhereが必要です。そうしないと、モバイルでレイアウトが横に押し出されます。
• 切り詰め（トランケーション）は最後の手段です。 タイトなUIの単一行ラベルを切り詰めます（Tailwindのtruncate）。隠れた部分が重要な場合は、キーボードとタッチで完全なテキストにアクセスできるようにします（フォーカス可能な要素のツールチップ、展開可能な行、詳細ビュー）。title属性だけでは不十分です。本文テキストや、ユーザーが行動するために読む必要のあるものを切り詰めないでください。
• 複数行のクランプ（line-clamp-2）：クランプされたテキストの行高を1.3以上に保ち、ディセンダー(g、y、p)が切り取られないようにします。クランプ内に下部パディングを追加しないでください。次の行の先頭が表示されてしまいます。

5. テキストの色とコントラスト

• 3つのテキスト色で十分です： プライマリ（見出しと本文）、セカンダリ（補助テキスト、キャプション、プレースホルダー）、無効。これらをトークンとして定義します。その場その場で不透明度を下げて4つ目の色を作らないでください。
• コントラストの下限（WCAG 2.2 AA）： 本文および小さなテキストは4.5:1、24px以上のテキスト（または18.66pxの太字）は3:1。セカンダリテキストとプレースホルダーテキストも4.5:1が必要です。無効なコントロール内のテキストのみが免除されます。
• 暗い背景では、長いテキストに純白ではなくオフホワイトを使用します（明度約90〜94%）。ほぼ黒に対する純白はぎらつきます。
• 色付きまたは色味を帯びたサーフェスでは、 セカンダリテキストをサーフェスの色相に近づけます。中立的なグレーを使用すると、色の上で汚く見えます。

6. 避けるべきこと

• アイブローとキッカー： 見出しの上の小さな大文字のレタースペースラベル（「FEATURES」、「WHY US」、「HOW IT WORKS」）。これらは使用しないでください。テンプレートUIの最も明確な兆候です。見出しに文脈が必要な場合は、より良い見出しを書いてください。
• 一般的なオールキャップスラベル。 サイドバー、設定パネル、カード、フッター、デモコントロールの小さなセクション見出しを含みます。文の大文字小文字の方が速く読めます。小さな見出しにはウェイト（500または600）とセカンダリテキスト色を与えてください。キャップスは本物の略語（API、URL）のために予約します。
• グラデーションテキストとヘッドライン内の1つの色付き単語。 強調はサイズ、ウェイト、配置から生まれます。ペイントからではありません。
• イタリック体、どこでも。 強調にはウェイトを使用し、引用はルールまたはその横の大きなサイズで直立に設定します。
• セリフ書体。 ディスプレイセリフとテキストセリフはどちらも、Webプロダクトでは仮装のように読まれます。代わりに個性のあるサンセリフを選んでください。
• 装飾としてのモノスペース。 モノはコード、データ、ID、キーボードキー、列内の数値のためのものです。マーケティングページのモノラベルは仮装です。
• 2行を超える中央揃えの段落。 短いヘッドラインと単一行のCTAのみを中央揃えにします。
• ウェブ上の両端揃えテキスト。 ハイフネーションなしでは、白いスペースの川を作り出します。
• リンク以外の下線。

7. 数字、コード、データ

• 整列または更新されるものすべてにタビュラーフィギュア： テーブル、価格、タイマー、カウンター、統計。 font-variant-numeric: tabular-nums;（Tailwind tabular-nums）。これがないと、カウントする数字が桁幅の変化に応じて横にジッターします。
• 0とOが混同される可能性があるIDとコードにはスラッシュゼロ： font-variant-numeric: tabular-nums slashed-zero;。
• テーブルセルの末尾に数字を揃えます（text-align: end）。小数点が揃います。テキスト列は先頭揃えにします。
• コード： 周囲のテキストの約0.9emのモノスペースで、xハイトが一致するようにします。インラインコードは控えめな背景と0.2emの水平パディングを取得します。境界線はありません。コードブロックは行高約1.6と水平スクロールを取得し、インデントを壊す折り返しは決して行いません。
• キーボードキー（<kbd>）は、キャプションサイズのモノ書体で。

8. リンク

ランニングテキスト内のリンクには下線を引きます。色だけでは色覚異常の読者には不十分です。ナビゲーションリストやボタンに下線が引かれないように、散文に範囲を限定します（.proseは記事や長文コンテンツをラップするものとします）。

:where(p, td, dd, figcaption, blockquote) a,
:where(.prose, article) li a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

ナビゲーション、ボタン、カードリンクには下線は必要ありません。その位置がすでにインタラクティブであることを示しています。

9. レイアウトシフトなしでフォントを読み込む

• Next.js： next/font（next/font/google または next/font/local）を使用します。これにより、フォントがセルフホストされ、プリロードされ、一致するメトリクスを持つフォールバックが生成されるため、フォントが到着したときにページがジャンプしません。CSS変数として公開し、@theme inlineでテーマフォントにマッピングします（これにより、変数は使用される場所で読み取られ、:rootで一度だけ解決されるわけではありません）。

// app/layout.tsx
import { Onest } from "next/font/google";
const sans = Onest({ subsets: ["latin"], variable: "--font-brand", display: "swap" });
// <html lang="en" className={sans.variable}>

@theme inline {
  --font-sans: var(--font-brand), ui-sans-serif, system-ui, sans-serif;
}

• オプティカルサイズ： opsz軸を持つ書体（Inter、Roboto Flex、Fraunces）は、読み込んだ場合にのみ取得されます。Inter({ subsets: ["latin"], axes: ["opsz"] })。font-optical-sizing: autoを維持して、小さなテキストが頑丈なカットを、大きなテキストがより繊細なカットを取得するようにします。
• その他の場合： WOFF2をセルフホストし、font-display: swap、アバブザフォールドで使用される1つまたは2つのファイルのみをプリロードし、ローカルフォールバック書体にsize-adjust、ascent-override、descent-overrideを設定して、スワップがレイアウトをシフトしないようにします。
• 使用するものだけを読み込みます。 6つの静的ウェイトよりも1つのバリアブルフォントファイルを優先します。出荷するスクリプトにサブセット化します。

10. レンダリングの詳細

• ダークテーマでは、-webkit-font-smoothing: antialiasedにより、macOSで明るいテキストが膨張して見えるのを防ぎます。ライトテーマはデフォルトのままにします。
• ::selectionをブランドの色合いに設定し、読みやすく保ちます。ブラウザのデフォルトの青は、ページが未完成であることを示すサインです。
• コピーには本物の句読点を使用します：引用符（“ ” ‘ ’）、省略記号（…）、寸法の乗算記号（×）。
• ユーザーの設定を尊重します。テキストサイズをremで設定し、ズームを決してブロックせず、200%のテキストサイズおよびより大きな文字間隔と行間でもテキストが収まることを確認します。

11. 完了前に確認する

• すべてのテキストスタイルは名前付き役割から来ています。無関係なピクセルサイズはありません。
• 隣接する役割はサイズ、またはサイズとウェイトで明確に異なります。
• 最大2ファミリーとモノ、最大3ウェイト、すべて読み込まれています。
• 本文テキストは16px（密度の高いUIは14px）、入力はモバイルで16px。
• 段落は約65chに制限されています。ディスプレイ行は約12〜20文字。
• 見出しはバランスされ、段落はプリティラップされています。
• アイブローなし、グラデーションテキストなし、色付き単語なし、イタリックなし、セリフなし。
• 数字はタビュラーフィギュア（テーブル、価格など）。コードは0.9emモノ、インラインコードは背景付き。
• ランニングテキストのリンクは下線付き、ナビゲーションやボタンは下線なし。
• フォントはレイアウトシフトなしで読み込まれます（Next.jsのnext/font、またはセルフホストされたWOFF2＋フォールバックオーバーライド）。
• ダークテーマのテキストはアンチエイリアス処理され、オフホワイト。選択はブランドカラー。
• ユーザー設定を尊重：rem単位、ズーム可能、200%テキストサイズでもフィット。