タイポグラフィ

CSS

フォント、テキスト、行間の設定

フォントプロパティ

font-family、font-size、font-weight など

body {
    /* フォントファミリー（フォールバックリスト） */
    font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;

    /* サイズ */
    font-size: 16px;    /* 絶対値 */
    font-size: 1rem;    /* ルートのfont-sizeの倍数（推奨） */
    font-size: 1.125em; /* 親の倍数 */
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* 最小・推奨・最大 */

    /* 太さ */
    font-weight: normal; /* = 400 */
    font-weight: bold;   /* = 700 */
    font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

    /* スタイル */
    font-style: normal | italic | oblique;

    /* 短縮形 */
    font: italic bold 1rem/1.6 'Noto Sans JP', sans-serif;
    /*       style weight size/line-height  family */
}

テキストプロパティ

line-height、letter-spacing、text-align など

p {
    /* 行間 */
    line-height: 1.6;     /* 単位なし推奨（font-sizeの1.6倍） */
    line-height: 1.8;     /* 日本語は1.7〜1.9が読みやすい */

    /* 文字間隔 */
    letter-spacing: 0.05em;
    word-spacing: 0.1em;

    /* 揃え */
    text-align: left | center | right | justify;

    /* インデント */
    text-indent: 1em;

    /* 装飾 */
    text-decoration: none;
    text-decoration: underline dotted red;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px; /* 下線の位置調整 */

    /* 変換 */
    text-transform: uppercase | lowercase | capitalize;

    /* 折り返し */
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;

    /* 縦書き（日本語） */
    writing-mode: vertical-rl;
}

Webフォント

@font-face と Google Fonts の使い方

/* Google Fonts（@import） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* @font-face（自前ホスティング）*/
@font-face {
    font-family: 'MyFont';
    src: url('/fonts/myfont.woff2') format('woff2'),
         url('/fonts/myfont.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* テキストを即時表示 */
}

/* 可変フォント */
@font-face {
    font-family: 'MyVariable';
    src: url('/fonts/variable.woff2') format('woff2-variations');
    font-weight: 100 900; /* 範囲指定 */
}

.variable-heading {
    font-family: 'MyVariable', sans-serif;
    font-variation-settings: 'wght' 650, 'wdth' 90;
}

ボックスモデル

色と背景