このサイトはもともと Bear Blog 系の CSS をベースにしていて、本文を 18px〜20px としつつ見出しを em のモジュラースケールで切っていました。欧文向けのバランスはよくても、本文を日本語にしたときに見出しだけ物理ピクセルが大きくなりすぎる感じがあったので、デジタル庁デザインシステムのタイポグラフィ概要（以下 DADS）の 読み物向け（Standard 系） を参考に、global.css 中心に整理しました。
方針
- 本文は 16〜17px 付近を基準にし、読み物の行間はこれまで通り 1.7（DADS が本文で挙げる目安と整合しやすい値）を維持。
- 見出しは
bodyに対するem連鎖をやめ、htmlのfont-size: 100%を前提に rem と CSS 変数で段階を固定。 - 記事タイトルだけは
BlogPost.astro側のh1.article-titleにclamp(1.75rem, 2.5vw, 2rem)を当て、ヒーロー級の巨大さを避ける。 - **記事プローズ内（Markdown）**の
h1〜h6は.prose用に別段階（例: プローズ内h1は1.5rem）を定義し、テンプレのタイトルと二重にスケールが爆発しないようにした。 - リンクは色だけに頼らないよう 下線と
focus-visibleのアウトラインを付与。ヘッダーナビは従来どおりHeaderLink側で下線なし。 code/preは 等幅スタックとpreのline-height: 1.5。- 引用は本文より無理に大きくしないよう、
blockquoteのfont-sizeを1emに戻した。
フォントは引き続き Atkinson を載せつつ、和文向けに ヒラギノ・游ゴシック・メイリオなどをフォールバックに追加しているだけで、DADS が採用している Noto Sans JP を Web フォントで読み込むところまでは踏み込んでいません。
触ったファイル
| 場所 | 内容 |
|---|---|
src/styles/global.css | タイポ用の :root 変数、本文・見出し・.prose・a・code/pre・blockquote |
src/layouts/BlogPost.astro | lang="ja"、h1.article-title、タイトル周りの行間、タグの最小フォントなど |
src/pages/blog/index.astro | 一覧の先頭タイトル・タグのサイズ（16px 未満を避ける方向） |
src/components/ThemeToggle.astro | ボタンラベルのフォントサイズ |
src/pages/colors.astro | 極小だったラベルを 14px 相当に |
最終的なフォントサイズ（整理後）
基準は html { font-size: 100%; }（通常 16px）とみなしたときの rem → px の目安です。実装は src/styles/global.css と記事レイアウト周りの Astro です。
本文・行間
| 対象 | rem | 目安（px） | 備考 |
|---|---|---|---|
body（通常幅） | 1.0625rem | 17px | --text-body |
body（幅 720px 以下） | 1rem | 16px | --text-body-narrow |
| 段落・引用の行間 | — | — | line-height: 1.7（--leading-body） |
サイト全体の見出し（記事タイトル・.prose 以外）
| 要素 | rem | 目安（px） |
|---|---|---|
h1 | 2rem | 32px |
h2 | 1.5rem | 24px |
h3 | 1.25rem | 20px |
h4 | 1.125rem | 18px |
h5 | 1.0625rem | 17px |
h6 | 1rem | 16px |
見出し共通: line-height: 1.45（--leading-heading）、letter-spacing: 0.02em（--tracking-heading）。
記事ページ（BlogPost.astro + .prose）
| 対象 | rem など | 目安（px） | 備考 |
|---|---|---|---|
記事タイトル h1.article-title | clamp(1.75rem, 2.5vw, 2rem) | 約 28〜32 | ビューポートに追従 |
タイトル周りのタグ .tag | 1rem | 16px | 日付は本文に追従 |
.prose h1 | 1.5rem | 24px | テンプレタイトルより一段小さく固定 |
.prose h2 | 1.375rem | 22px | |
.prose h3 | 1.25rem | 20px | |
.prose h4 | 1.125rem | 18px | |
.prose h5 | 1.0625rem | 17px | |
.prose h6 | 1rem | 16px |
インライン／ブロック
| 対象 | 指定 | 目安 |
|---|---|---|
code | 0.925em | 親フォントに対して相対（本文 17px 時は約 15.7px） |
pre | 0.9375rem + line-height: 1.5 | 15px 前後 |
blockquote | font-size: 1em | 本文と同じ段階 |
記事内のカスタム HTML（トークン名など）で .token-swatch__name を使っている場合は 0.875rem（14px）。
ブログ一覧（参考）
| 対象 | rem など | 目安（px） |
|---|---|---|
| 先頭記事のタイトル | clamp(1.375rem, 3vw, 1.875rem) | 約 22〜30（狭い画面では 1.375rem = 22px に固定） |
| 2件目以降のタイトル | 通常の h4 | 1.125rem → 18px |
| 一覧のタグ | 1rem | 16px |
ビルド
npm run build で Content Collections と静的生成が通ることを確認しています。
公開 URL: /blog/2026-04-09（本番の site に応じてドメインを付与）。