Responsive typography scales in SASS - Mini Project: Build & Apply

Responsive Typography Scales with Sass

📖 Scenario: You are building a simple webpage that adjusts its text size smoothly on different screen widths. This helps users read comfortably whether they use a phone, tablet, or desktop.

🎯 Goal: Create a Sass setup that defines a base font size and uses a responsive scale to adjust heading sizes smoothly between small and large screens.

📋 What You'll Learn

Use a Sass variable for the base font size

Create a Sass map for font sizes of headings (h1, h2, h3)

Use a CSS clamp() function with Sass variables to make font sizes responsive

Apply the responsive font sizes to the headings in CSS

💡 Why This Matters

🌍 Real World

Responsive typography is essential for websites to look good and be easy to read on phones, tablets, and desktops.

💼 Career

Web developers often use Sass and responsive design techniques to create flexible, user-friendly websites.

1

Set up base font size and heading sizes map

Create a Sass variable called $base-font-size and set it to 1rem. Then create a Sass map called $heading-sizes with these exact entries: h1: 2.5rem, h2: 2rem, h3: 1.5rem.

SASS

$base-font-size: 1rem;
$heading-sizes: (
  h1: 2.5rem,
  h2: 2rem,
  h3: 1.5rem
);

// Your code here

Hint

Use $base-font-size: 1rem; and a Sass map $heading-sizes with keys h1, h2, and h3.

2

Add responsive scale variables

Create two Sass variables: $min-scale set to 0.8 and $max-scale set to 1.2. These will control the minimum and maximum scale factors for font sizes.

SASS

$base-font-size: 1rem;
$heading-sizes: (
  h1: 2.5rem,
  h2: 2rem,
  h3: 1.5rem
);

// Your code here

Hint

Define $min-scale and $max-scale as numbers for scaling font sizes.

3

Create a mixin for responsive font sizes

Write a Sass mixin called responsive-font that takes a parameter $size. Inside, set font-size using the CSS clamp() function with these values: minimum is $size * $min-scale, preferred is $size, and maximum is $size * $max-scale. Use calc() and rem units properly.

SASS

$base-font-size: 1rem;
$heading-sizes: (
  h1: 2.5rem,
  h2: 2rem,
  h3: 1.5rem
);

$min-scale: 0.8;
$max-scale: 1.2;

// Your code here

Hint

