Fluid Typography
Fluid typography has long been something I've wanted to implement in my projects. There's never been an elegant way of going about doing this though.
To achieve fluid typography, you typically need to use some obsucre combination of media queries and css calc() like this:
html {
font-size: 16px;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 1000px) {
html {
font-size: 22px;
}
}
This works, and works quite well. It scales the font-size from a minimum of 16px (at a 320px viewport) to a maximum of 22px (at a 1000px viewport)
Writing this, however, is both cumbersome and annoying. It forces the developer to decide on screen sizes and and uses "magic numbers" liberally.
Fear not... There's a better way. clamp().
If you're reading this article on a desktop device, you may have noticed that the typography is suspiciously large.
Try resizing the window, and you'll see the font-size scale accordingly.
I've implemented the following code on this specific page, to make the typography fluid
.fluid-text {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
CSS clamp() takes 3 values. A minimum value, a preferred value, and a maximum allowed value.
The clamp() CSS function simply clamps a value between the minimum and maximum value.
You can play around with an example on Codepen:
See the Pen css clamp() by Tristan White (@triss90) on CodePen.
Browser support
As of the writing of this article, CSS clamp() isn't supported in Safari, Internet Explorer and a number of other mobile browsers.
So, we're probably stuck with the bloated method above, for the foreseeable future.