26. 行高与字间距

本节目标：理解行高和字间距对可读性的影响，学会根据字号和内容类型选择合适的 leading 和 tracking 值。

行高和字间距是排版中最容易被忽略、但影响最大的两个属性。它们不改变文字本身，却决定了阅读体验。

line-height：行高

Tailwind 用 leading-{value} 控制行高。行高值是无单位的倍数或固定 rem 值：

类名	行高	适用场景
`leading-none`	1	单行标题、标签
`leading-tight`	1.25	大标题
`leading-snug`	1.375	小标题、短文本
`leading-normal`	1.5	正文（默认）
`leading-relaxed`	1.625	长篇文章
`leading-loose`	2	宽松阅读、引用

<!-- 大标题：紧凑行高 -->
<h1 class="text-4xl leading-tight">标题不需要太大行距</h1>

<!-- 正文：标准行高 -->
<p class="text-base leading-relaxed">
  长篇文章用稍大的行高，阅读更舒适...
</p>

<!-- 标签：无行高 -->
<span class="text-xs leading-none bg-blue-100 px-2 py-1">标签</span>

行高的选择原则

行高不是越大越好，也不是越小越好：

字号越大，行高可以越小。大标题用 leading-tight 或 leading-none，因为字号本身已经够醒目，不需要额外行距来「呼吸」。
字号越小，行高需要越大。小字用 leading-relaxed 或更大，否则行与行挤在一起很难读。
长文阅读用较大行高。正文段落用 leading-relaxed（1.625），让读者眼睛更容易从一行跳到下一行。
短文本/标题用紧凑行高。导航项、按钮文字用 leading-none 或 leading-tight，节省空间。

Tip

Tailwind 的 text-{size} 类已经绑定了合理的行高。比如 text-base 默认 leading-1.5，text-2xl 默认 leading-2。大多数情况下你不需要额外调整。

letter-spacing：字间距

Tailwind 用 tracking-{value} 控制字间距（字母间距）：

类名	字间距	适用场景
`tracking-tighter`	-0.05em	超大标题
`tracking-tight`	-0.025em	大标题
`tracking-normal`	0	正文（默认）
`tracking-wide`	0.025em	小号文字、标签
`tracking-wider`	0.05em	徽章、大写文字
`tracking-widest`	0.1em	全大写标签

<!-- 大标题：稍微收紧 -->
<h1 class="text-5xl tracking-tighter">紧凑的大标题</h1>

<!-- 大写标签：加宽 -->
<span class="text-xs uppercase tracking-widest">NEW</span>

<!-- 正文：默认 -->
<p class="tracking-normal">正常字间距的正文</p>

字间距的使用技巧

大标题收紧。字号超过 36px 时，默认字间距会显得松散，用 tracking-tight 收紧一点更精致。
大写文字加宽。全大写英文文字默认间距不够，加 tracking-wide 或 tracking-wider 才有「设计感」。
小号文字加宽。12px 以下的文字，稍微加宽字间距可以提高可读性。
中文一般不调字间距。中文字符是等宽的，默认间距已经合适。强行加宽反而显得奇怪。

Note

tracking 对中文的影响跟英文不同。中文字符间距通常由字体本身控制，tracking 的效果不如英文明显。如果你的项目以中文为主，字间距不用太纠结。

行高和字号的配合

Tailwind 的字号类已经内置了行高，但你可以覆盖：

<!-- text-lg 默认 leading-1.75，但这里覆盖为更紧凑的 -->
<p class="text-lg leading-snug">大字号但紧凑行高</p>

什么时候需要覆盖？

标题换行时觉得行距太大 → 用更小的 leading
正文觉得行距不够 → 用更大的 leading
单行元素（按钮、标签）→ 用 leading-none

实际应用：文章正文

<article class="max-w-2xl mx-auto">
  <h1 class="text-3xl font-bold leading-tight mb-4">
    文章标题
  </h1>
  <p class="text-lg leading-relaxed text-gray-700 mb-4">
    文章开头段落，用稍大的字号和行高引导读者进入阅读...
  </p>
  <p class="text-base leading-relaxed text-gray-700 mb-4">
    正文段落，标准字号配合宽松行高，确保长时间阅读的舒适度...
  </p>
  <blockquote class="border-l-4 border-blue-500 pl-4 my-6">
    <p class="text-lg italic leading-relaxed text-gray-600">
      引用文字，用斜体和宽松行高与正文区分...
    </p>
  </blockquote>
</article>

实际应用：卡片内容

<div class="p-6 bg-white rounded-lg shadow">
  <h3 class="text-lg font-semibold leading-snug mb-2">
    卡片标题
  </h3>
  <p class="text-sm leading-relaxed text-gray-600">
    卡片描述文字，小字号配合稍大的行高...
  </p>
  <div class="mt-4 flex items-center gap-2">
    <span class="text-xs font-medium tracking-wide text-blue-600">
      标签
    </span>
  </div>
</div>

自定义行高和字间距

v4 中通过 @theme 添加自定义值：

@theme {
  --leading-tight: 1.2;
  --tracking-super-wide: 0.2em;
}

也可以用方括号语法直接用任意值：

<p class="leading-[1.8]">自定义行高 1.8</p>
<p class="tracking-[0.15em]">自定义字间距</p>

本节小结

leading-none 到 leading-loose → 行高控制
tracking-tighter 到 tracking-widest → 字间距控制
大标题：紧凑行高 + 收紧字间距
正文：宽松行高 + 默认字间距
大写标签：加宽字间距
中文一般不需要调字间距