---
title: "Auto line height"
description: "Set a font size and a matching line height in one class with autotext-*, the line height tightening as the text grows."
url: https://docs.systhema.app/next/styling/auto-line-height
version: unreleased (main)
docs_index: https://docs.systhema.app/next/llms.txt
---

`autotext-*` sets a font size and a line height derived from it in one class. Small text gets loose leading for reading, large text gets tight leading for display: the line height is 2 up to 14px and falls toward 1 as the size grows.

## Quick reference

<!-- generated:utilities auto-line-height -->

| Class           | Styles                                       |
| --------------- | -------------------------------------------- |
| `autotext-2xl`  | `font-size: 24px;`<br>`line-height: 1.925;`  |
| `autotext-3xl`  | `font-size: 30px;`<br>`line-height: 1.825;`  |
| `autotext-4xl`  | `font-size: 36px;`<br>`line-height: 1.708;`  |
| `autotext-5xl`  | `font-size: 48px;`<br>`line-height: 1.482;`  |
| `autotext-6xl`  | `font-size: 60px;`<br>`line-height: 1.31;`   |
| `autotext-7xl`  | `font-size: 72px;`<br>`line-height: 1.195;`  |
| `autotext-8xl`  | `font-size: 96px;`<br>`line-height: 1.075;`  |
| `autotext-9xl`  | `font-size: 128px;`<br>`line-height: 1.021;` |
| `autotext-base` | `font-size: 16px;`<br>`line-height: 1.997;`  |
| `autotext-lg`   | `font-size: 18px;`<br>`line-height: 1.987;`  |
| `autotext-sm`   | `font-size: 14px;`<br>`line-height: 2;`      |
| `autotext-xl`   | `font-size: 20px;`<br>`line-height: 1.972;`  |
| `autotext-xs`   | `font-size: 12px;`<br>`line-height: 2;`      |

<!-- /generated -->

## Basic usage

Use `autotext-{size}` with a size from Tailwind's font-size scale (`xs` to `9xl`, in pixels in Systhema). It is meant for text that is not one of your token [text styles](https://docs.systhema.app/next/styling/typography.md), such as a display number, a pull quote or a caption.

```tsx preview title="autotext-5xl"
export default function Demo() {
  return (
    <div className="autotext-5xl color-heading max-w-[520px] font-bold">
      Fewer decisions, more consistent pages
    </div>
  )
}
```

### Comparing sizes

The same two-line text at five sizes. The tinted box is the line box, so you can see the leading shrink relative to the glyphs as the size grows.

```tsx preview title="Line height by size"
const sizes = ['autotext-sm', 'autotext-lg', 'autotext-2xl', 'autotext-4xl', 'autotext-6xl']

export default function Demo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {sizes.map((size) => (
        <div key={size} className="flex items-start gap-4">
          <span className="color-label w-32 shrink-0 pt-1 font-mono text-xs">{size}</span>
          <div className={`bg-theme-500/15 color-heading max-w-[18ch] ${size}`}>
            Tokens keep every page in step
          </div>
        </div>
      ))}
    </div>
  )
}
```

### Arbitrary sizes

Pass any pixel size in brackets: `autotext-[40px]` sets a 40px font size with a 1.628 line height. The value is read as a number of pixels, so write it in `px` (or as a bare number). Other units and variables do not work: `autotext-[2.5rem]` produces a 2.5px font size, and `autotext-(--my-size)` an invalid one.

> [!WARNING]
> `autotext-shadow-*` (for example `autotext-shadow-sm`) is currently broken: Tailwind's text-shadow sizes share the font-size namespace, so these classes exist but compile to `font-size: 0px`. Do not use them.

## Responsive and state variants

The sizes are fixed pixel values, so prefix the class with a breakpoint to change the size per screen: `autotext-2xl md:autotext-4xl lg:autotext-6xl`.

```tsx preview iframe height=280 title="autotext-2xl md:autotext-4xl lg:autotext-6xl"
export default function Demo() {
  return (
    <div className="autotext-2xl color-heading w-full max-w-[720px] font-bold md:autotext-4xl lg:autotext-6xl">
      Fewer decisions, more consistent pages
    </div>
  )
}
```

## Customizing

The named sizes follow the `--text-*` scale that Systhema sets in its Tailwind theme (see [Theme defaults](https://docs.systhema.app/next/styling/tailwind.md#theme-defaults)); define a new `--text-*` size in your own `@theme` block and `autotext-*` picks it up. The curve itself is fixed: line height 2 at 14px and below, then `1 + sech((size − 14) / 25)`, rounded to three decimals.

## Related

- [Typography](https://docs.systhema.app/next/styling/typography.md)
- [Typography tokens](https://docs.systhema.app/next/reference/tokens/typography.md#tailwind-type-scale)