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

A minimum font size property is missing in CSS. But...