Auto line height

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 referenceLink to this section

Basic usageLink to this section

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, such as a display number, a pull quote or a caption.

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

Comparing sizesLink to this section

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.

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 sizesLink to this section

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.

Responsive and state variantsLink to this section

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.

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

CustomizingLink to this section

The named sizes follow the --text-* scale that Systhema sets in its Tailwind theme (see 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.

RelatedLink to this section

• Typography
• Typography tokens