Fluid Responsive CSS Font Size

Introduction

Making Responsive Websites is not easy. Many examples are just made for just one part of the problem and seldom on the entire problem. Let me try to help, by creating this page, which is, of course, at-the-moment under construction.

Summary

Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.

Source: Smashing Magazine, 2016, Fluid Typography

Viewport

Text	Code Javascript + jQuery
Viewport units making fluid typography on the web possible. Viewport units refer to a percentage of the browser’s viewport dimensions. For example, 1 viewport width (vw) is equal to 1% of the viewport’s width. The units differ from percentages because they are always relative to the viewport, whereas a percentage is relative to the element’s parent container.	## What is viewport's height and width using JS $ console.log( "Viewport vh x vh : " + window.innerHeight + "px x " + window.innerWidth + "px" ) ## Result in (not your real viewport, just an example): Viewport vh x vh : 836px x 1638px

Viewport unit	Description
vw	Viewport width, equivalent to JS window.innerWidth
vh	Viewport height, equivalent to JS window.innerHeight
vmin	Smaller value of the viewport’s width and height
vmax	Larger value of the viewport’s width and height

Text	Code Javascript + jQuery
Easiest way to start fluid typography is to set the font-size on an html element. The root element is set to 2vw, changing the "root em". Because all em and rem units either directly are or indirectly related to the root em, they will now also be fluid.	html { font-size: 2vw; }
A heading size of 2em is now equivalent to 4vw because this is twice the current font size of 2vw. Using viewport-relative units alone comes with some drawbacks : We don’t get precise control over the rate of scale; We don’t have min or max font sizes; Just like pixels, a declaration might override the user’s font-size preferences. Luckily, there are ways to overcome all of these limitations.	h1 { font-size: 2em; }

CSS for Fluid

Text	Code Javascript + jQuery
A minimum font size property is missing in CSS, but there is workaround using the CSS calc() expression. A viewport width of 0, the font-size would be exactly 1em. As the screen gets larger, the value of 1vw would be added to the minimum font size of 1em. But this technique is not always ideal; often we want to set a minimum font size at a screen size other than zero.	html { font-size: calc(1em + 1vw); }
We can handle this using media queries In this example, the font size would become fluid once the viewport reaches a width of 50 ems. This works really well, but it usually means a jump between the fixed and fluid values. To eliminate this, we can work out the precise point at which the fluid value matches the fixed value and set a breakpoint at that viewport size. If the default font size is 16 pixels and if 2vw is 2% of the viewport’s width, then the calculation for working out the breakpoint would be 16 ÷ (2 ÷ 100). This gives us 800 pixels.	@media screen and (min-width: 50em) { html { font-size: 2vw; } }
The same calculation to work out a maximum font size. If we wanted a maximum font size of 24 pixels, we could calculate like so: 24 ÷ (2 ÷ 100) = 1200px. In ems, that would be: 1.5 ÷ (2 ÷ 100) = 75. Then, above 75 ems, we would reset the font size to a fixed value.	@media screen and (min-width: 75em) { html { font-size: 1.5em; } }
These calculations are not difficult, but I find that a table helps us to visualize the breakpoints and the rate at which fonts scale with different viewports units. The viewport unit values are across the top, and the device resolutions run down the left side of the table. Looking at this table, you can see that we have little control over the rate at which the viewport units change. Using viewport units alone, we are limited to the font sizes available in a single column of the table.	1vw 2vw 3vw 4vw 5vw 400px 4px 8px 12px 16px 20px 500px 5px 10px 15px 20px 25px 600px 6px 12px 18px 24px 30px 700px 7px 14px 21px 28px 35px 800px 8px 16px 24px 32px 40px