Font size with rem

suggest change

CSS3 introduces a few new units, including the rem unit, which stands for “root em”. Let’s look at how rem works.

First, let’s look at the differences between em and rem.

The main issue with using rem for font sizing is that the values are somewhat difficult to use. Here is an example of some common font sizes expressed in rem units, assuming that the base size is 16px :


html { 
  font-size: 16px; 

h1 { 
  font-size: 2rem;          /* 32px */

p { 
  font-size: 1rem;          /* 16px */ 

li { 
  font-size: 1.5em;         /* 24px */

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents