Typography scale generation in SASS - Deep Dive

Overview - Typography scale generation

What is it?

Typography scale generation is a way to create a set of font sizes that grow or shrink in a balanced, consistent way. It uses a starting font size and a ratio to calculate other sizes, making text look harmonious across a website. This helps designers and developers keep text sizes organized and visually pleasing without guessing. It is often done using code tools like Sass to automate the process.

Why it matters

Without a typography scale, font sizes can feel random and messy, making websites look unprofessional and hard to read. A scale ensures that headings, paragraphs, and other text elements relate well to each other, improving user experience and design consistency. It saves time by automating size calculations and helps maintain a clear visual hierarchy, which guides readers naturally through content.

Where it fits

Before learning typography scale generation, you should understand basic CSS and how font sizes work. Knowing Sass basics helps because it automates the scale creation. After this, you can learn responsive typography, where scales adjust for different screen sizes, and advanced design systems that include color and spacing scales.

Mental Model

Core Idea

A typography scale is like a musical scale for fonts, where each size is a step that fits perfectly with the others to create harmony in text design.

Think of it like...

Imagine a staircase where each step is evenly spaced so you can climb smoothly without tripping. Typography scales create these smooth steps for font sizes, so text flows naturally and looks balanced.

Base size (1rem)
  │
  ├─ Step 1: base * ratio
  ├─ Step 2: base * ratio²
  ├─ Step 3: base * ratio³
  └─ ...

Example with ratio 1.25:
1rem
│
1.25rem
│
1.56rem
│
1.95rem
│
2.44rem

Build-Up - 7 Steps

1

Foundation

Understanding font sizes in CSS

Concept: Learn how font sizes are set and measured in CSS using units like rem and px.

In CSS, font sizes control how big or small text appears. Common units are pixels (px) and rems. Pixels are fixed sizes, while rems relate to the root font size, making scaling easier. For example, 1rem usually equals 16px by default. Using rems helps keep sizes consistent and scalable across devices.

Result

You can set font sizes that respond to user settings and scale well on different screens.

Understanding units like rem is key because typography scales rely on relative sizing to keep harmony and flexibility.

2

Foundation

What is a typography scale?

Concept: Introduce the idea of a scale that generates font sizes based on a base size and a ratio.

A typography scale starts with a base font size, like 1rem, and a ratio, such as 1.25. Each next size is the previous size multiplied by the ratio. This creates a series of sizes that grow smoothly, like 1rem, 1.25rem, 1.56rem, and so on. This helps keep text sizes balanced and related.

Result

You get a set of font sizes that look good together and make design decisions easier.

Knowing that font sizes can be generated mathematically removes guesswork and creates visual harmony.

3

Intermediate

Creating a scale function in Sass

🤔Before reading on: do you think a Sass function can take a base size and ratio to return any step size? Commit to yes or no.

Concept: Learn how to write a Sass function that calculates font sizes using the scale formula.

In Sass, you can write a function that takes a base size and a step number, then multiplies the base by the ratio raised to the step. For example: @function scale($base, $ratio, $step) { @return $base * pow($ratio, $step); } This function returns the font size for any step, automating the scale.

Result

You can generate font sizes dynamically in your stylesheets, making updates easy and consistent.

Using functions in Sass to calculate sizes means you never manually guess font sizes again, improving maintainability.

4

Intermediate

Using the scale function for headings and text

🤔Before reading on: do you think all headings should use the same ratio step difference? Commit to your answer.

Concept: Apply the scale function to different text elements to create a clear hierarchy.

Assign font sizes to headings and paragraphs by calling the scale function with different steps: h1 { font-size: scale(1rem, 1.25, 4); } h2 { font-size: scale(1rem, 1.25, 3); } p { font-size: scale(1rem, 1.25, 0); } This creates a smooth size difference between text elements, making the page easier to read.

Result

Text elements have consistent size relationships, improving readability and design clarity.

Understanding how to map scale steps to text roles helps create a natural reading flow and visual order.

5

Intermediate

Adjusting scale for responsive design

🤔Before reading on: do you think the same scale ratio works well on all screen sizes? Commit to yes or no.

Concept: Learn to change the base size or ratio depending on screen width for better readability on different devices.

You can use media queries in Sass to adjust the base font size or ratio: $base-mobile: 1rem; $base-desktop: 1.125rem; @media (min-width: 768px) { $base: $base-desktop; } Then use $base in your scale function calls. This makes text larger on bigger screens, improving user experience.

Result

Typography scales adapt to device sizes, keeping text comfortable to read everywhere.

Knowing how to adjust scales responsively prevents text from feeling too small or too large on different devices.

6

Advanced

Handling modular scale with custom ratios

🤔Before reading on: do you think all design projects use the same scale ratio? Commit to yes or no.

Concept: Explore how different ratios create different moods and styles in typography scales.

Common ratios include 1.125 (minor third), 1.25 (major third), 1.414 (square root of 2), and 1.618 (golden ratio). Each ratio changes how quickly font sizes grow: - Smaller ratios create subtle size differences. - Larger ratios create dramatic size jumps. Choosing a ratio depends on the design feel you want.

Result

You can customize typography scales to fit brand personality and design goals.

Understanding ratio choice helps you tailor typography scales to match the tone and style of your project.

7

Expert

Optimizing typography scales for accessibility

🤔Before reading on: do you think a fixed scale always meets accessibility needs? Commit to yes or no.

Concept: Learn how to adjust scales to respect user preferences and improve readability for all users.

Accessibility requires font sizes to be readable for people with different vision needs. Use relative units like rem and allow users to zoom or change base font size. Also, consider: - Using larger base sizes for body text. - Avoiding too large jumps that confuse readers. - Testing with browser zoom and screen readers. Sass can help by making scales flexible and easy to update.

