Typography scale generation in SASS - Browser Rendering Trace

Render Flow - Typography scale generation

[Define base font size] -> [Define scale ratio] -> [Calculate scale steps] -> [Generate CSS font-size values] -> [Apply to elements] -> [Browser renders text sizes]

The browser first reads the base font size and scale ratio defined in SASS, calculates font sizes for each step in the scale, then applies these sizes to elements, resulting in visually proportional text sizes.

Render Steps - 6 Steps

Code Added:$base-size: 1rem;

Before

[Text all same size]
[ h1 ]
[ h2 ]
[ p  ]

→

After

[Text base size 1rem]
[ h1 ]
[ h2 ]
[ p  ]

Set the base font size to 1rem, so all text starts from this size.

🔧 Browser Action:Stores base font size for calculations

Code Sample

This code creates a typography scale where headings and paragraph text have font sizes increasing by a ratio of 1.25 steps, producing visually balanced text sizes.

SASS

<main>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <p>Paragraph text</p>
</main>

SASS

$base-size: 1rem;
$scale-ratio: 1.25;

@function scale($step) {
  @return $base-size * pow($scale-ratio, $step);
}

h1 {
  font-size: scale(3);
}
h2 {
  font-size: scale(2);
}
p {
  font-size: scale(0);
}

Render Quiz - 3 Questions

After applying step 4, what font size does h1 have relative to base size?

A About 1.25 times the base size

B About 1.95 times the base size

C Equal to the base size

D About 3 times the base size

Common Confusions - 3 Topics

Why does font-size not change if I forget to use the scale function?

Without calling the scale function, font-size stays at default or base size, so no visual difference happens. See render_step 3 where the function is defined but not yet used.

💡 Always apply font-size with scale() to see size changes.

Why do headings look too close in size?

If the scale ratio is too small (like 1.1), steps produce small size differences. Increasing ratio (e.g., 1.25) creates clearer size steps. See render_step 2 for ratio effect.

💡 Use a ratio around 1.2 to 1.3 for visible size differences.

Why does scale(0) return the base size?

Because any number to the power 0 is 1, so scale(0) = base-size * 1 = base-size. This keeps the paragraph text at base size as in render_step 6.

💡 Step 0 means base font size.

Property Reference

Property	Value Applied	Effect on Font Size	Common Use
$base-size	1rem	Sets starting font size for scale	Base text size
$scale-ratio	1.25	Multiplies font size per step	Controls size difference between steps
scale($step)	Function	Calculates font size by base * ratio^step	Generates consistent scale sizes
font-size	scale(n)	Applies calculated font size to element	Styling headings, paragraphs

Concept Snapshot

Typography scale uses a base font size and a scale ratio. Each step multiplies the base size by the ratio to get new sizes. Use a SASS function to calculate sizes for headings and text. Common ratio values are between 1.2 and 1.3 for clear size differences. Step 0 returns the base font size. This creates visually balanced, consistent typography.