Typography scale generation in SASS

Introduction

Typography scale helps keep font sizes consistent and balanced across a website. It makes text look nice and easy to read.

When you want headings and body text to have a clear size difference.

When designing a website that needs to look good on different screen sizes.

When you want to quickly create font sizes that follow a pattern.

When you want to keep your styles organized and easy to update.

Syntax

SASS

@function typography-scale($step, $base-size: 1rem, $ratio: 1.25) {
  @return $base-size * pow($ratio, $step);
}

The $step is how many steps up or down the scale you want.

The $base-size is the starting font size, usually for body text.

Examples

This example shows how to get normal body text size, a bigger heading, and a smaller heading using steps.

SASS

@function typography-scale($step, $base-size: 1rem, $ratio: 1.25) {
  @return $base-size * pow($ratio, $step);
}

body {
  font-size: typography-scale(0); // 1rem
}
h1 {
  font-size: typography-scale(3); // bigger heading
}
h6 {
  font-size: typography-scale(-1); // smaller heading
}

Using a smaller ratio (1.2) creates a gentler size difference between steps.

SASS

@function typography-scale($step, $base-size: 1rem, $ratio: 1.2) {
  @return $base-size * pow($ratio, $step);
}

p {
  font-size: typography-scale(0); // base size
}
small {
  font-size: typography-scale(-2); // smaller text
}

You can use pixels as base size and a different ratio for a stronger scale effect.

SASS

@function typography-scale($step, $base-size: 16px, $ratio: 1.333) {
  @return $base-size * pow($ratio, $step);
}

h2 {
  font-size: typography-scale(2); // larger heading
}
caption {
  font-size: typography-scale(-3); // very small text
}

Sample Program

This code creates a simple typography scale with body text, headings, and small text. The font sizes grow or shrink by steps using the scale function.

SASS

@function typography-scale($step, $base-size: 1rem, $ratio: 1.25) {
  @return $base-size * pow($ratio, $step);
}

body {
  font-family: Arial, sans-serif;
  font-size: typography-scale(0);
  line-height: 1.5;
  margin: 2rem;
}
h1 {
  font-size: typography-scale(4);
  margin-bottom: 1rem;
}
h2 {
  font-size: typography-scale(3);
  margin-bottom: 0.75rem;
}
p {
  font-size: typography-scale(0);
  margin-bottom: 1rem;
}
small {
  font-size: typography-scale(-2);
  color: #555;
}

Important Notes

The pow() function in Sass calculates the power of the ratio to the step.

Using a ratio between 1.2 and 1.333 is common for readable scales.

Remember to use relative units like rem for better accessibility and responsiveness.

Summary

Typography scales help keep font sizes balanced and consistent.

You create scales by multiplying a base size by a ratio raised to a step number.

Sass functions make it easy to generate these sizes dynamically.

Practice

1. What is the main purpose of a typography scale in Sass?

easy

A. To create random font sizes for variety

B. To add animations to text elements

C. To change colors of text dynamically

D. To keep font sizes balanced and consistent across a website

Solution

1. Step 1: Understand typography scale concept

   A typography scale is used to keep font sizes balanced and consistent, avoiding random sizes.

2. Step 2: Identify the correct purpose

   Options A, C, and D describe unrelated tasks like randomness, colors, or animations, which are not the purpose of typography scales.

3. Final Answer:

   To keep font sizes balanced and consistent across a website -> Option D

4. Quick Check:

   Typography scale = balanced font sizes [OK]

Hint: Typography scales keep font sizes consistent and balanced [OK]

Common Mistakes:

• Thinking typography scales create random sizes
• Confusing typography scale with color or animation features
• Assuming typography scales are for layout spacing

2. Which of the following is the correct Sass function syntax to calculate a typography scale size with base size $base, ratio $ratio, and step $step?

easy

A. font-size: $base * $ratio ^ $step;

B. font-size: $base * math.pow($ratio, $step);

C. font-size: $base * ($ratio ** $step);

D. font-size: $base * pow($ratio, $step);

Solution

