Why Typography scale generation in SASS? - Purpose & Use Cases

The Big Idea

Discover how one simple scale can save you hours of tedious font resizing!

The Scenario

Imagine you are designing a website and need to set font sizes for headings, paragraphs, and buttons manually by typing each size one by one.

The Problem

If you want to change the base size or adjust the scale, you must update every font size manually, which is slow and easy to make mistakes.

The Solution

Typography scale generation automatically calculates font sizes based on a base size and a ratio, so you only change one value to update all sizes consistently.

Before vs After

✗ Before

$h1-font-size: 32px;
$p-font-size: 16px;
$button-font-size: 14px;

✓ After

$base-font-size: 16px;
$scale-ratio: 1.25;
$h1-font-size: $base-font-size * $scale-ratio * $scale-ratio * $scale-ratio;
$p-font-size: $base-font-size;
$button-font-size: $base-font-size / $scale-ratio;

What It Enables

You can create harmonious, consistent font sizes that adapt easily across your whole website with just a few variables.

Real Life Example

A designer updates the base font size for mobile devices, and all headings and text sizes adjust automatically without rewriting any code.

Key Takeaways

Manual font sizing is slow and error-prone.

Typography scales automate size calculations for consistency.

Changing one variable updates all font sizes instantly.