{
  "id": "line-height",
  "type": "foundation",
  "status": "published",
  "name": {
    "zh": "行高",
    "en": "Line Height"
  },
  "aliases": [
    "行高",
    "行距",
    "leading",
    "行间距",
    "排得挤不挤",
    "松紧",
    "line height"
  ],
  "category": [
    "Typography",
    "Foundation"
  ],
  "description": {
    "zh": "一行文字占的垂直空间，决定段落的松紧与呼吸。标题收紧（1.1～1.3）显得挺拔，正文放宽（1.5～1.8）利于逐行阅读，引文可以更松。优先用无单位倍数，让行高随字号缩放，而不是写死像素值。",
    "en": "The vertical space one line of text occupies — it sets how tight or airy a paragraph feels. Display type tightens (1.1–1.3) to look built; body loosens (1.5–1.8) to support line-by-line reading; quotes can go looser still. Prefer unitless multiples so leading scales with font size instead of freezing in pixels."
  },
  "use_when": [
    {
      "zh": "长段落正文需要可逐行追踪的阅读节奏",
      "en": "Multi-line body copy needs a trackable reading rhythm"
    },
    {
      "zh": "标题与正文混排，需要通过行高拉开层级",
      "en": "Headings and body share a page and leading must separate them"
    },
    {
      "zh": "字号会响应式变化，行高必须跟着缩放",
      "en": "Font sizes respond to viewport and leading must scale with them"
    }
  ],
  "avoid_when": [
    {
      "zh": "单行标签、按钮文字——行高只用来垂直居中时改用 flex",
      "en": "Single-line labels — use flex for vertical centring, not leading"
    },
    {
      "zh": "行高设得过松（> 2.0 正文），行与行失去联系",
      "en": "Body leading beyond 2.0 — lines lose their connection"
    },
    {
      "zh": "用 px 锁死行高，字号一变就出现裁切或重叠",
      "en": "Pixel-locked leading that clips or overlaps when size changes"
    }
  ],
  "tags": [
    "typography",
    "foundation",
    "leading",
    "readability"
  ],
  "api": [
    "line-height",
    "leading"
  ],
  "framework_names": [
    {
      "framework": "CSS",
      "name": "line-height",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"
    },
    {
      "framework": "Tailwind CSS",
      "name": "leading-none / leading-normal / leading-relaxed",
      "url": "https://tailwindcss.com/docs/line-height"
    }
  ],
  "variants": [
    {
      "id": "tight",
      "name": {
        "zh": "收紧显示",
        "en": "Tight display"
      },
      "note": {
        "zh": "1.1～1.3，大标题挺拔不散",
        "en": "1.1–1.3 — large headings stay solid"
      }
    },
    {
      "id": "comfortable",
      "name": {
        "zh": "舒适正文",
        "en": "Comfortable body"
      },
      "note": {
        "zh": "1.5～1.8，长文逐行好跟",
        "en": "1.5–1.8 — long copy stays trackable"
      }
    },
    {
      "id": "loose",
      "name": {
        "zh": "松弛编辑",
        "en": "Loose editorial"
      },
      "note": {
        "zh": "1.9～2.2，引文与短诗留呼吸",
        "en": "1.9–2.2 — quotes and verse breathe"
      }
    }
  ],
  "anatomy": [
    "行盒（Line box）",
    "行间距（Leading）",
    "段落节奏（Paragraph rhythm）"
  ],
  "related": [
    {
      "id": "type-scale",
      "relation": "used_with"
    },
    {
      "id": "measure",
      "relation": "used_with"
    },
    {
      "id": "font-stack",
      "relation": "used_with"
    }
  ],
  "demo": {
    "component": "line-height",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "compare": {
    "group": "typography-trio",
    "dimensions": {
      "适用文本": {
        "zh": "段落正文为主，标题单独收紧",
        "en": "Body paragraphs mainly; display tightens separately"
      },
      "调节粒度": {
        "zh": "连续微调，0.05 即可感知",
        "en": "Continuous — 0.05 is already perceptible"
      },
      "响应式": {
        "zh": "中，可按断点切换两档",
        "en": "Medium — two steps across breakpoints"
      }
    }
  },
  "sources": [
    {
      "name": "MDN — line-height",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"
    },
    {
      "name": "Practical Typography — Line spacing",
      "url": "https://practicaltypography.com/line-spacing.html"
    }
  ],
  "implementation": {
    "css": [
      "line-height: 1.6",
      "line-height: normal",
      "leading-relaxed"
    ],
    "notes": {
      "zh": "行高写无单位倍数（line-height: 1.6），继承时按自身字号换算；写 px 会把子元素行高锁死在父级字号上。经验值：标题 1.15～1.3、正文 1.6～1.75、辅助文字 1.4。中文正文比英文略松（1.7 上下）更耐读。用 ex / 半 leading 技巧做首行基线对齐时要单独验证。",
      "en": "Set unitless multiples (line-height: 1.6) so children recompute against their own size; pixels freeze leading on the parent size. Starting points: display 1.15–1.3, body 1.6–1.75, captions 1.4. CJK body reads a touch looser than Latin — around 1.7. Verify separately if you use half-leading tricks for first-baseline alignment."
    }
  },
  "prompts": {
    "basic": {
      "zh": "统一项目的行高体系：标题、正文、辅助文字分别给出合适的 line-height。",
      "en": "Define the project's leading system — line-height for display, body and captions."
    },
    "design": {
      "zh": "行高规范：大标题 1.15，小标题 1.3，正文 1.65，辅助文字 1.4；全部使用无单位倍数；中文长文正文放宽到 1.7；段间距不小于 0.75em；行高与字号阶梯成对交付，不允许单独调整其一。",
      "en": "Leading spec: display 1.15, subhead 1.3, body 1.65, caption 1.4 — all unitless. CJK long-form body loosens to 1.7. Paragraph spacing at least 0.75em. Deliver leading together with the type scale; never tune one without the other."
    },
    "implementation": {
      "zh": "用 CSS 变量配对字号阶梯定义行高：--leading-tight: 1.2; --leading-body: 1.65; --leading-loose: 1.9。正文 class 组合 font-size: var(--text-base); line-height: var(--leading-body)。Tailwind 侧映射到 leading-* 令牌。禁止在组件里写 line-height: 24px。",
      "en": "Pair leading variables with the type scale: --leading-tight: 1.2; --leading-body: 1.65; --leading-loose: 1.9. Body classes combine font-size: var(--text-base) with line-height: var(--leading-body). Map to Tailwind leading-* tokens. Never write line-height: 24px inside a component."
    },
    "agent": {
      "zh": "在当前项目中实现行高。\n先检查现有组件体系和 Design Token，优先复用当前组件。\n要求：\n- 标题 / 正文 / 辅助三级无单位行高令牌\n- 与字号阶梯成对引用，禁止写死 px 行高\n- 中文正文适当放宽\n保持现有项目视觉风格。不要新增不必要依赖。\n尊重 prefers-reduced-motion。\n完成后运行项目现有检查，并列出修改的文件。",
      "en": "Implement line height in the current project.\nInspect the existing component system and design tokens first; reuse what is already there.\nRequirements:\n- Three unitless leading tokens for display / body / caption\n- Referenced together with the type scale; no pixel-locked leading\n- CJK body copy set slightly looser\nKeep the project's existing visual style. Do not add unnecessary dependencies.\nRespect prefers-reduced-motion.\nRun existing project checks when done and list the modified files."
    }
  }
}