How to implement max-font-size?

Question

I want to specify my font size using vw, as in

font-size: 3vw;

However, I also want to limit the font size to say 36px. How can I achieve the equivalent of max-font-size, which does not exist--is the only option to use media queries?

Answer 1

font-size: 3vw; means that the font size will be 3% of the viewport width. So when the viewport width is 1200px - the font size will be 3% * 1200px = 36px.

So a max-font-size of 36px can be easily implemented using a single media query to override the default 3vw font-size value.

Codepen demo (Resize Browser)

div {
  font-size: 3vw;
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>hello</div>

That being said, using viewport units for font-size in the above way is problematic because when the viewport width is much smaller - say 320px - then the rendered font size will become 0.03 x 320 = 9.6px which is very (too) small.

In order to overcome this problem, I can recommend using a technique called Fluid Type AKA CSS Locks.

A CSS lock is a specific kind of CSS value calculation where:

• there is a minimum value and a maximum value,
• and two breakpoints (usually based on the viewport width),
• and between those breakpoints, the actual value goes linearly from the minimum to the maximum.

(From this article on CSS locks which also explains the math involved in great detail.)

So let's say we want to apply the above technique such that the minimum font-size is 16px at a viewport width of 600px or less, and will increase linearly until it reaches a maximum of 32px at a viewport width of 1200px.

We could use this SASS mixin which does all of the math for us so that the CSS would look something like this:

/* 
     1) Set a min-font-size of 16px when viewport width < 600px
     2) Set a max-font-size of 32px when viewport width > 1200px and
     3) linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px 
*/

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}

// ----
// libsass (v3.3.6)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

// Usage:
// ======

// /* Single property */
// html {
//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }

// /* Multiple properties with same values */
// h1 {
//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }

////////////////////////////////////////////////////////////////////////////

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

Codepen Demo

---

Further Reading

Precise control over responsive typography

Fluid Responsive Typography With CSS Poly Fluid Sizing

Non-linear interpolation in CSS

Answer 2

Another way increases font size slowly, this will not limit max font size, but even on very wide screens, it will look better. Does not answer question in perfect way, but its 1 line...

font-size: calc(16px + 1vw);

Answer 3

Here is another idea. The calc function uses double precision float. Therefore it exhibits a step function near 1e18. For example,

width: calc(6e18px + 100vw - 6e18px);

This will snap to values 0px, 1024px, 2048px, etc. see pen https://codepen.io/jdhenckel/pen/bQNgyW

The step function can be used to create abs value and min/max with some clever maths. For instance

max(x, y) = x - (x + y) * step(y - x)

Given step(z) is zero when z<0 and one otherwise.

just an idea, not very practical, but maybe fun to try.

Answer 4

At some point, the font-size exceeds the 36px scale right, find that. Assuming, it exceeds when the width: 2048px:

@media screen and (min-width: 2048px) {
  .selector {
     font-size: 36px;
  }
}

Yes, unfortunately you need to use the @media queries. I hope that doesn't affect anything.