Typography scale generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the base font size in a typography scale

In a Sass typography scale, what role does the base font size variable usually play?

A It controls the line height for all text elements.

B It sets the starting font size from which all other sizes scale proportionally.

C It specifies the font family used throughout the site.

D It defines the maximum font size allowed in the scale.

💡 Hint

Think about what 'base' means in scaling something up or down.

The base font size is the reference point for the entire scale. Other font sizes are calculated relative to it, ensuring consistent sizing.

📝 Syntax

intermediate

Correct Sass syntax for a modular scale function

Which Sass function correctly calculates a modular scale font size given a step and a ratio?

SASS

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

A

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

B

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

C

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

D

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

💡 Hint

Sass math functions require the math module and use math.pow for exponentiation.

In modern Sass, math functions like pow are accessed via the math module, so math.pow($ratio, $step) is correct.

❓ rendering

advanced

Visual output of a typography scale with negative steps

Given this Sass code snippet, what font size will be applied to the class .small-text? @use 'sass:math'; $base-size: 1rem; $ratio: 1.2; @function modular-scale($step) { @return $base-size * math.pow($ratio, $step); } .small-text { font-size: modular-scale(-2); }

A 1.2 rem

B 0.833 rem

C 0.694 rem

D 1.44 rem

💡 Hint

Calculate 1rem * (1.2 ^ -2).

Using the formula: 1rem * (1.2 ^ -2) = 1rem * (1 / 1.44) ≈ 0.694 rem.

❓ selector

advanced

Selecting headings with a typography scale in Sass

Which Sass selector correctly applies different modular scale font sizes to all heading levels h1 through h6 using a loop?

SASS

@use 'sass:math';
$base-size: 1rem;
$ratio: 1.25;
@function modular-scale($step) {
  @return $base-size * math.pow($ratio, $step);
}

A

@for $i from 1 through 6 {
  h#{$i} {
    font-size: modular-scale($i);
  }
}

B

@each $i in 1 2 3 4 5 6 {
  h#{$i} {
    font-size: modular-scale($i);
  }
}

C

@each $i in 1 2 3 4 5 6 {
  h#{$i} {
    font-size: modular-scale(6 - $i);
  }
}

D

@for $i from 1 through 6 {
  h#{$i} {
    font-size: modular-scale(6 - $i);
  }
}

💡 Hint

Heading 1 is usually the largest, so it should have the highest step.

Using @for from 1 to 6 and calculating 6 - $i assigns the largest font size to h1 and smaller sizes to higher heading numbers.

❓ accessibility

expert

Ensuring accessible typography scale with Sass

Which Sass approach best supports accessibility by maintaining readable font sizes across devices when using a modular scale?

A Use relative units like rem for base size and apply modular scale with media queries adjusting the base size.

B Use fixed pixel sizes for all font sizes to keep consistency.

C Apply modular scale only once without adjusting for different screen sizes.

D Use em units for base size and avoid media queries to keep font sizes static.

💡 Hint

Think about how users zoom or change device sizes and how font sizes should adapt.

Using rem units allows font sizes to scale with user settings. Adjusting the base size with media queries ensures readability on different devices, supporting accessibility.