Typography scale generation in SASS - Mini Project: Build & Apply

Typography Scale Generation with Sass

📖 Scenario: You are designing a website and want to create a consistent typography scale using Sass. This scale will help you apply harmonious font sizes across headings and paragraphs.

🎯 Goal: Build a Sass setup that generates a typography scale using a base font size and a scale ratio. You will create variables and a loop to produce font sizes for different heading levels.

📋 What You'll Learn

Create a base font size variable called $base-font-size with the value 1rem.

Create a scale ratio variable called $scale-ratio with the value 1.25.

Use a Sass @for loop with a variable $i from 1 to 6 to generate font sizes for headings h1 to h6.

Inside the loop, calculate the font size by multiplying $base-font-size by $scale-ratio raised to the power of (6 - $i).

Assign the calculated font size to each heading selector h#{$i}.

💡 Why This Matters

🌍 Real World

Typography scales help designers keep font sizes consistent and visually balanced across a website, improving readability and aesthetics.

💼 Career

Front-end developers and UI designers often use Sass to manage styles efficiently and create scalable design systems.

1

Set up base font size variable

Create a Sass variable called $base-font-size and set it to 1rem.

SASS

# Create a variable called $base-font-size and set it to 1rem
# Your code here

Need a hint?

Use the syntax $variable-name: value; to create a Sass variable.

2

Add scale ratio variable

Create a Sass variable called $scale-ratio and set it to 1.25.

SASS

$base-font-size: 1rem;
# Create a variable called $scale-ratio and set it to 1.25
# Your code here

Need a hint?

Remember to end the line with a semicolon.

3

Write a loop to generate heading font sizes

Write a Sass @for loop using the variable $i from 1 through 6.

SASS

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

# Write a @for loop with $i from 1 through 6
# Your code here

Need a hint?

Use @for $i from 1 through 6 { ... } to loop from 1 to 6.

4

Calculate and assign font sizes inside the loop

Inside the @for loop, calculate the font size by multiplying $base-font-size by $scale-ratio raised to the power of (6 - $i). Assign this font size to the heading selector h#{$i} using the font-size property.

SASS

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

@for $i from 1 through 6 {
  // Calculate font size and assign to h#{$i}
  # Your code here
}

Need a hint?

Use $scale-ratio ** (6 - $i) to raise the scale ratio to the power of (6 - $i).

Wrap the CSS selector and property inside the loop.