Type scale generator

Create and explore dynamic type scales with ease. Choose from a vast selection of Google Fonts, set your base font size and scale, and see how different type sizes look in real time. Customize your text preview and instantly see the effects on various font sizes and line heights. Copy the generated CSS, SCSS, SASS, and Tailwind CSS code snippets to integrate with your projects seamlessly. Whether you’re designing for the web or mobile, this tool helps you maintain consistent typography with just a few clicks.

Just publish it with Framer

The website builder loved by designers.

Base Font Size px:

Font Family:

Scale Ratio:

You’re not everything you could be, and you know it.

html { font-size: 2.5rem; }
body { font-family: 'Roboto', sans-serif; line-height: 1.067; }
  --text-size-xs: 2.20rem;
  --line-height-xs: 1.067;
  --text-size-sm: 2.35rem;
  --line-height-sm: 1.067;
  --text-size-md: 2.50rem;
  --line-height-md: 1.067;
  --text-size-lg: 2.68rem;
  --line-height-lg: 1.067;
  --text-size-xl: 2.85rem;
  --line-height-xl: 1.067;
  --text-size-2xl: 3.02rem;
  --line-height-2xl: 1.067;
  --text-size-3xl: 3.25rem;
  --line-height-3xl: 1.067;
  --text-size-4xl: 3.45rem;
  --line-height-4xl: 1.067;
  --text-size-5xl: 3.70rem;
  --line-height-5xl: 1.067;

:root {
  --text-size-xs: 2.20rem;
  --line-height-xs: 1.067;
  --text-size-sm: 2.35rem;
  --line-height-sm: 1.067;
  --text-size-md: 2.50rem;
  --line-height-md: 1.067;
  --text-size-lg: 2.68rem;
  --line-height-lg: 1.067;
  --text-size-xl: 2.85rem;
  --line-height-xl: 1.067;
  --text-size-2xl: 3.02rem;
  --line-height-2xl: 1.067;
  --text-size-3xl: 3.25rem;
  --line-height-3xl: 1.067;
  --text-size-4xl: 3.45rem;
  --line-height-4xl: 1.067;
  --text-size-5xl: 3.70rem;
  --line-height-5xl: 1.067;
}

$text-size-xs: 2.20rem;
$line-height-xs: 1.067;
$text-size-sm: 2.35rem;
$line-height-sm: 1.067;
$text-size-md: 2.50rem;
$line-height-md: 1.067;
$text-size-lg: 2.68rem;
$line-height-lg: 1.067;
$text-size-xl: 2.85rem;
$line-height-xl: 1.067;
$text-size-2xl: 3.02rem;
$line-height-2xl: 1.067;
$text-size-3xl: 3.25rem;
$line-height-3xl: 1.067;
$text-size-4xl: 3.45rem;
$line-height-4xl: 1.067;
$text-size-5xl: 3.70rem;
$line-height-5xl: 1.067;

Premium themes crafted with Astro and Tailwind CSS

A growing collection of unique, non-cookie-cutter themes.