タイポグラフィは font-* と text-* プロパティのファミリーによって制御されます。これらを正しく設定することは、ページをポーランド風で読みやすくするための大部分です。
css
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
ブラウザは利用可能なものが見つかるまで順番に各フォントを試します。カスタムフォントが失敗した場合でもテキストがレンダリングされるように、常に汎用ファミリー(sans-serif、serif、monospace)で終了してください。system-ui はオペレーティングシステムのネイティブフォントを使用します(高速、ダウンロードなし)。
.text {
text-align: center; /* left | right | center | justify */
text-decoration: underline;/* underline | line-through | none */
text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
white-space: nowrap; /* prevent wrapping */
word-break: break-word; /* break long words/URLs */
}
line-height: 1.5; /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px; /* ⚠️ fixed — doesn't adapt if font-size changes */
単位のない line-height は各要素の独自の font-size を乗算するため、ネストされた要素が異なるサイズを持つ場合でも比例したままになります — 推奨されるアプローチです。
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
テキストプロパティは可読性と視覚的階層を駆動します — 強調のための font-size/weight、快適な読み取りのための line-height(~1.5)、信頼性のためのフォールバックスタック、およびクリーンな切り詰めのための text-overflow。
良いタイポグラフィは見栄えの良いUIの大部分です。