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).