Which CSS sizes to use and when?

RazielKanos17. November 2021

3 min read

Working with CSS can be intimidating. Especially when it comes to such weird things like sizes. We know the pixel size from text programs like word. The basic size is 12 pixel -> 12xp But what would that mean in em or rem? And whats the difference? No need to worry, we got you covered!

Everything you need to know about CSS sizes

px – Pixel

Pixel are probably what you are used to, and what most people use when they build a website. Pixels are absolute, so everything you put in pixels will always be in that size, no matter the screen resolution or anything else. If you put your H1 for example to 100px it will ALWAYS show at 100px.

100px demo text

Unfortunately, this can cause some trouble if you want to have your website responsive. While smaller sizes usually work nice, you get with a large font often a very different result, just check how the demo text changes if you resize your browser window or use a smartphone.

Desktop
Smartphone

em

em is a dynamic size. You define the size of 1em (by default this is set to 16 pixel) and from there you use multipliers to resize your fonts. So 2 em would be the equal to 32px (16px x 2). You can fine tune the size with partial numbers like 1.25 or if you want to go smaller 0.95

Working with em has the benefit that some people have set a larger font size in the browsers. So if you have a very high resolution or if your eyes are bad, you might have set the basic font size to 20 instead of 16. In that case your font with 2em wouldn't be 32px anymore, but 40.

As additional confusion, the basic size of em is dictated by it's surroundings. Here is an example – Both texts are set to size 1em, but

In this container the basic font is set to 10px

The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.

and in this container the basic font is set to 20px

The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.

Both text elements have the size set to 1em, but since the containers are set to different basic font sizes they appear in different sizes.

rem – r + em

The rem size works the same as the em size, but is bound to the root element, not to it's surrounding elements. That has the benefit that a 1rem will always have the same size on your website. You dictate the roots font size in the html header, and can work on from there.

vw – view port width

The vw size is a very neat option. 1vw means 1% of the view port size – so what does that mean? the vw size is important for smartphones. If you hold your mobile upwards, you have a very narrow size, but if you turn it horizontal you have a much broader size. If you want your headers for example to still pop out on the larger screen, you can use the vw size, and the text size will change dynamically when the user turns the smartphone.

That changes completely our demo text from the beginning of the article! Wanna try? well, turn your phone or resize your browser 😀

5vw demo text

Comments

So, what is your favorite choice for your fonts?

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Hey!

Would you like to know what I am currently working on?

We use cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Click to learn more