Set a base font size and scale ratio to generate a complete typographic hierarchy. See visual previews at every step, compare with Material Design, Tailwind, and Bootstrap scales, and export as CSS variables.
Generate harmonious font size scales. Set a base size and ratio, see the full scale with visual preview, and export as CSS variables or Tailwind config.
This is body text at the base size. It should be comfortable to read at normal viewing distance. Good typography creates visual hierarchy and guides the reader.
This is small text, useful for captions, labels, and metadata.
Extra small text for fine print and legal disclaimers.
:root {
--font-xs: 0.64rem; /* 10px */
--font-sm: 0.8rem; /* 13px */
--font-base: 1rem; /* 16px */
--font-md: 1.25rem; /* 20px */
--font-lg: 1.563rem; /* 25px */
--font-xl: 1.953rem; /* 31px */
--font-2xl: 2.441rem; /* 39px */
--font-3xl: 3.052rem; /* 49px */
}Create typographic hierarchies.