Typographic Scale Generator

TypographyDesign

SETTINGS

Type Scale

Distinct visual hierarchy, ideal for varied content types

Base Font Size:

16px

Standard text size (paragraph)

Font Family

Choose from common web fonts

Sample Text

CSS Code:

/* Font Scale: Perfect Fourth (1.333) */
/* Base size: 16px */

:root {
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-small: 9px;
  --font-base: 16px;
  --font-h5: 21.33px;
  --font-h4: 28.43px;
  --font-h3: 37.9px;
  --font-h2: 50.52px;
  --font-h1: 67.34px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: 1.5;
}

small { font-size: var(--font-small); }
h5 { font-size: var(--font-h5); }
h4 { font-size: var(--font-h4); }
h3 { font-size: var(--font-h3); }
h2 { font-size: var(--font-h2); }
h1 { font-size: var(--font-h1); }

Type Scale Preview

h1 (67.34px)

How vexingly quick daft zebras jump!

h2 (50.52px)

How vexingly quick daft zebras jump!

h3 (37.9px)

How vexingly quick daft zebras jump!

h4 (28.43px)

How vexingly quick daft zebras jump!

h5 (21.33px)

How vexingly quick daft zebras jump!

paragraph (16px)

How vexingly quick daft zebras jump!

small (9px)

How vexingly quick daft zebras jump!

Sample Pages

How vexingly quick daft zebras jump!

Consistent type scales create visual harmony that guides users through your content. Choose the perfect scale for your design.

Key Features

Modular Type Scales

Create harmonious visual relationships based on mathematical ratios like the Golden Ratio or Perfect Fourth.

Responsive Typography

Ensure your typography scales beautifully across all devices and screen sizes with responsive type scales.

What our customers say

"The typography system transformed our design process. We now have a consistent visual hierarchy that communicates effectively across all our platforms."

Sarah Johnson

Design Director, Acme Inc.

Type scales create a consistent visual hierarchy through proportional relationships between font sizes. Different scales offer varying degrees of contrast between text elements, helping establish emphasis and flow.

Modular scales like the Golden Ratio (1.618) or Perfect Fourth (1.333) are based on musical intervals, creating harmonious visual relationships that guide users through your content.