Typography

Font sizes

With responsive web design, considering fluid typography is part of modern front-end development. Here’s a super fast and easy trick to calculating REM (relative units) font sizes.

First, set the root font-size of the HTML element to 62.5% like so:

html {
	font-size: 62.5%;
}

Since most browsers render 62.5% font-size at 10px, this means all of your REM font-size values will be easy to calculate on other selectors (your DIVs, Headings, Paragraphs, and so on). For example:

• 1.0rem = 10px
• 1.2rem = 12px
• 1.6rem = 16px
• 2.0rem = 20px

h4 {
	font-size: 2.0rem; /* 20px equivalent */
}

p {
	font-size: 1.0rem; /* 10px equivalent */
}

No more guessing what the equivalent PX size would be, just move the decimal place and that’s it!