Typography scale generation in SASS

Introduction

Typography scale helps keep font sizes consistent and balanced across a website. It makes text look nice and easy to read.

When you want headings and body text to have a clear size difference.

When designing a website that needs to look good on different screen sizes.

When you want to quickly create font sizes that follow a pattern.

When you want to keep your styles organized and easy to update.

Syntax

SASS

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

The $step is how many steps up or down the scale you want.

The $base-size is the starting font size, usually for body text.

Examples

This example shows how to get normal body text size, a bigger heading, and a smaller heading using steps.

SASS

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

body {
  font-size: typography-scale(0); // 1rem
}
h1 {
  font-size: typography-scale(3); // bigger heading
}
h6 {
  font-size: typography-scale(-1); // smaller heading
}

Using a smaller ratio (1.2) creates a gentler size difference between steps.

SASS

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

p {
  font-size: typography-scale(0); // base size
}
small {
  font-size: typography-scale(-2); // smaller text
}

You can use pixels as base size and a different ratio for a stronger scale effect.

SASS

@function typography-scale($step, $base-size: 16px, $ratio: 1.333) {
  @return $base-size * pow($ratio, $step);
}

h2 {
  font-size: typography-scale(2); // larger heading
}
caption {
  font-size: typography-scale(-3); // very small text
}

Sample Program

This code creates a simple typography scale with body text, headings, and small text. The font sizes grow or shrink by steps using the scale function.

SASS

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

body {
  font-family: Arial, sans-serif;
  font-size: typography-scale(0);
  line-height: 1.5;
  margin: 2rem;
}
h1 {
  font-size: typography-scale(4);
  margin-bottom: 1rem;
}
h2 {
  font-size: typography-scale(3);
  margin-bottom: 0.75rem;
}
p {
  font-size: typography-scale(0);
  margin-bottom: 1rem;
}
small {
  font-size: typography-scale(-2);
  color: #555;
}

Important Notes

The pow() function in Sass calculates the power of the ratio to the step.

Using a ratio between 1.2 and 1.333 is common for readable scales.

Remember to use relative units like rem for better accessibility and responsiveness.

Summary

Typography scales help keep font sizes balanced and consistent.

You create scales by multiplying a base size by a ratio raised to a step number.

Sass functions make it easy to generate these sizes dynamically.