Measurement Units in CSS Explained for Beginners

If you have just started your coding journey or just started to learn CSS as I have, you may wonder why there are so many different measurement units in CSS. Any beginner would be right to get confused between pixels, REMs and EMs and not know when to use which unit. This article will help you and explain all of the different types of units available in CSS and when you should use which unit.

CSS measurement units are used to size and align items on your web page. Many different units can be used in CSS, but the most common ones are pixels, rems, and ems.

How many measurement units are there in CSS

I am sure a purist would argue that there are 2 types of units in CSS, absolute units and relative units, however, on a more general level, there are many more types of units in CSS such as pixels, Percentages (%), EMs, REMs and Picas (pc) to name a few.

What are absolute measurement units in CSS

Absolute units are fixed measurements, so if you specify an element’s width as 200px, that is how wide it will be regardless of the other elements on the page.

Generally speaking, absolute units should be used when you want to maintain a fixed width or height on an element regardless of the rest of the page. For example, if you have a logo, you want to remain a set size irrespective of the page layout.

List of absolute measurement units in CSS:

1. Pixels (px),
2. Points (pt),
3. Inches (in),
4. Centimeters (cm),
5. and Millimeters (mm).

What are relative measurement units in CSS

On the other hand, relative units scale depending on the size of the parent element. So if you specify the width of an element as “1em” and the parent has a font size of 16px, then the child element will be 16px wide.

Relative units should be used when you want an element’s size to be relative to its parent, for example, if you have text that needs to be resized depending on the font size of the surrounding text.

Relative units are generally better for responsive design as they will change depending on the size of the screen; however, they can sometimes be a little harder to work with.

List of relative measurement units in CSS:

1. Percentages (%),
2. EM units,
3. REM units,
4. View height (vh) and view width (vw) units.

Absolute vs Relative, which one should I use

There is no definitive answer to this question, and it depends on the specific situation and what you are trying to achieve. In this article, we’ll take a look at the pros and cons of each type of unit, so you can make an informed decision about which is best for your website design.

When using absolute units, the element’s size is fixed regardless of the surrounding context. For example, if you set a width to be 100px, that width will be unchanged even if the page is resized. This can be useful for fixed elements like headers and footers, ensuring they always retain their correct size.

However, absolute units can be restrictive and sometimes result in awkward layouts. If you want to move an element around the page, you may struggle to find a suitable place to put it that still meets the required dimensions.

Relative units are based on the surrounding context, so they will change in size depending on the containing element’s width. For example, if you set width to be 50%, that width will be half the width of its parent element. This can be useful for responsive design, as it enables elements to resize automatically depending on the screen’s width.

However, relative units can also be problematic. If you want to create a fixed-width element, it can be tricky to get the dimensions exactly right using relative units. Additionally, if you’re not careful, you can have layout issues as different elements change size at different rates.

So, which is better?

As with most things in life, the answer to this question is it depends. Absolute units are generally more restrictive, but they can be useful for fixed elements like headers and footers. Relative units are more flexible but can be difficult to work with, specifically if you have just started your CSS Journey.

What are pixels in CSS

When it comes to commonly used, specifically by beginners, pixels would be a clear winner. Pixels are a fixed size (absolute) and are usually used to style elements with a defined width and height, such as images or videos. The problem is that we as beginners are used to the term pixels and generally understand it; because of exposure to social media and photography, we are at risk of being caught only using pixels and not using relative units, which brings us onto REMs and EMs.

Should I use EM or REM?

REMs (root ems) are based on the root element’s font size – typically the <body> element. This means that if you change the root element’s font size, all REM-based font sizes will also change.

EMs (em units), on the other hand, is based on the current font size of the element they’re applied to. If you want to change the font size of an element’s text, you only need to change the EM value – the REM value will stay the same.

So when should you use REMs, and when should you use EMs? Here are a few general guidelines:

1. Use REMs for global font sizes (e.g. the body text size), as these will be affected by the root element’s font size.
2. Use EMs for local font sizes (e.g. headings, sidebar text), as these will be unaffected by the root element’s font size.
3. If you want to be able to change the font size of an element without affecting any other elements, use EMs.
4. If you don’t mind that changing the root element’s font size will affect all other REM-based font sizes, use REMs.

If you want more flexibility and don’t mind that the font size of other elements may be affected by global changes, go with REMs. If you want more control over specific elements and don’t want the global font size to change, go with EMs.

Should I use EMs or Pixels for font size?

When it comes to font size in CSS, there are a few different measurement units that you can use: EMs, Pixels, and Rems. So, should you use EMs or Pixels, here are a few tips on when to use each unit:

1. Use Rems when you want to base the font size off of the browser’s default font size. Rems will always be relative to the parent element’s font size and will maintain a consistent font size across different devices and browsers.
2. Use EMs when you want to set specific font size, independent of the browser’s default font size.
3. Use Pixels when you want to set a specific font size and don’t want it to be relative to the browser’s default font size.

Personally, I use pixels for font size as it gives me more control over how a site will look when considering mobile optimization; however, I often use relative units when sizing objects.

Conclusion

Once you understand the basics of the different units in CSS you will understand when to use each one more appropriately. REMs are good for when you want to maintain a consistent font size across different devices and browsers, while EMs are good for when you want to set specific font size, independent of the browser’s default font size. Pixels are good for when you want to set a specific font size and don’t want it to be relative to the browser’s default font size.

Remember that using REMs or EMs for font size can cause compatibility issues with older browsers. So, if you’re targeting a wide audience, it’s best to use Pixels for font size.

It is also worth noting that all three of these units are valid for use on grid-based layouts. 

Click here to get our FREE CSS Properties Cheat Sheet for Beginners to help you on your coding journey!

Happy coding!