Result

Typography scales that support accessibility improve usability and inclusivity.

Knowing how to balance design and accessibility ensures your typography works well for everyone, not just ideal users.

Under the Hood

Typography scale generation uses exponential math where each font size is calculated by multiplying the base size by the ratio raised to the power of the step number. Sass functions perform this calculation at compile time, replacing manual size values with computed results. This means the CSS output contains fixed font sizes, but the source code remains flexible and easy to update.

Why designed this way?

This approach was created to solve the problem of inconsistent font sizing and to automate repetitive calculations. Before scales, designers picked sizes by eye, which was slow and error-prone. Using math and Sass functions makes typography systematic, scalable, and maintainable. Alternatives like fixed size lists lack flexibility, and manual calculations are tedious and error-prone.

Base size (1rem)
   │
   ├─ Multiply by ratio (e.g., 1.25)
   │
   ├─ Step 1: 1rem * 1.25 = 1.25rem
   ├─ Step 2: 1rem * 1.25² = 1.56rem
   ├─ Step 3: 1rem * 1.25³ = 1.95rem
   └─ ...

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

Compile time calculation → CSS output with fixed sizes

Myth Busters - 4 Common Misconceptions

Quick: Do you think you must use pixels for font sizes in typography scales? Commit to yes or no.

Common Belief: Many believe font sizes in typography scales should be fixed pixels for precision.

Reality: Using relative units like rem is better because it respects user settings and scales naturally across devices.

Why it matters: Using pixels can break accessibility and responsiveness, making text too small or too large on some devices.

Quick: Do you think the ratio in a typography scale must always be the golden ratio (1.618)? Commit to yes or no.

Common Belief: Some think the golden ratio is the only correct choice for typography scales.

Reality: Different ratios suit different designs; smaller ratios create subtle scales, larger ones create bold scales.

Why it matters: Rigidly using one ratio limits design flexibility and can produce awkward or unsuitable text sizes.

Quick: Do you think typography scales automatically solve all readability issues? Commit to yes or no.

Common Belief: People often believe that once a scale is set, text will always be readable and accessible.

Reality: Typography scales help, but accessibility requires testing, user preferences, and sometimes manual adjustments.

Why it matters: Ignoring accessibility can exclude users with vision impairments or different device needs.

Quick: Do you think Sass functions for scales run in the browser? Commit to yes or no.

Common Belief: Some think Sass functions calculate font sizes dynamically in the browser.

Reality: Sass functions run at compile time, producing static CSS values; browsers only see the final CSS.

Why it matters: Misunderstanding this can lead to expecting dynamic behavior that Sass cannot provide.

Expert Zone

1

Choosing a ratio close to 1 (like 1.125) creates subtle size differences that work well for dense text-heavy sites, while larger ratios suit bold, expressive designs.

2

Combining typography scales with line-height and letter-spacing scales creates a fully harmonious text system, not just font sizes alone.

3

Sass's pow() function can introduce floating-point precision issues; rounding results can prevent tiny visual glitches in font sizes.

When NOT to use

Avoid strict typography scales when working with highly custom or artistic typography that requires irregular sizes. In such cases, manual sizing or design tokens with explicit values may be better. Also, for very small UI elements like buttons or labels, fixed sizes might be clearer than scaled ones.

Production Patterns

In production, typography scales are integrated into design systems and component libraries. Developers use Sass mixins and functions to apply consistent font sizes across components. Responsive scales adjust base sizes with media queries. Teams often store scale parameters in variables for easy theming and brand updates.

Connections

Modular design systems

Typography scales are a core part of modular design systems that use consistent rules for spacing, color, and typography.

Understanding typography scales helps grasp how design systems create harmony and consistency across all UI elements.

Mathematics - geometric sequences

Typography scales use geometric sequences where each term is multiplied by a constant ratio.

Knowing geometric sequences explains why font sizes grow smoothly and predictably in scales.

Music theory - scales and harmony

Typography scales mimic musical scales where notes relate by fixed intervals to create harmony.

Recognizing this connection reveals how humans perceive balanced progressions, whether in sound or sight.

Common Pitfalls

#1 Using fixed pixel sizes instead of relative units.

Wrong approach:

h1 { font-size: 32px; }
p { font-size: 14px; }

Correct approach:

h1 { font-size: 2rem; }
p { font-size: 0.875rem; }

Root cause:

Misunderstanding the importance of relative units for accessibility and responsiveness.

#2 Hardcoding font sizes without using a scale function.

Wrong approach:

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

Correct approach:

@function scale($base, $ratio, $step) {
@return $base * pow($ratio, $step);
}
h1 { font-size: scale(1rem, 1.25, 4); }
h2 { font-size: scale(1rem, 1.25, 3); }

Root cause:

Not leveraging automation leads to inconsistent sizes and harder maintenance.

#3 Using the same scale ratio for all projects without adjustment.

Wrong approach:

$ratio: 1.618;
// used everywhere without change

Correct approach:

$ratio: 1.25; // for subtle scale
// or
$ratio: 1.414; // for moderate scale

Root cause:

Ignoring design context and project needs when choosing scale parameters.

Key Takeaways

Typography scale generation creates balanced font sizes by multiplying a base size by a ratio raised to a step number.

Using relative units like rem in scales ensures accessibility and responsiveness across devices.

Sass functions automate scale calculations, making font size management easier and consistent.

Choosing the right ratio tailors the scale's feel to the design's personality and purpose.

Accessibility requires more than scales; testing and user preferences must guide final font size choices.