Typography scale generation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a typography scale in web design?

A typography scale is a set of font sizes that increase or decrease in a consistent way, helping create visual harmony and hierarchy in text.

beginner

How does Sass help in generating a typography scale?

Sass allows you to use variables, functions, and loops to calculate font sizes dynamically, making it easy to create and maintain a consistent typography scale.

beginner

What is the role of a base font size in a typography scale?

The base font size is the starting point for the scale. Other font sizes are calculated relative to it, ensuring consistency across the design.

intermediate

Explain the use of a ratio in typography scale generation.

A ratio is a number that determines how much each font size grows compared to the previous one. Common ratios are 1.25 or 1.333, creating a balanced progression.

intermediate

Show a simple Sass function example to generate a font size using a scale.

@function scale-font($step, $base: 1rem, $ratio: 1.25) { @return $base * pow($ratio, $step); } // Usage: font-size: scale-font(2); // returns 1.5625rem

What does the ratio in a typography scale control?

A The color of the text

B The font family used

C How font sizes increase or decrease

D The line height of text

The ratio controls the step size between font sizes, making them bigger or smaller in a consistent way.

In Sass, which feature helps automate typography scale calculations?

A Variables and functions

B HTML tags

C CSS selectors

D JavaScript loops

Sass variables and functions allow you to calculate font sizes dynamically.

If the base font size is 1rem and the ratio is 1.25, what is the font size at step 2?

A 1.5625rem

B 1.25rem

C 1.5rem

D 2rem

Font size = 1rem * (1.25^2) = 1.5625rem.

Why use a typography scale instead of random font sizes?

A To avoid using CSS

B To create visual harmony and hierarchy

C To increase page load speed

D To make text colorful

A scale ensures font sizes look balanced and organized.

Which Sass operator is used to raise a number to a power in scale calculations?

A //

B *

C +

D **

The '**' operator is used for exponentiation in Sass.

Describe how you would create a typography scale using Sass.

Think about starting size and how each step grows.

Explain why a consistent typography scale is important in web design.

Consider how text looks and feels on a page.

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