🎨CSS & Color

Modular Typography Scale

Mathematically derived font sizes for perfect hierarchy.

Explanation

A modular scale ensures that headers and body text look harmonious together.

Examples

H1 Size
Output
font-size: 2.441rem
Body Size
Output
font-size: 1rem

Code Examples

CSS 
:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
}

Try it Now

Open in Typography Scale

💡 Tips

  • Use rem units so users can scale text in browser settings
  • Maintain a 1.5 line-height for body text readability
  • Decrease line-height slightly for larger headings

⚠️ Common Pitfalls

  • Avoid using px for font sizes in 2024+
← Back to All Templates