I find there is often a need for a relative <i>inverse</i> relationship between screen width and the size of an element.<p>The most obvious of which is buttons. As screen width decreases the probability of the user being on a touch device increases, and you tend to want relatively larger fat-finger-friendly buttons at smaller screen sizes.<p>I guess calc() with rem sizing could work well here. But calc() always feels like cheating to me.
All those media queries!<p><pre><code> 500px ⇒ 14px
570px ⇒ 15px
620px ⇒ 16px
680px ⇒ 17px
720px ⇒ 18px
800px ⇒ 19px
860px ⇒ 20px
920px ⇒ 21px
1000px ⇒ 22px
</code></pre>
This can be simplified a lot with the vw unit. 1vw = 1% of viewport width.<p>The differences between each pixel increase in font size seem rather arbitrary: 70, 50, 60, 60, 80, 60, 60, 80. Let's simplify it, going for 14px below 500px, 22px above 1000px, and linear interpolation between widths 500px and 1000px. That way you can just use calc(). Oh, and I'll use `:root` instead of `html`, for <i>joie de vivre</i>.<p><pre><code> :root {
font-size: calc(6px + 1.6vw);
}
@media screen and (max-width: 500px) {
:root {
font-size: 14px;
}
}
@media screen and (min-width: 1000px) {
:root {
font-size: 22px;
}
}
</code></pre>
If a browser doesn't support calc() or the vw unit, it will just keep the browser's default of 16px.