Toolspica
Toolspicaby Hostspica

CSS Type Scale Generator

Build a Harmonious Font Size Scale for Your Design

Need to use CSS Type Scale Generator right now?

Generates a mathematically consistent size scale, ready to drop into a CSS design system's spacing tokens.

No sign-upNo uploads 100% free
H1Aa H161px
H2Aa H249px
H3Aa H339px
H4Aa H431px
H5Aa H525px
H6Aa H620px
BodyAa Body16px
CaptionAa Caption13px

CSS variables

--font-caption: 0.813rem; /* 13px */
--font-body: 1.000rem; /* 16px */
--font-h6: 1.250rem; /* 20px */
--font-h5: 1.563rem; /* 25px */
--font-h4: 1.938rem; /* 31px */
--font-h3: 2.438rem; /* 39px */
--font-h2: 3.063rem; /* 49px */
--font-h1: 3.813rem; /* 61px */

Features

  • Runs entirely in your browser
  • Privacy-first — your data is never uploaded
  • Real-time, instant results
  • 100% free, no sign-up required
  • Works on desktop, tablet, and mobile
  • No installation needed

Who uses this tool?

DesignersDevelopersMarketersStudents

People also search for

Typography Scale GeneratorFancy Text Generator toolFont Pairing Generator toolGoogle Fonts Previewer toolFont Identifier (Image to Font) tool

About CSS Type Scale Generator

Picking font sizes for a design system by feel usually produces an inconsistent mess — an H2 that's barely bigger than an H3, or a jump from H1 to H2 that feels jarring. A modular type scale solves this by generating every size from one base value multiplied repeatedly by a fixed ratio, the same principle used in musical harmony and classical typography, producing sizes that feel proportionally related rather than arbitrary.

Set your base font size and pick a ratio — from a subtle Minor Second (1.067) for tight, minimal interfaces up to the dramatic Golden Ratio (1.618) for bold editorial designs — and the tool generates eight steps from caption text up through H1, each shown live at its actual computed size so you can see the scale in action before committing to it.

The output includes ready-to-use CSS custom properties in rem units, so you can drop the entire scale directly into your stylesheet's :root and reference consistent, proportional sizes throughout your project instead of hand-picking pixel values page by page.

How it works

  1. Set your base size and ratio. Choose a starting point and a scale ratio.
  2. Preview all 8 steps live. See caption through H1 at their actual computed sizes.
  3. Copy the CSS variables. Drop the complete scale into your stylesheet.

Examples

Building a scale with Major Third ratio

Input

Base 16px, ratio 1.25

Output

Caption 12.8px, Body 16px, H1 61px

Frequently asked questions