loading...

Discussion on: 15 CSS Relative units, how many do you know? em, rem, ex, cap, ch, ic...

Collapse
dan503 profile image
Daniel Tonon
html {
  /* 1rem = 10px */
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}

Now 1rem = 10px for easy unit conversions and the default font size of the site remains at the expected default of 16px. 😁

It also still allows font scaling since it doesn't involve px units.

Collapse
bytegasm profile image
Bytegasm! Author

Neat. I've seen a lot of devs prefer this. However, I've personally gotten used to 16px.

Here's the article from 2004 where this technique was first introduced.

Collapse
dan503 profile image
Daniel Tonon

Ok if you really must use px units for fonts then please install this postcss npm plugin into your build process

npmjs.com/package/postcss-pxtorem

Using px units on any font setting on your site is an instant WCAG AA accessibility fail.

w3.org/TR/UNDERSTANDING-WCAG20/vis...

Same goes for things like vw in font size settings. It should be combined with rem in a calc function to ensure that text is still able to be resized.

Collapse
rainstormza profile image
Supakorn Thongtra

I personally like .625em :)