1. Step 1: Recall Sass math function syntax

   Sass uses the math module for functions like pow(), so the correct syntax is math.pow($ratio, $step).

2. Step 2: Check each option

   font-size: $base * pow($ratio, $step); uses pow() without math module, which is invalid. font-size: $base * $ratio ^ $step; uses ^ which is not Sass syntax. font-size: $base * ($ratio ** $step); uses ** which is not Sass syntax for exponentiation. font-size: $base * math.pow($ratio, $step); correctly uses math.pow($ratio, $step).

3. Final Answer:

   font-size: $base * math.pow($ratio, $step); -> Option B

4. Quick Check:

   Sass math.pow() = correct syntax [OK]

Hint: Use math.pow() with math module for exponent in Sass [OK]

Common Mistakes:

• Using ^ for exponent instead of math.pow()
• Forgetting to use math module prefix
• Trying pow() without math module

3. Given the Sass code:

$base: 1rem;
$ratio: 1.25;
$step: 3;
$size: $base * math.pow($ratio, $step);

What is the computed value of $size in rem units?

medium

A. 1.953125rem

B. 3.125rem

C. 2.4414rem

D. 4.0rem

Solution

1. Step 1: Calculate math.pow($ratio, $step)

   1.25 raised to the power 3 = 1.25 * 1.25 * 1.25 = 1.953125.

2. Step 2: Multiply by $base

   $base is 1rem, so 1rem * 1.953125 = 1.953125rem.

3. Step 3: Check options carefully

   1.953125rem shows 1.953125rem which matches calculation, but 2.4414rem shows 2.4414rem which is 1.25^4, not ^3.

4. Final Answer:

   1.953125rem -> Option A

5. Quick Check:

   1rem * 1.25^3 = 1.953125rem [OK]

Hint: Calculate ratio power step, then multiply by base size [OK]

Common Mistakes:

• Calculating power incorrectly (e.g., 1.25^4 instead of ^3)
• Multiplying base size by wrong power result
• Confusing rem units with pixels

4. Identify the error in this Sass function for typography scale:

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

medium

A. Missing math module prefix for pow function

B. Incorrect parameter names

C. Using @return instead of return

D. Function syntax is invalid in Sass

Solution

1. Step 1: Check Sass math function usage

   In Sass, pow() is inside the math module, so it must be called as math.pow().

2. Step 2: Verify other syntax

   Parameter names are fine, @return is correct Sass syntax, and function syntax is valid.

3. Final Answer:

   Missing math module prefix for pow function -> Option A

4. Quick Check:

   Use math.pow() not pow() alone [OK]

Hint: Always prefix pow() with math. in Sass functions [OK]

Common Mistakes:

• Calling pow() without math prefix
• Confusing @return with return keyword
• Thinking function syntax is wrong

5. You want to generate a typography scale in Sass that skips step 0 and starts from step 1, doubling the font size each step from a base of 1rem. Which Sass code correctly generates the size for step 3?

hard

A. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, $step + 1);

B. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, $step);

C. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, $step - 1);

D. $base: 1rem;
$ratio: 2;
$step: 3;
$size: $base * math.pow($ratio, 0);

Solution

1. Step 1: Understand skipping step 0

   Skipping step 0 means step 1 corresponds to power 0, so power = step - 1.

2. Step 2: Apply formula for step 3

   For step 3, power = 3 - 1 = 2, so size = 1rem * 2^2 = 4rem.

3. Step 3: Check options

   $base: 1rem; $ratio: 2; $step: 3; $size: $base * math.pow($ratio, $step - 1); uses $step - 1, correctly skipping step 0. $base: 1rem; $ratio: 2; $step: 3; $size: $base * math.pow($ratio, $step); uses $step directly, which would give 8rem for step 3. Options A and D are incorrect powers.

4. Final Answer:

   $base * math.pow($ratio, $step - 1); -> Option C

5. Quick Check:

   Skip step 0 by subtracting 1 from step [OK]

Hint: Subtract 1 from step to skip zero step in scale [OK]

Common Mistakes:

• Not adjusting step to skip zero
• Using step directly causing wrong size
• Confusing power calculation with addition