DEV Community

loading...
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 profile image Bytegasm! Updated on ・4 min read

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't come as a surprise to you. Let me tell you, some of them are bizarre.

The story

I saw this tweet by JavaScript Teacher, I only knew 5–7 of these properties and it gave me a massive FOMO attack. So, I decided to write this article and save your from the FOMO.

What are relative units & why do we need 'em?

Have you ever wondered that none of the screens you own have the same sizes & dimensions? But they all do display webpages. So the webpages need to be styled in a way that adapts in relative proportions to the display (or any other HTML element).

In short, making such responsive, adaptive layouts gracefully possible.

new app downloads

1. the unpredicatble em

Relative to the font-size of the current element (2em means twice the current font-size). A length property dependent on font-size, yep how magical.

.post {   
   font-size: 24px;
   border-left: 0.25em solid #4a90e2;
}

/* The border-left-width will compute to 6px. */

Working with em can get tricky as it gets it's value relatively from its parent element. In case of nested elements, it gets messy when the parent has em value too.

2. the savior rem (root em)

Just like em but relative to the font size of the root element of the document.

 

p {
    margin-left: 1rem;
}

h4 {
    font-size: 2rem;
}

/* Unlike the em, which may be different for each element, the rem is constant throughout the document */

For this technique, it is fundamental to set your base font-size, by browser default usually this is 16px.

3,4. vh and vw 

Unlike em and rem which are dependent on font size vh & vw are dependent on the size of the viewport.

1vh = 1% or 1/100th of viewport height
1vw = 1% or 1/100th of viewport width

You may have seen some sites with typography that scales beautifully as you resize your browser window, vw & vh make it happen.

5,6. vmax & vmin

Viewport max and viewport min: 1vw or 1vh, whichever is bigger or smaller respectively.

1vmax = 1% or 1/100th of the bigger value between 1vw or 1vh
1vmin = 1% or 1/100th of the smaller value between 1vw or 1vh 

7. Good'ol %

Quite popular, everyone's friend & fairly obvious % is relative to it's parent element.

.post {
  font-size: 24px;
}
.post-category {   
  font-size: 85%; 
} 
.post-title {   
  font-size: 135%; 
}
/*      
Child elements with % font sizes...      

  85%     
  0.85 * 24 = 20.4 px        
  135%     
  1.35 * 24 = 32.4 px
*/

Now let's dig into some obscure and relatively unknown ones.

8,9. Experimental vi & vb

The are experimental APIs not meant to be used in production as there .isn't any browser support.

1vb = 1% of the size of the initial containing block, in the direction of root element's block axis.
1vh = 1% of the size of the initial containing block, in the direction of root element's inline axis.

They aren't very popular or supported as they are quite new, you can dig more about them in CSS Value and Units Module Level 4.

10,11. lh & rlh

They're like em & rem but instead of font-size they depend on line-height.

lh = Equal to the computed value of the line-height property of the element on which it is used.
rlh = Equal to the computed value of the line-height property on the root element.

12. ex

The **ex** unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font. The x-height is, roughly, the height of lowercase letters such as a, c, m, or o.

13. cap

It's the measure of the so called cap-height. The spec defines cap-height as approximately equal to the **height of a capital Latin letter.

14. ch

Represents the **width of character 0, or more precisely the advance measure of the glyph "0" (zero, the Unicode character U+0030) in the element's font.

15. 'ic' ideograph count

ic is the Eastern equivalent of ch mentioned above. It is the size of the CJK (Chinese/Japanese/Korean) ideograph *水* ("water", U+6C34), so it can be roughly interpreted as "ideograph count".

Some of these are pretty strange and uncommon but I'm pretty sure each one of them have their own use-cases and reasons to exist. What are your favourite ones?

Discussion

pic
Editor guide
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! 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
courier10pt profile image
Bob van Hoove

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! Author

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

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
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
ckodan profile image
Collapse
bytegasm profile image
Bytegasm! Author

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

Collapse
bytegasm profile image
Bytegasm! Author

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

Collapse
niralmunjariya profile image
Niral Munjariya

This is helpful, thanks.

Collapse
santosh profile image
Santosh Kumar

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

Collapse
bytegasm profile image
Bytegasm! Author

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

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! Author

Thanks for pointing it out, fixed it.

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! Author

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

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