Fluid Fonts

Fluid font sizes and line heights for every Tailwind text-* class, from your smallest to your largest viewport.

How fluid sizes work

With breakpoints a font size jumps: text-base stays 16px up to 767px, then becomes 18px. Between two breakpoints the text is either too big for a small phone or too small for a wide screen, and every jump needs another class like md:text-lg.

A fluid size grows linearly with the viewport between Min Width and Max Width and stays fixed outside them. CSS clamp() does it in one line: a minimum, a value that follows the viewport width (vi) and a maximum.

--text-base: clamp(1rem, 0.8957rem + 0.5217vi, 1.3rem);

text-base grows from 16px at 320px to 20.8px at 1240px

  • No media queries: one class per element instead of text-base md:text-lg lg:text-xl.
  • Proportions stay the same at every width, not only at the breakpoints.
  • Values are in rem, so they still follow the font size the user set in the browser.
NameMin font size Tailwind defaultMin line height Tailwind defaultMax font size Max line height
text-xs
px
em
px
em
text-sm
px
em
px
em
text-base
px
em
px
em
text-lg
px
em
px
em
text-xl
px
em
px
em
text-2xl
px
em
px
em
text-3xl
px
em
px
em
text-4xl
px
em
px
em
text-5xl
px
em
px
em
text-6xl
px
em
px
em
text-7xl
px
em
px
em
text-8xl
px
em
px
em
text-9xl
px
em
px
em
:root {
   --wabtu-text-xs: clamp(0.75rem, 0.6717rem + 0.3913vi, 0.975rem);
   --wabtu-text-xs-lh: 1em;

   --wabtu-text-sm: clamp(0.875rem, 0.7837rem + 0.4565vi, 1.1375rem);
   --wabtu-text-sm-lh: 1.25em;

   --wabtu-text-base: clamp(1rem, 0.8957rem + 0.5217vi, 1.3rem);
   --wabtu-text-base-lh: 1.5em;

   --wabtu-text-lg: clamp(1.125rem, 1.0076rem + 0.5870vi, 1.4625rem);
   --wabtu-text-lg-lh: 1.75em;

   --wabtu-text-xl: clamp(1.25rem, 1.1196rem + 0.6522vi, 1.625rem);
   --wabtu-text-xl-lh: 1.75em;

   --wabtu-text-2xl: clamp(1.5rem, 1.3435rem + 0.7826vi, 1.95rem);
   --wabtu-text-2xl-lh: 2em;

   --wabtu-text-3xl: clamp(1.875rem, 1.6793rem + 0.9783vi, 2.4375rem);
   --wabtu-text-3xl-lh: 2.25em;

   --wabtu-text-4xl: clamp(2.25rem, 2.0152rem + 1.1739vi, 2.925rem);
   --wabtu-text-4xl-lh: 2.5em;

   --wabtu-text-5xl: clamp(3rem, 2.6870rem + 1.5652vi, 3.9rem);
   --wabtu-text-5xl-lh: 1em;

   --wabtu-text-6xl: clamp(3.75rem, 3.3587rem + 1.9565vi, 4.875rem);
   --wabtu-text-6xl-lh: 1em;

   --wabtu-text-7xl: clamp(4.5rem, 4.0304rem + 2.3478vi, 5.85rem);
   --wabtu-text-7xl-lh: 1em;

   --wabtu-text-8xl: clamp(6rem, 5.3739rem + 3.1304vi, 7.8rem);
   --wabtu-text-8xl-lh: 1em;

   --wabtu-text-9xl: clamp(8rem, 7.1652rem + 4.1739vi, 10.4rem);
   --wabtu-text-9xl-lh: 1em;

}
@theme {
  --text-xs: clamp(0.75rem, 0.6717rem + 0.3913vi, 0.975rem);
  --text-xs--line-height: 1em;

  --text-sm: clamp(0.875rem, 0.7837rem + 0.4565vi, 1.1375rem);
  --text-sm--line-height: 1.25em;

  --text-base: clamp(1rem, 0.8957rem + 0.5217vi, 1.3rem);
  --text-base--line-height: 1.5em;

  --text-lg: clamp(1.125rem, 1.0076rem + 0.5870vi, 1.4625rem);
  --text-lg--line-height: 1.75em;

  --text-xl: clamp(1.25rem, 1.1196rem + 0.6522vi, 1.625rem);
  --text-xl--line-height: 1.75em;

  --text-2xl: clamp(1.5rem, 1.3435rem + 0.7826vi, 1.95rem);
  --text-2xl--line-height: 2em;

  --text-3xl: clamp(1.875rem, 1.6793rem + 0.9783vi, 2.4375rem);
  --text-3xl--line-height: 2.25em;

  --text-4xl: clamp(2.25rem, 2.0152rem + 1.1739vi, 2.925rem);
  --text-4xl--line-height: 2.5em;

  --text-5xl: clamp(3rem, 2.6870rem + 1.5652vi, 3.9rem);
  --text-5xl--line-height: 1em;

  --text-6xl: clamp(3.75rem, 3.3587rem + 1.9565vi, 4.875rem);
  --text-6xl--line-height: 1em;

  --text-7xl: clamp(4.5rem, 4.0304rem + 2.3478vi, 5.85rem);
  --text-7xl--line-height: 1em;

  --text-8xl: clamp(6rem, 5.3739rem + 3.1304vi, 7.8rem);
  --text-8xl--line-height: 1em;

  --text-9xl: clamp(8rem, 7.1652rem + 4.1739vi, 10.4rem);
  --text-9xl--line-height: 1em;

}