MetaTools

Type Scale

Preview

Display

A clean type scale for interfaces and content.

Heading

Readable hierarchy with consistent steps.

Body

Body copy should feel balanced across layouts and cards.

Caption

Small supporting metadata and utility labels.

Scale settings

Scale values

xs

10.24px

sm

12.8px

base

16px

lg

20px

xl

25px

2xl

31.25px

3xl

39.06px

4xl

48.83px

CSS export

:root {
  --font-xs: 10.24px;
  --font-sm: 12.8px;
  --font-base: 16px;
  --font-lg: 20px;
  --font-xl: 25px;
  --font-2xl: 31.25px;
  --font-3xl: 39.06px;
  --font-4xl: 48.83px;
}

Overview

Generate typography scales for interfaces and editorial layouts using modular ratios. Preview text sizes and copy CSS variables instantly.

Create a type scale from a base size and ratio, then export the values as CSS tokens.

Common workflows

  • Generate shades, tints, and alternate color formats from one base color.
  • Build palette harmonies and compare them in a UI preview before exporting values.
  • Create CSS-ready gradients, radius values, shadow layers, and typography scales for frontend implementation.

FAQ

Which scale ratios are included?

The tool includes common modular scale ratios like major second, major third, perfect fourth, and perfect fifth.

Can I export the scale for a design system?

Yes. The generated sizes can be copied as CSS custom properties for direct use in your design system.