DEV Community

Cover image for Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, ...)
Matthias πŸ€–
Matthias πŸ€–

Posted on

Vmin CSS Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, ...)

CSS knows several measurement units. The best known unit is pixels, but there are other units that are not that popular but very handy in some uses cases.

This article covers relative units, absolute units and viewport units.

Media Recommended Occasional use Infrequent use Not recommended
Screen em, rem, % px ch, ex, vw, vh, vmin, vmax cm, mm, in, pt, pc
Print em, rem, % cm, mm, in, pt, pc ch, ex px, vw, vh, vmin, vmax

Relative units

As opposed to absolute units like pixels, points or centimeters, you can also define sizes in relative units like percentage, em or rem.
Relative units also comply with accessibility standards.
In most browsers, the default font size is 16px, you can use this value as a basis for calculations (e.g. 16px equals 1em, 1rem or 100%).

Unit Description
% percentage
em font size of the element (e.g. 2.5em means the font is 2.5 times bigger than the normal font)
rem font size of the root element of the document
ch width of the "0" character, in mono space fonts, where all characters have the same width, 1ch equals 1 character
ex x-height of the current font, measured at the height of the lower case x

What is the difference between em and rem?

The difference lies in the inheritance. The rem value is based on the root element (html). Every child element uses the html font size as their calculation basis.

em on the other hand, is based on the font size of the parent element.

rem makes the calculation of the font size much easier. With nested elements or even multiple nested elements (e.g. lists), the font size no longer has to be calculated in relation to the font size of the parent element. rem always calculates the font size in relation to the html tag.

Different font families

x-height of different font families

All fonts have the same size (18pt), but the red bar indicates, that the x-height (ex) of the fonts are different.

width of the

The fonts have the same size again (18pt). In this graphic the character width (ch) is compared. Mono space fonts have the same width for each character, whereas serif or sans-serif fonts might have different widths for each character (i is narrower than o).

Absolute units

Absolute units are fixed in its size, you can't discuss how long a centimeter is. If you have a case where the exact length is required, you should use absolute units (for example for components which should not be resized). They can also be useful if you want to define restrictions to avoid that areas become too wide or too narrow. Absolute units do not change according to screen size, direction or other variations.

Unit Description
cm centimeters 1Β cm = 1Β cm
mm millimeters 10 mm = 1 cm
in inches 1 in = 96px = 2.54 cm
px pixels 1 px = 1/96th of 1 in
pt points 1 pt = 1/72 of 1 in
pc pica 1pc = 12 pt

Viewport units

Viewport units represent a percentage of the current browser viewport.
The difference to percentage units is, that viewport units always being calculated as the percentage of the browser's viewport size. Whereas percentage units inherit the size of their parent element.

Unit Description
vw 1% of the viewport's width (50% means the half of the viewport width)
vh 1% of the viewport's height (50% means the half of the viewport height)
vmin 1% of viewport's smaller (vw or vh) dimension
vmax 1% of viewport's larger (vw or vh) dimension

vmin and vmax can change whilst the browser window is resized or the orientation of the mobile phone is changed.
vmin is the minimum between the viewport's height or width in percentage depending on which is smaller.

vmax is the maximum between the viewport's height or width in percentage depending on which is bigger.


If you like my content, you might want to follow me on Twitter?! @fullstack_to

Cover Image by William Warby on Unsplash

Top comments (24)

Collapse
 
maxart2501 profile image
Massimo Artizzu

Good one, Matthias!

These are all length units. Here's your friendly reminder that in CSS you could also measure:

  • angles (deg, rad, grad, turn);
  • time (s, ms);
  • aspect ratio (expressed as a fraction, like 16/9);
  • frequency (Hz, kHz) (but nobody has ever implemented it haha)
Collapse
 
asfo profile image
Asfo

The frequency is on "CR" (Candidate Recommendation) yet. So, not a single browser implemented this yet.

Collapse
 
maxart2501 profile image
Massimo Artizzu

And we won't see them implement it either for the foreseeable future either. Because, after reaching the CR stage in 2012, the CSS Speech Module has been largely ignored by vendors and has actually been retired last year.
So much for standards... πŸ™ƒ

Thread Thread
 
asfo profile image
Asfo

Yep haha...this one is really weird, and I think pretty useless. But well...#JustW3Things

Collapse
 
matthias profile image
Matthias πŸ€–

Thank you! πŸ™

I could not even imagine a use case for frequency πŸ€” Do you have an example?

Collapse
 
maxart2501 profile image
Massimo Artizzu

No... and nobody will have one either for a while! πŸ˜‚

But it was meant for some properties (like pitch) where a synthesized voice was involved, for screen readers and such.

And it's actually the second time a module like this gets canned. Oh well, looks like the visually impaired are fine without it 😐

Collapse
 
sebbdk profile image
Sebastian Vargr

Nice article, easy to skim through and to the point, thank you! :)

I have to admit, i still use px everywhere in practice.
Occasionally i use vh and vw for layout and such.

Someday i will get an opportunity to make or implement a system that uses proper font scaling... Or so i keep telling my self.

Collapse
 
deiga profile image
Timo Sand

A quick way to jump on the relative size bandwagon: Replace all uses of px with rem and adjust accordingly :)

Collapse
 
sebbdk profile image
Sebastian Vargr

I need to align it with teams of mixed experience already making lots of other more major mistakes, telling people to use px values is a lot easier than adding to the pile of things to learn :/

I agree tho, it’s a good way to start a migration. :)

Collapse
 
sebbdk profile image
Sebastian Vargr

Reporting back, did this.

Thank you.

Thread Thread
 
deiga profile image
Timo Sand

Nice! πŸŽ‰

Collapse
 
hozefaj profile image
Hozefa • Edited

Great post. Very well written and detailed.

On top of this, I recommend listing to syntax.fm/show/107/hasty-treat-css... episode. It covers all of the above units well. Will act to strengthen what you get from this article.

Collapse
 
matthias profile image
Matthias πŸ€–

Thank you! I always try hard to write good articles. I hope they are easy to understand as English is not my mother language.

I didn't know that there is a CSS units episode of syntax.fm. I started listening their podcast a few weeks ago.
@wesbos and @stolinski are incredible good hosts and it's fun to listen.

Collapse
 
stolinski profile image
Scott Tolinski

Thanks for the shout out!

Collapse
 
gnsp profile image
Ganesh Prasad

There is another interesting unit 'q'. 1q = 0.945px (approx.). I came across this unit while css code-golfing on cssbattle.dev .

Collapse
 
chanclidev profile image
Chanclidev

Nice article!

Brief and well explained

Collapse
 
matthias profile image
Matthias πŸ€–

Thank you so much for your feedback!

Collapse
 
mjcoder profile image
Mohammad Javed

Awesome article - thank you.

Collapse
 
matthias profile image
Matthias πŸ€–

Thank you!

Collapse
 
mayaqj profile image
mayaqj

Great post!

Collapse
 
matthias profile image
Matthias πŸ€–

Thank you!

Collapse
 
durai profile image
DURAI

hlo,i am front end developer ,woking in html ,css, js, bs .
what should add on my profile for future developement skills.

Collapse
 
weakish profile image
Jang Rush

Hello, I'd like to translate this awesome tutorial to Chinese. The translated text will be published at nextfe.com. Can you give me the permission? :-)

Collapse
 
mazonthemoon profile image
Mary Ronan

Nice one πŸ‘πŸ‘