The problem

The traditional way of adjusting fonts in Foundation is to set the smallest size as default, and then adjust the size upward at each breakpoint, for as many breakpoints as needed.

// declare the mobile size
h1 { font-size:1.75rem; }
// declare a new size for each breakpoint above mobile
@media screen and (min-width: 30em) {
  h1 { font-size: 2rem; } 
}
@media screen and (min-width: 45em) {
  h1 { font-size:2.25rem; }
}
@media screen and (min-width: 60em) {
  h1 { font-size:2.5rem; }
}
@media screen and (min-width: 80em) {
  h1 { font-size:3rem; }
}
// So monotonous, and still leaves you with headers 
// that are too large or small at some screen sizes

The Solution

With fluid typography, you set the min and max font size, and rely on a formula to scale gracefully from one size to the other for everything in between.

To simplify setting font sizes, we have a custom SCSS mixin called fluid-type() that does all the heavy lifting for you -- simply use it to define the smallest and largest font sizes needed for the extremes, and the name of the breakpoint where you want the largest size to lock-in.  

.h1 { 
  @include fluid-type(35px, 45px, xlarge); 
}

 

The above snippet would look at our SCSS to find the difference between our minimum content width and our maximum content width, our named breakpoints, and then it generates all this css -- setting the minimum font size, the fluid font size, and then an override to lock in the maximum font size at the named breakpoint.


h1 { 
  font-size:35px; 
  font-size: calc(35px + 10 * ( (100vw - 320px) / 1120););
}

@media min-width: 80em) {
  h1 { 
    font-size: 2.8125rem; 
  } 
}

 

When you use fluid typography, you'll want to keep the other attributes proportionate as well.

  • Set padding, margin, word-spacing, and letter-spacing using em values (as opposed to rem or pixel).
  • Set line-height as a unit-less ratio (to calculate, divide the line height by the font size, such as 60px/48px = 1.25)

The calc() formula is explained in Smashing Magazine: Fluid Typography