🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

September 17, 2020

Responsive Typography

3 methods to make your typography responsive.

👴 Method 1) Old School #

The most basic approach to responsive typography is using media queries to increase your text elements' font size.

// Method 1
h1 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

@media (min-width: 48rem) {
  h1 {
    font-size: 3em;
  }
  
  p {
    font-size: 1.25em;
  }
}

🤯 Method 2) Clamp Function #

An advanced approach to responsive typography consists of using the clamp function with the CSS custom properties.

The clamp() CSS function accepts three values: the minimum value, the preferred value, and the maximum value. If your preferred value changes with the viewport width (i.e., vw units), you'll have fluid typography that adapts to the viewport size and is capped by the minimum/maximum values.

// Method 2
h1, p {
  font-size: clamp(var(--min), var(--val), var(--max));
}

h1 {
  --min: 2em; // minimum value
  --val: 5vw; // preferred value = 5% viewport width
  --max: 3em; // maximum value
}

p {
  --min: 1em;
  --val: 2.5vw;
  --max: 2em;
}

👌 Method 3) Multiplier #

CSS custom properties are excellent when it comes to updating multiple elements at once. By injecting a --text-multiplier variable into the text elements' size, you can increase/decrease them all at a specific breakpoint by editing the variable.

// Method 3
h1 {
  font-size: calc(2em * var(--text-multiplier, 1));
}

p {
  font-size: calc(1em * var(--text-multiplier, 1));
}

@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.25;
  }
}

Demo #

Here's a live demo:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us