Fluid Typography

When the term responsiveness first entered the vocabulary of marketers and web designers, we used it to describe the future of email and website design. Web designers in particular were faced with a big challenge - creating websites that provided mobile, tablet and desktop users with a website that not only fit their screens but delivered an enjoyable experience.

Responsiveness is not a new trend, but it is a very important one. User experience is a primary factor in how Google rate your site and whether or not it will appear in search results. It’s so important to Google that they provide a free consultation service.

Even for those who have made efforts to make their websites responsive, there’s still work to be done to provide a better visitor experience. But what really has changed is the definition of what term “all devices” actually means.

A few years ago, when someone said ‘responsive on all devices’ it probably meant 3 devices:

• Desktop
• Tablet
• Smart phone

While these are the 3 most commonly described device types, we must be aware that our website visitors may be viewing our site on a wide variety of screen sizes from large apple macs to lightweight laptops with smaller screens. Technology continues to advance and we must be prepared for new and exciting device types such as wearable tech and VR.

Lets focus on one element of responsive design - text. As you switch from one device to another, the font size on the website must change. But, how do you achieve it? Simple: when coding the website, you define different font size in pixels (px) for different size of the display screen.

When you open the website on your 9 inch tablet, the font size will jump to a smaller size.

But what about the 7’’ or 12’’ tablets? Will the font size stay the same? Here we’re approaching the concept of fluid typography.

Imagine the great variety of devices and screen sizes not only among the different brands but also various models of the same brand of phones, tablets or laptops, not to forget the big TV screens.

You’d agree with me when I say that defining the font size for each of those devices would be impossible.

In fact, it would be crazy if anyone even tried to do it. That is why some clever minds came up with fluid typography, so that fonts can resize on their own. How? By defining relative font size based on actual screen size.

Instead of defining the exact font size, you can use REM units, which are relative to the font size of the root element (sounds complicated but bear with us we’ll try not to put you to sleep (little REM pun? No. Okay let's keep going).

Most browsers have default value of font size 16px so that we can read text easily. So using REM, if you want to have 16px font on your website, you say that your font size is 1rem. You can also use this to change your font size relatively e.g. 0.75rem (12px) or larger size or 1.25rem (20px) etc.

EM units work similarly, you define your own base font size for all other font size calculations.You can read more about EM units here.

REM and EM units are often used in jumping typography. You can create nice, responsive websites with them, but the transition from smaller font size to a bigger one (and vice-versa) won’t be as smooth as it could be with even more relative units like Vh and Vw.

Vh stands for viewport height and Vw for viewport width. So instead of looking at the root font size in the browser as you would in REM and EM units, the ideal font size is calculated based on the height and width of the screen you’re displaying your website on. Now this is some next level AI-style hocus pocus!  

To use Vh and Vw you just need to define the biggest and the smallest font size you want to make sure the font is easy to read in all cases and you get a website with a truly fluid typography. Ta-da! Happy website visitors. Plus you get to look like a future-proofing website optimizing genius.

So if you’re about to create a new website, look deeper into the code and find out how the font size is defined. Jumping typography will make sure your site is responsive.

But, if you want to get ready for the future, go for the Vh and Vw font size units. When your website uses the fluid typography, it’ll always look neat and will be legible.

This is a guest post by JarinkaBalcova, experienced marketer and WordPress enthusiast at Ait-Themes.club. Ait Themes is a web developer company with 9+ years of experience on the market and 85k happy customers worldwide. Main niche are multilingual WordPress Themes. Specializing also in directory & listings WordPress Themes and advanced plugins.