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:
- You can make a value (like
font-size) flexible with viewport units. - Using just viewport units, that value might be too flexible, resulting in values that are too small or too big.
- You can “lock” the upper and lower limits with @media queries.
- You still need a fancy calculation to calculate the “middle” values between the two “locks”.
- 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.
