Responsive typography scales in SASS

Introduction

Responsive typography scales help text look good on all screen sizes. They make sure fonts grow or shrink smoothly so reading is easy on phones, tablets, and desktops.

You want your website text to be easy to read on small phones and big monitors.

You are designing a blog or article page where headings and paragraphs should adjust size nicely.

You want consistent font sizes that change smoothly instead of jumping between fixed sizes.

You want to improve user experience by making text accessible on different devices.

Syntax

SASS

@function responsive-scale($min-size, $max-size, $min-vw, $max-vw) {
  $slope: ($max-size - $min-size) / ($max-vw - $min-vw);
  $intercept: $min-size - $slope * $min-vw;
  @return calc(#{$intercept}rem + #{$slope} * (100vw - #{$min-vw}vw));
}

// Usage example:
// font-size: responsive-scale(1, 2, 20, 75);

This function calculates a font size that changes smoothly between a minimum and maximum size.

It uses the viewport width (vw) to scale font size responsively.

Examples

Font size grows from 1rem at 20vw (viewport width) to 1.5rem at 75vw (viewport width).

SASS

$font-size-small: responsive-scale(1, 1.5, 20, 75);
body {
  font-size: $font-size-small;
}

Heading font size grows from 2rem to 3rem between small and large screens.

SASS

$font-size-large: responsive-scale(2, 3, 20, 75);
h1 {
  font-size: $font-size-large;
}

If min and max sizes are the same, font size stays fixed regardless of screen size.

SASS

$font-size-fixed: responsive-scale(1.2, 1.2, 20, 75);
p {
  font-size: $font-size-fixed;
}

Sample Program

This example uses the responsive-scale function to set font sizes for body text, headings, and paragraphs. The font sizes smoothly grow as the screen width increases from 320px to 1200px.

Try resizing the browser window to see the text size change smoothly.

SASS

@function responsive-scale($min-size, $max-size, $min-vw, $max-vw) {
  $slope: ($max-size - $min-size) / ($max-vw - $min-vw);
  $intercept: $min-size - $slope * $min-vw;
  @return calc(#{$intercept}rem + #{$slope} * (100vw - #{$min-vw}vw));
}

body {
  font-family: Arial, sans-serif;
  font-size: responsive-scale(1, 1.5, 20, 75);
  margin: 2rem;
}

h1 {
  font-size: responsive-scale(2, 3, 20, 75);
  margin-bottom: 1rem;
}

p {
  font-size: responsive-scale(1, 1.2, 20, 75);
  line-height: 1.4;
  max-width: 40rem;
}

/* Responsive container for demo */
.container {
  max-width: 90vw;
  margin: auto;
}

Important Notes

Responsive typography scales improve readability and user experience on different devices.

Time complexity is not applicable here since this is CSS/Sass calculation.

Common mistake: Using fixed font sizes without scaling can make text too small or too big on some devices.

Summary

Responsive typography scales adjust font sizes smoothly based on screen width.

Use Sass functions to calculate sizes between minimum and maximum values.

This technique helps make websites look good and readable on all devices.