語法
文字大小text-size
Style utility for setting optimally proportioned font size, line height and letter spacing all at once.
Overview
| Class | Declarations |
|---|---|
text:3xs | font-size: 0.5rem;
line-height: max(1.8em - max(0rem, 0.5rem - 1rem) * 1.12, 0.5rem);
letter-spacing: clamp(-0.072em, calc((0.5rem - 1rem) * -0.048), 0em);
|
text:2xs | font-size: 0.625rem;
line-height: max(1.8em - max(0rem, 0.625rem - 1rem) * 1.12, 0.625rem);
letter-spacing: clamp(-0.072em, calc((0.625rem - 1rem) * -0.048), 0em);
|
text:xs | font-size: 0.75rem;
line-height: max(1.8em - max(0rem, 0.75rem - 1rem) * 1.12, 0.75rem);
letter-spacing: clamp(-0.072em, calc((0.75rem - 1rem) * -0.048), 0em);
|
text:sm | font-size: 0.875rem;
line-height: max(1.8em - max(0rem, 0.875rem - 1rem) * 1.12, 0.875rem);
letter-spacing: clamp(-0.072em, calc((0.875rem - 1rem) * -0.048), 0em);
|
text:md | font-size: 1rem;
line-height: max(1.8em - max(0rem, 1rem - 1rem) * 1.12, 1rem);
letter-spacing: clamp(-0.072em, calc((1rem - 1rem) * -0.048), 0em);
|
text:lg | font-size: 1.125rem;
line-height: max(1.8em - max(0rem, 1.125rem - 1rem) * 1.12, 1.125rem);
letter-spacing: clamp(-0.072em, calc((1.125rem - 1rem) * -0.048), 0em);
|
text:xl | font-size: 1.25rem;
line-height: max(1.8em - max(0rem, 1.25rem - 1rem) * 1.12, 1.25rem);
letter-spacing: clamp(-0.072em, calc((1.25rem - 1rem) * -0.048), 0em);
|
text:2xl | font-size: 1.5rem;
line-height: max(1.8em - max(0rem, 1.5rem - 1rem) * 1.12, 1.5rem);
letter-spacing: clamp(-0.072em, calc((1.5rem - 1rem) * -0.048), 0em);
|
text:3xl | font-size: 2rem;
line-height: max(1.8em - max(0rem, 2rem - 1rem) * 1.12, 2rem);
letter-spacing: clamp(-0.072em, calc((2rem - 1rem) * -0.048), 0em);
|
text:4xl | font-size: 2.25rem;
line-height: max(1.8em - max(0rem, 2.25rem - 1rem) * 1.12, 2.25rem);
letter-spacing: clamp(-0.072em, calc((2.25rem - 1rem) * -0.048), 0em);
|
text:5xl | font-size: 2.5rem;
line-height: max(1.8em - max(0rem, 2.5rem - 1rem) * 1.12, 2.5rem);
letter-spacing: clamp(-0.072em, calc((2.5rem - 1rem) * -0.048), 0em);
|
text:6xl | font-size: 3rem;
line-height: max(1.8em - max(0rem, 3rem - 1rem) * 1.12, 3rem);
letter-spacing: clamp(-0.072em, calc((3rem - 1rem) * -0.048), 0em);
|
text:7xl | font-size: 3.75rem;
line-height: max(1.8em - max(0rem, 3.75rem - 1rem) * 1.12, 3.75rem);
letter-spacing: clamp(-0.072em, calc((3.75rem - 1rem) * -0.048), 0em);
|
text:8xl | font-size: 4.5rem;
line-height: max(1.8em - max(0rem, 4.5rem - 1rem) * 1.12, 4.5rem);
letter-spacing: clamp(-0.072em, calc((4.5rem - 1rem) * -0.048), 0em);
|
text:9xl | font-size: 6rem;
line-height: max(1.8em - max(0rem, 6rem - 1rem) * 1.12, 6rem);
letter-spacing: clamp(-0.072em, calc((6rem - 1rem) * -0.048), 0em);
|
text:10xl | font-size: 8rem;
line-height: max(1.8em - max(0rem, 8rem - 1rem) * 1.12, 8rem);
letter-spacing: clamp(-0.072em, calc((8rem - 1rem) * -0.048), 0em);
|
text:<size> | font-size: <size>/16rem;
line-height: max(1.8em - max(0rem, <size>/16rem - 1rem) * 1.12, <size>/16rem);
letter-spacing: clamp(-0.072em, calc((<size>/16rem - 1rem) * -0.048), 0em);
|
Examples
Body text
Use tokens like text:sm, text:md, and text:lg to style body text, descriptions, and paragraphs.
text:sm
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
text:md
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
text:lg
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
<p class="text:sm">Design is not just about aesthetics—it’s...</p><p class="text:md">Design is not just about aesthetics—it’s...</p><p class="text:lg">Design is not just about aesthetics—it’s...</p>If you don’t want to include line height, use the font:<size>.
Headings
Use tokens like text:lg, text:xl, and text:2xl to style article headings.
text:2xl
heading 2
Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.
text:xl
heading 3
Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.
text:lg
heading 4
Shifting Dimensions Unfold Gently Beneath Layers of Balanced Design.
<h2 class="text:2xl">Design is not just about aesthetics—it’s...</h2><h3 class="text:xl">Design is not just about aesthetics—it’s...</h3><h4 class="text:lg">Design is not just about aesthetics—it’s...</h4>Page titles, hero sections
Use tokens like text:3xl and text:4xl to style page titles and hero sections.
text:4xl
Designing for clarity and consistency across every platform.
text:3xl
Designing for clarity and consistency across every platform.
<h1 class="text:4xl">Designing for clarity and consistency...</h1><h1 class="text:3xl">Designing for clarity and consistency...</h1>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="text:40:hover text:40@sm text:40@dark text:40@print">…</div>