Use @mixin responsive-font($size) and inside set font-size: clamp(calc(#{$size} * #{$min-scale}), #{$size}, calc(#{$size} * #{$max-scale})).

4

Apply the responsive font sizes to headings

Write a Sass @each loop that goes through $heading-sizes with variables $heading and $size. Inside the loop, create a CSS rule for #{$heading} and include the responsive-font mixin with $size as argument.

SASS

$base-font-size: 1rem;
$heading-sizes: (
  h1: 2.5rem,
  h2: 2rem,
  h3: 1.5rem
);

$min-scale: 0.8;
$max-scale: 1.2;

@mixin responsive-font($size) {
  font-size: clamp(calc(#{$size} * #{$min-scale}), #{$size}, calc(#{$size} * #{$max-scale}));
}

// Your code here

Hint

Use @each $heading, $size in $heading-sizes and inside create #{$heading} selector with @include responsive-font($size).

Practice

1. What is the main purpose of using responsive typography scales in Sass?

easy

A. To adjust font sizes smoothly based on screen width

B. To create fixed font sizes for all devices

C. To change colors based on user preference

D. To add animations to text

Solution

1. Step 1: Understand responsive typography

   Responsive typography means font sizes change smoothly to fit different screen sizes.

2. Step 2: Identify Sass role

   Sass helps calculate these sizes dynamically using functions and variables.

3. Final Answer:

   To adjust font sizes smoothly based on screen width -> Option A

4. Quick Check:

   Responsive typography = smooth font size adjustment [OK]

Hint: Responsive typography means font sizes change with screen size [OK]

Common Mistakes:

• Thinking responsive typography fixes font size
• Confusing typography with color or animation
• Assuming Sass only styles colors

2. Which Sass function is commonly used to calculate a fluid font size between a minimum and maximum value?

easy

A. calc()

B. map()

C. percentage()

D. clamp()

Solution

1. Step 1: Recall Sass functions for fluid sizes

   The clamp() function sets a value that stays between a minimum and maximum, perfect for fluid font sizes.

2. Step 2: Compare options

   calc() does math but doesn't limit values; map() handles collections; percentage() converts numbers to percentages.

3. Final Answer:

   clamp() -> Option D

4. Quick Check:

   Fluid font size uses clamp() [OK]

Hint: Clamp limits values between min and max smoothly [OK]

Common Mistakes:

• Using calc() without limits causes overflow
• Confusing map() with math functions
• Thinking percentage() controls fluid sizes

3. Given this Sass code snippet, what will be the font size on a 600px wide screen?

$min-font: 1rem;
$max-font: 2rem;
$min-screen: 320px;
$max-screen: 960px;

font-size: clamp(#{$min-font}, calc(1rem + (1vw - 3.2px) * 1.25), #{$max-font});

medium

A. 1.25rem

B. 2rem

C. 1rem

D. 1.5rem

Solution

1. Step 1: Understand clamp() usage

   Clamp limits font size between 1rem and 2rem, with a fluid middle value based on viewport width.

2. Step 2: Calculate middle value at 600px width

   Calculate 1vw = 6px; (1vw - 3.2px) = 2.8px; multiply by 1.25 = 3.5px; convert to rem (assuming 16px base) = 0.21875rem; add 1rem = 1.21875rem approx. Clamp chooses this value as it is between min and max.

3. Final Answer:

   1.25rem -> Option A

4. Quick Check:

   Font size fluid between 1rem and 2rem at 600px = 1.25rem [OK]

Hint: Calculate 1vw at screen width, then apply clamp formula [OK]

Common Mistakes:

• Ignoring clamp limits and picking max or min directly
• Miscomputing 1vw in pixels
• Confusing rem and px units

4. Identify the error in this Sass code for responsive font size:

$min-font: 1rem;
$max-font: 2rem;
font-size: clamp($min-font, calc(1rem + 1vw), $max-font);

medium

A. calc() cannot be used inside clamp()

B. Missing interpolation for variables inside clamp()

C. Variables must be declared with !default

D. clamp() requires three numeric literals only

Solution

1. Step 1: Check variable usage inside clamp()

   In Sass, variables inside CSS functions need interpolation with #{} to output correctly.

2. Step 2: Identify missing interpolation

   $min-font and $max-font are used without #{} inside clamp(), so Sass won't output their values properly.

3. Final Answer:

   Missing interpolation for variables inside clamp() -> Option B

4. Quick Check:

   Use #{} to insert variables in CSS functions [OK]

Hint: Use #{} to insert Sass variables inside CSS functions [OK]

Common Mistakes:

• Assuming calc() can't be nested in clamp()
• Thinking variables need !default always
• Believing clamp() only accepts literals

5. You want to create a responsive heading that scales from 1.2rem on small screens (320px) to 3rem on large screens (1200px). Which Sass mixin correctly implements this using clamp() and viewport width units?

hard

A. @mixin responsive-heading() {
font-size: calc(clamp(1.2rem, 1vw, 3rem));
}

B. @mixin responsive-heading() {
font-size: clamp(1.2rem, calc(1.2rem + 1vw), 3rem);
}

C. @mixin responsive-heading() {
font-size: clamp(1.2rem, calc(1.2rem + (3rem - 1.2rem) * ((100vw - 320px) / (1200 - 320))), 3rem);
}

D. @mixin responsive-heading() {
font-size: clamp(1.2rem, 3rem, calc(1.2rem + 1vw));
}

Solution

1. Step 1: Understand the formula for fluid scaling

   The font size should smoothly scale between 1.2rem and 3rem as viewport width changes from 320px to 1200px.

2. Step 2: Analyze each option

   @mixin responsive-heading() { font-size: clamp(1.2rem, calc(1.2rem + (3rem - 1.2rem) * ((100vw - 320px) / (1200 - 320))), 3rem); } uses clamp() with a calc() that linearly interpolates font size based on viewport width between min and max sizes and screen widths, which is correct. @mixin responsive-heading() { font-size: clamp(1.2rem, calc(1.2rem + 1vw), 3rem); } uses a fixed 1vw which is not precise scaling. @mixin responsive-heading() { font-size: clamp(1.2rem, 3rem, calc(1.2rem + 1vw)); } has clamp parameters in wrong order. @mixin responsive-heading() { font-size: calc(clamp(1.2rem, 1vw, 3rem)); } misuses calc() around clamp().

3. Final Answer:

   @mixin responsive-heading() { font-size: clamp(1.2rem, calc(1.2rem + (3rem - 1.2rem) * ((100vw - 320px) / (1200 - 320))), 3rem); } -> Option C

4. Quick Check:

   Correct fluid scaling uses clamp with calc interpolation [OK]

Hint: Use clamp(min, calc(min + range * vw ratio), max) for fluid sizes [OK]

Common Mistakes:

• Swapping clamp() parameters order
• Using fixed vw without scaling factor
• Wrapping clamp() inside calc() incorrectly