Text
Text treatments that set font size, line height and letter spacing together.
On this page
Classes
| Class | Declarations |
|---|---|
text-<name> | font-size: var(--text-<name>);line-height: var(--text-<name>--line-height, normal);letter-spacing: var(--text-<name>--letter-spacing, normal); |
A primary --text-<name> token creates the class; its --line-height and --letter-spacing companions are optional and fall back to normal. Family, weight and color stay separate classes.
Values
Each row shows the three values read by one class. Preset sizes reference the matching font-size token; the table resolves that reference for reading. All preset treatments include both companions.
| Class | Size | Line height | Letter spacing |
|---|---|---|---|
text-3xs | .5rem8px | 1.5 | 0 |
text-2xs | .625rem10px | 1.5 | 0 |
text-xs | .75rem12px | 1.5 | 0 |
text-sm | .875rem14px | 1.5 | 0 |
text-md | 1rem16px | 1.6 | 0 |
text-lg | 1.125rem18px | 1.5 | 0 |
text-xl | 1.25rem20px | 1.4 | -.01em |
text-2xl | 1.5rem24px | 1.35 | -.015em |
text-3xl | 2rem32px | 1.25 | -.02em |
text-4xl | 2.25rem36px | 1.2 | -.025em |
text-5xl | 2.5rem40px | 1.15 | -.03em |
text-6xl | 3rem48px | 1.1 | -.035em |
text-7xl | 3.75rem60px | 1.05 | -.04em |
text-8xl | 4.5rem72px | 1.05 | -.04em |
text-9xl | 6rem96px | 1 | -.045em |
text-10xl | 8rem128px | 1 | -.05em |
Compare all text treatments
text-3xstext-2xstext-xstext-smtext-mdtext-lgtext-xltext-2xltext-3xltext-4xltext-5xltext-6xltext-7xltext-8xltext-9xltext-10xlOne primary token, three declarations
--text-card registers text-card. The class always emits font size, line height and letter spacing. If --text-card--line-height or --text-card--letter-spacing is absent, its declaration uses normal; it does not preserve an inherited value.
A text treatment always writes three properties
Only the primary --text-card token is defined here. Both companion declarations still exist and use normal, replacing any inherited line height or letter spacing.
Text description
- The custom theme defines --text-card as 1.5rem and defines neither companion.
- text-card emits font-size: var(--text-card), line-height: var(--text-card--line-height, normal) and letter-spacing: var(--text-card--letter-spacing, normal).
- All three solid branches represent emitted declarations. The absent companions use their normal fallback rather than inheriting another line height or letter spacing.
- A companion on its own does not register text-card. Family, weight and color are outside this recipe.
A companion alone does not register a treatment. Add the primary size token even when the only value you want to customize is its line height or letter spacing.
A companion is a value used by this recipe, not another class name. Independent adjustments use font-<size>, leading-<name> or tracking-<name>. Under the same conditions, these single-property utilities sort after the text recipe and can override its corresponding declaration; their order in the class attribute does not decide the result.
The recipe does not load a font, select its family or weight, add margins or decide the width of a paragraph. Typography Guide owns choosing and combining treatments into a hierarchy.
See Font and Leading and Tracking and generated rule order.
Usage
Apply one treatment to a paragraph; its family, weight and color remain independent.
A paragraph keeps its size, line height and letter spacing together. Its container can grow when the same text wraps onto another line.
<p class="… text-lg">A paragraph keeps its size,…</p>Generated CSS
@layer theme { :root, :host { --font-size-lg: 1.125rem; --text-lg: var(--font-size-lg); --text-lg--line-height: 1.5; --text-lg--letter-spacing: 0 }}@layer utilities { .text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height, normal); letter-spacing: var(--text-lg--letter-spacing, normal) }}Customize
Add a treatment with its companions: --text-display creates text-display.
@theme { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em;}Generated CSS
@layer theme { :root, :host { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em }}@layer utilities { .text-display { font-size: var(--text-display); line-height: var(--text-display--line-height, normal); letter-spacing: var(--text-display--letter-spacing, normal) }}See theme directives and Typography.