Text

Helper classes that set the font size and line height of any element. Pick a size from .text-xs to .text-9xl.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/text.css" />

Default

The quick brown fox jumps over the lazy dog.

<p class="text-2xl">The quick brown fox jumps over the lazy dog.</p>

Scale

Line height gets tighter as the text gets bigger, so large headings stay compact.

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

text-9xl

<p class="text-xs">text-xs</p>
<p class="text-sm">text-sm</p>
<p class="text-base">text-base</p>
<p class="text-lg">text-lg</p>
<p class="text-xl">text-xl</p>
<p class="text-2xl">text-2xl</p>
<p class="text-3xl">text-3xl</p>
<p class="text-4xl">text-4xl</p>
<p class="text-5xl">text-5xl</p>
<p class="text-6xl">text-6xl</p>
<p class="text-7xl">text-7xl</p>
<p class="text-8xl">text-8xl</p>
<p class="text-9xl">text-9xl</p>

Responsive

Sizes are mobile first. A plain .text-* class always applies. Add md:text-* to change the size from 600px and up, and lg:text-* from 1200px and up.

Resize the window.

<p class="text-xl md:text-3xl lg:text-5xl">Resize the window.</p>

Customization

Each size reads from a custom property. Override it to change the scale.

:root {
  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-base: 1rem;
  --ui-text-lg: 1.125rem;
  --ui-text-xl: 1.25rem;
  --ui-text-2xl: 1.5rem;
  --ui-text-3xl: 1.875rem;
  --ui-text-4xl: 2.25rem;
  --ui-text-5xl: 3rem;
  --ui-text-6xl: 3.75rem;
  --ui-text-7xl: 4.5rem;
  --ui-text-8xl: 6rem;
  --ui-text-9xl: 8rem;
}

API reference

Type	Classes / attributes	What it does
Size	`.text-xs` `.text-sm` `.text-base` `.text-lg` `.text-xl` `.text-2xl` `.text-3xl` `.text-4xl` `.text-5xl` `.text-6xl` `.text-7xl` `.text-8xl` `.text-9xl`	Sets font size and line height
Size from 600px	`.md:text-xs` `.md:text-sm` `.md:text-base` `.md:text-lg` `.md:text-xl` `.md:text-2xl` `.md:text-3xl` `.md:text-4xl` `.md:text-5xl` `.md:text-6xl` `.md:text-7xl` `.md:text-8xl` `.md:text-9xl`	Sets font size and line height when the viewport is 600px or wider
Size from 1200px	`.lg:text-xs` `.lg:text-sm` `.lg:text-base` `.lg:text-lg` `.lg:text-xl` `.lg:text-2xl` `.lg:text-3xl` `.lg:text-4xl` `.lg:text-5xl` `.lg:text-6xl` `.lg:text-7xl` `.lg:text-8xl` `.lg:text-9xl`	Sets font size and line height when the viewport is 1200px or wider