Typography

Fluid font-size, line-height, letter-spacing, and text-indent with the text, leading, tracking, and indent utilities.

The Typography group ramps font properties independently, each with its own value kind. Every utility ships in linear, exp-, and log- variants and works with all Tailwind variants (md:, hover:, dark:, etc.).

text: Font-size

Maps to font-size using the fontSize kind, which accepts --text-* theme keys or arbitrary values. Bare f6y-text defaults to var(--text-base) (1rem).

<div class="f6y-text-sm/3xl">Font-size ramps from 0.875rem to 1.875rem.</div>
<div class="f6y-text-[1rem]/[3rem]">Arbitrary values work too.</div>
<div class="f6y-text-sm">Max omitted: max = min × ratio (default 2×), so 1.75rem.</div>
<div class="f6y-text">Bare: uses default (1rem) as min, default × 2 as max.</div>

See the demo below: a paragraph’s font-size grows as its container widens. Open this page on a narrower viewport and resize the demo box to see the full range.

<div class="@container">
  <p class="f6y-text-sm/3xl f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
    Font-size ramps from 0.875rem to 1.875rem within this container.
  </p>
</div>

leading: Line-height

Maps to line-height using the leading kind, which accepts spacing-scale numbers, --leading-* theme keys, or arbitrary values. Bare f6y-leading defaults to --spacing(6) (1.5rem).

<div class="f6y-leading-4/8">Line-height ramps from 1rem to 2rem.</div>
<div class="f6y-leading-tight/loose">Theme keys: maps to --leading-* and spacing scale.</div>
<div class="f6y-leading-[1.5rem]/[2rem]">Arbitrary lengths work.</div>
<div class="f6y-leading">Bare: uses 1.5rem as min, 3rem as max.</div>

tracking: Letter-spacing

Maps to letter-spacing using the tracking kind, which accepts --tracking-* theme keys or arbitrary values. Bare f6y-tracking defaults to var(--tracking-normal) (0em).

<div class="f6y-tracking-tight/wide">Letter-spacing ramps from −0.05em to 0.2em.</div>
<div class="f6y-tracking-[-0.05em]/[0.2em]">Arbitrary values work too.</div>
<div class="f6y-tracking">Bare: constant 0em (0 × ratio = 0), not a ramp.</div>

indent: Text-indent

Maps to text-indent using the spacing kind, which accepts spacing-scale numbers or arbitrary values. Bare f6y-indent defaults to --spacing(4) (1rem).

<div class="f6y-indent-2/8">Text-indent ramps from 0.5rem to 2rem.</div>
<div class="f6y-indent-[0.5rem]/[2rem]">Arbitrary values work.</div>
<div class="f6y-indent">Bare: uses 1rem as min, 2rem as max.</div>

Each typography utility inherits its axis and bounds from parent configuration utilities. Change the scale within a subtree by setting f6y-lower-* and f6y-upper-* on a container.