Fluid Typography

Consistency across all viewports and screen sizes is something us developers should heavily consider when we are building out our websites. Here’s why:

Visualization of device sizes across the globe by OpenSignal. Android on the left, Apple on the right

Android’s many screen shapes and sizes and Apple’s fantastic four are what we have to keep in mind in responsive design. Sure, that 28px header font might look great on the iPhone6, but what about all the other infinite number of devices with smaller and larger screens? This is where we might want to consider implementing fluid typography in order to support these viewports.

Fluid vs. Responsive

With such a wide range of device sizes out there, using the standard responsive techniques and setting fixed font-sizes at different breakpoints might not be enough.

Here is an example of responsive typography:

If you try resizing it, you can see the font-sizes breaking at different media queries.

On the other hand:

Fluid typography allows for the text to resize smoothly to match ANY device width.

OK. But how? Surely, it would be insane to think about having to add a media query to every device size out there.

By using viewport units and the calc() function in our CSS, we can have font-size adjust their size based on the size of the screen. So rather than always being the same size, or jumping from one size to the next at breakpoints, the font-size can be fluid.

Viewport Units refer to a percentage of the browser’s viewport dimensions.
e.g. 1 viewport width (vw) is equal to 1% of the viewport’s width.

The downside to using viewport units as a value alone on our font-size property is that it is ALWAYS relative to the viewport. So, on super small screens, we could end up with ridiculously small font-sizes.

Where calc() comes into play

We can control where the font-size stops growing/shrinking relative to our viewport by using a *little bit* of calc():

h1, h2 {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Credits to Mike Riethmuller

By plugging in values in this holy grail equation we can achieve fluidity in our typography. Efficiently, we can automate this equation by plugging these values in set mixins using SASS. Ideally we still want to use this equation at different media queries to avoid drastic shrinkage/growth of our font size.

For example:

@media (max-width: 768px) {
 
 h2.hero {
   font-size: calc(8rem + (10 - 8) * ((100vw - 481px) / (768 - 481)));
 
}
@media (max-width: 480px) {

 h2.hero {
   font-size: calc(5.2rem + (8 - 5.2) * ((100vw - 300px) / (480 - 300)));
 }

Implementing this equation in our media queries will allow for more control in terms of making font-size relative to the layout across all devices.

With wide browser support, fluid typography is definitely an intuitive option for a web in which we have a practically infinite number of screen sizes to support. It can be simply achieved without losing control over many important aspects of design, which ties back to the consistency we have to consider as developers :)

Sources:
CSS-Tricks, Smashing-Mag & CSS Poly-fluid Sizing