Webmasters Gallery

Florens Verschelde digs into the numbers behind the concept Tim Brown was talking about the other day.

When I tried wrapping my head around Tim’s implementation, and creating variants of it, I had a hard time figuring out what was going on exactly. I did a lot of back-of-the-envelope calculations, and I thought it would be useful to share a mathematical explanation.

Here’s my layman’s explanation:

1. You can make a value (like font-size) flexible with viewport units.
2. Using just viewport units, that value might be too flexible, resulting in values that are too small or too big.
3. You can “lock” the upper and lower limits with @media queries.
4. You still need a fancy calculation to calculate the “middle” values between the two “locks”.
5. The calculations can vary in complexity, especially when trying to use relative units and accommodate user font scaling.

The code ends up, in one particular example, like this:

@media (min-width: 320px) and (max-width: 959px) {
  h1 {
    font-size: calc( 1.5rem + 16 * (100vw - 320px) / (960 - 320) );
    /* For a negative slope, we have to invert the breakpoints */
    line-height: calc( 120% + 3.2 * (100vw - 960px) / (320 - 960) );
  }
}

Remember there is a PostCSS plugin.

Direct Link to Article — Permalink

The Math of CSS locks is a post from CSS-Tricks