Typeset

いつ使うか

ページ上のテキストがデザインされたタイポグラフィではなく、デフォルトのタイポグラフィのように見える場合に /impeccable typeset を使ってください。階層が曖昧、3つのサイズが同じに見える、本文が14px、ディスプレイフォントが実はInter bold、見出しにカーニングの配慮がない。

典型的なトリガー：「階層が平坦に感じる」「可読性が悪い」「フォントが汎用的に見える」。

仕組み

スキルは5つの次元でタイポグラフィを評価します。

1. フォントの選択：見えないデフォルト（Inter、Roboto、Arial、Open Sans）を使っていないか、タイプフェイスはブランドに合っているか、ファミリーが2〜3を超えていないか。
2. 階層：見出し、本文、キャプションが一目で明確に異なっているか、ステップ間のサイズコントラストが少なくとも1.25倍あるか、ウェイトのコントラストが読み取れるか。
3. サイズとスケール：一貫したタイプスケールがあるか、本文テキストが16px以上を満たしているか、スケールがアプリUI向けなら固定rem、マーケティングページ向けなら流体clampか。
4. 可読性：行の長さが45〜75文字、フォントとコンテキストに合わせた行の高さ、コントラスト。
5. 一貫性：同じ要素がどこでも同じ扱い、使い捨てのfont-sizeオーバーライドなし。

その後、見つかった問題を修正します：特徴的なタイプフェイスを選び、モジュラースケールを構築し、階層のコントラストを広げ、適切な行の長さとリーディングを設定します。

試してみる

/impeccable typeset the article layout

期待される差分：

• ディスプレイフォントをInter 700から本物のディスプレイフェイスに変更
• タイプスケール再構築：3rem / 2rem / 1.25rem / 1rem / 0.875rem、比率1.333
• 本文テキストを14pxから16pxに引き上げ
• 記事カラムの行の長さを68chに制限
• 行の高さ：本文1.6、ディスプレイ1.1
• コンポーネントスタイルに散在する4つの使い捨てfont-size値を削除

注意点

• コンテキストなしで新しいフォントを求めること。 TypesetはPRODUCT.mdのブランドボイスに基づいて選びます。/impeccable teach を実行していない場合、提案は汎用的になります。
• 問題がレイアウトにあるのにタイポグラフィに頼ること。 段落は問題ないがページが窮屈に感じる場合、/impeccable layout が必要です。
• アプリUIで流体clampスケールを期待すること。 Typesetはアプリインターフェースに固定remスケールを使います。流体タイポグラフィは行の長さが劇的に変化するマーケティングやコンテンツページ向けです。