Setting Up a Type Scale

A type scale is a set of predefined text sizes that create visual hierarchy on your page. Instead of picking random font sizes, a type scale gives you a system.

Why It Matters

Without a type scale:

• Every heading is a different random size
• Text sizes don't relate to each other
• The page feels inconsistent

With a type scale:

• Clear visual hierarchy
• Consistent sizing across pages
• Easy to maintain and update

The Standard Web Type Scale

A common type scale for web:

| Element | Size | Weight | Use | |---------|------|--------|-----| | H1 | 48–64px | Bold | Page title, hero heading | | H2 | 36–48px | Bold | Section headings | | H3 | 24–30px | Semi-bold | Sub-section headings | | H4 | 20–24px | Semi-bold | Card titles, small headings | | Body | 16–18px | Regular | Paragraph text | | Small | 14px | Regular | Captions, metadata |

What You'll Build

A page that demonstrates a complete type scale with at least 3 heading levels and body text.

Instructions

1. Set Up Your Typography Classes

Create classes for each heading level. You can either:

Option A: Utility approach

• heading-style-h1
• heading-style-h2
• heading-style-h3
• text-size-medium (body text)

Option B: Component approach

• Apply styles directly to H1–H4 tags using Webflow's tag styling
• Add component-specific classes like hero_heading, section_heading

2. Create a Type Scale Section

Build a section that shows your type scale in action:

1. An H1 heading (your page title)
2. At least one H2 heading (section title)
3. At least one H3 heading (sub-section)
4. Paragraph text between headings

3. Set Consistent Sizing

For each heading level, set:

• Font size: Use the scale above as a starting point
• Font weight: Bold for H1/H2, Semi-bold for H3/H4
• Line height: 1.1–1.3 for headings, 1.5–1.75 for body
• Letter spacing: -0.02em for large headings (tighter tracking)

4. Responsive Typography

At mobile breakpoints, scale down:

• H1: 32–40px
• H2: 28–32px
• H3: 22–26px

5. Publish and Submit

Publish your site and paste the URL below.

Tips

• Use rem or em units instead of px for better scalability
• Set line-height as a unitless number (1.5 not 24px)
• Use Webflow's tag styling for base heading styles, then add component classes for overrides