DEV Community

Cover image for 15 CSS Relative units, how many do you know? em, rem, ex, cap, ch, ic...

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

Bytegasm! on August 18, 2018

If you are reading this, I'm pretty sure you know at least 5 ways of centring HTML elements using CSS. So, 15 options for relative sizing shouldn...
Collapse
 
dan503 profile image
Daniel Tonon
html {
  /* 1rem = 10px */
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}
Enter fullscreen mode Exit fullscreen mode

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
 
rainstormza profile image
Supakorn Thongtra

I personally like .625em :)

Collapse
 
bytegasm profile image
Bytegasm! • Edited

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 • Edited

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
 
mandax profile image
Anderson

Careful with vh unit. Some mobile browsers have floating toolbar and in this cases if you are using 100vh with virtual scroll, when browsers toolbar is showing your content will be pushed to bottom.

Collapse
 
ckodan profile image
Backo
Collapse
 
bytegasm profile image
Bytegasm!

Thanks, however I wish there was a fairly straight forward solution to this problem.

Collapse
 
dan503 profile image
Daniel Tonon

It sounds like maybe the vi and vb units might be the answer to that since it sounds like they are based on parent element dimensions. It's a shame they aren't supported anywhere yet.

Collapse
 
bytegasm profile image
Bytegasm!

If I had a dollar for everytime I ran into this issue..

Collapse
 
courier10pt profile image
Bob van Hoove • Edited

This is helpful, thanks :)

I often find myself using em to make a site readable on a widescreen. Something like p { max-width: 40em; line-height: 1.8em } usually does the trick. I've started using Stylus to 'fix' sites I frequent, like Wikipedia.

Pearsonified has a nice article and even a calculator to give you an indication of readable font size : line height : line width proportions.

Collapse
 
bytegasm profile image
Bytegasm!

Thanks for these amazing resources.
Stylus seems nifty.
I personally stick to rem, % and occasionally vh & vw.

Collapse
 
santosh profile image
Santosh Kumar

I always prefer rem once defining the root size in pixels.

Collapse
 
bytegasm profile image
Bytegasm!

Same. However every now and then I do end up using vw & vh too.

Collapse
 
andrewdtanner profile image
Andrew Tanner 🇪🇺

vi and vb sound interesting. If I understand correctly, you can base responsiveness on an element, rather than the viewport?

Collapse
 
bytegasm profile image
Bytegasm!

vi &vb` would be helpful for webpages in different languages.

And yes, you can base responsiveness on the parent element size by using %.

Collapse
 
mikaoelitiana profile image
Mika Andrianarijaona

I found a small typo in "So the webpages need to by styled" ->... be styled.

Collapse
 
bytegasm profile image
Bytegasm!

Thanks for pointing it out, fixed it.