Fluid typography goes hand in hand with responsive design

Fluid typography is the idea that font-size (and in some cases, attributes of type, such as line-height) changes depending on the screen size.

The wizardry of this stems from vewport units. You can use units vh/vw (eg: font-size: 4vw;), however the size fluctuates so extremely that it is not very desireable. The easy fix for this is to specifiy a pixel font size with a vw like font-size: calc(16px + 1vw); However, while we are getting fancy here with calulations, the most common way to implement this is an equation to calculate plain english:

I want the type to go between being 16px on a 320px screen to 22px on a 1000px screen. 

 

This is the outcome of this:

html {
	font-size: 16px;
}
@media scr and (min-width: 320px){
	html {
		font-size: calc(16px + 6 * ((100vw - 320px) / 680));
	}
}
@media screen and (min-width: 1000px){
	html {
		font-size: 22px;
	}
}

What this is essentially doing is setting a minimum and maximum font size so the type will not shrink or grow to anything too extreme. "CSS locks" was a term coined by a person called Tim Brown.

Minimum and maximum you say ?! Well it so happens that functions for these have made their way into the CSS specifications in the form of min() and max()

So we can simplify our fancy setup above with a one-liner and maintain the "locks":

html {
	font-size: min(max(16px, 4vw), 22px);
}

We actually might wish to stop there because both Safari 11.1 and Chrome 79+ support this out of the box, that is as wide as support will get today. You may want to slip in a standard font-size declaration in before this to allow dor legacy browser fallabck support that do not have fancy functions.

However, as long as we are looking at pushing limits here, there is another function that simplifies this even more: clamp() Clamp takes three values min, max flex unit in the middlethat is will use in case the value is between the min and max. So, our one-line gets even smaller:

body {
	font-size: clamp(16px, 4vw, 22px);
}

This will be Chrome 79+.

Share This

Written By

MarkBaker

Mark Baker

Hello, my name is Mark Baker, Im a miserable git that lives in South Wales, UK. I love moaning about anything and everything. My go to pet moans are cyclists and politics. Im left wing and if you dont like it then dont read my stuff #SIMPLES!

Reader's Comments