---
title: Typography
description: Fluid font-size, line-height, letter-spacing, and text-indent with the text, leading, tracking, and indent utilities.
sidebar:
  label: Typography
  order: 5
---

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).

```html
<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.

<Demo hint="Drag the corner to resize this container ->" resize>
  <p class="f6y-text-sm/3xl f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
    This text size ramps from small to large as you resize the container.
  </p>
</Demo>

```html
<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).

```html
<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).

:::warning
**Important:** Because the ratio multiplier scales from the min value, and min is 0em, the bare `f6y-tracking` is a **constant 0em, not a ramp**.
Note: 0em × any ratio is still 0em.
Use explicit values like `f6y-tracking-tighter/wider` or `f6y-tracking-[−0.05em]/[0.2em]` to create letter-spacing ramps.
:::

```html
<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).

```html
<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](/concepts/configuration).
Change the scale within a subtree by setting `f6y-lower-*` and `f6y-upper-*` on a container.