Responsive Typography – min and max font-size

Setting min and max font-size via CSS

Learnings from Design Meets Code LAB: #Responsive Typography
6th June 2019 in Leipzig, Germany

font-size:
  calc(
    [minimum font size]
    + ([maximum font size] - [minimum font size])
    * (
      (100vw - [minimum viewport width])
      / ([maximum viewport width] - [minimum viewport width])
    )
  );

Example

  • minimum viewport width: 320px
  • minimum font size: 14px
  • maximum viewport width: 1600px
  • maximum font size: 24px
font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));

It's really important to skip the units in the first and last bracket.
Also make sure that the spaces are preserved.

SASS Mixin

There are also several SASS Mixins:

// @include fluid-type(
  [minimum viewport width],
  [maximum viewport width],
  [minimum font size],
  [maximum font size]
);

body {
  @include fluid-type(320px, 1600px, 14px, 24px);
}

Read More