文字與排版
行高line-height
Setting the height of a line box.
Overview
| Class | Declarations |
|---|---|
leading:1 | line-height: 1;
|
leading:xs | line-height: var(--leading-xs);
|
leading:sm | line-height: var(--leading-sm);
|
leading:md | line-height: var(--leading-md);
|
leading:lg | line-height: var(--leading-lg);
|
leading:xl | line-height: var(--leading-xl);
|
leading:<size> | line-height: <size>;
|
Examples
Basic usage
Use the predefined line height tokens like leading:xs, leading:sm, and leading:lg to set the line height of an element.
leading:xs
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:sm
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:md
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:lg
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:xl
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
<div class="leading:xs">Design is not just about aesthetics—it’s...</div><div class="leading:sm">Design is not just about aesthetics—it’s...</div><div class="leading:md">Design is not just about aesthetics—it’s...</div><div class="leading:lg">Design is not just about aesthetics—it’s...</div><div class="leading:xl">Design is not just about aesthetics—it’s...</div>You can also use text:<size> to set a text size with a golden ratio line height.
Set line height with font size
Use leading:* with font:* when the type size and line height need to be tuned independently.
<p class="font:md leading:lg"> Comfortable paragraph text for longer reading.</p>Generated CSS
@layer theme { :root { --font-size-md: 1rem; --leading-lg: 1.8 }}@layer utilities { .font\:md { font-size: var(--font-size-md) } .leading\:lg { line-height: var(--leading-lg) }}Tighten display text
Use leading:1 or another compact value for large headings where default paragraph leading would create too much vertical space.
<h1 class="font:5xl leading:1">Launch faster</h1>Use explicit values
Use leading:* with a unitless number, length, or token depending on the typographic need.
<p class="leading:1.35">Measured line height</p>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="leading:sm leading:md@sm leading:lg@print">...</div>