If you’re wondering why a guide on CSS units is even worth your time, then you’re in the right place (AViSTO 🚀).
When we think about CSS, we tend to imagine:
- That it’s unloved! Of the HTML / CSS / JavaScript trio, it’s the one that gets the least attention.
- That we refactor it (too) regularly — often blindly, with copy-paste without real understanding being an unfortunately common practice.
- That we underestimate it: its full capabilities are very rarely known, and even less often exploited.
We’ll focus on practices drawn from the development of complex web applications (industrial and SaaS). Static sites often have logic or needs that are too simple, and don’t require the same level of mastery over CSS units.
At the heart of this disinterest, units are probably one of the most underestimated issues today. On this topic, we frequently observe a mix of lack of reflection and outdated ideas that have been recycled for many years.
If it looks fine on my screen, it must be fine! FALSE
So why not dust all of this off and take a tour of what’s out there, to understand why this seemingly basic topic is actually a genuine cross-disciplinary battleground involving designers, developers, product owners, and the associated costs?
📏 Overview of the Different Units
In CSS, we find several families of length units [1]:
- Absolute units.
- Relative units.
- Percentages.
Each family contains several units and serves a specific purpose.
It’s important to understand that length units must be able to address the needs of multiple media — not just computer screens and smartphones/tablets: printing is also particularly concerned [4].
Absolute Units
They are considered constants fixed values that, for a given screen, do not change.
Typically, reading that table, you might think that most of these don’t apply to the web. And you might also wonder: “So, why use pixels and not centimetres?”
Part of the answer lies in the definition of a pixel, according to the W3C (World Wide Web Consortium):
The pixel is a unit of length that corresponds approximately to the width or height of a single dot, which can be comfortably seen by the human eye without effort, while also being as small as possible.
The challenge is therefore to have a unit that is as precise as possible despite the infinite variety of devices on which it will be displayed. We won’t go into the technical solution described by the W3C here (it would be far too long for this document), but you’ll find relevant documents in the “Sources” section at the bottom of the page [3][7].
About “pixels versus centimètres”
We therefore understand that even absolute units depend on the resolution of the screen on which they’re displayed. It is inevitable that there will be a difference between the value stated in your code and what you might be tempted to measure with a ruler, for example.
To avoid confusion, the most obvious option for digital is to go with the pixel. The exact size of a pixel will depend on the resolution of the device on which it is displayed [15].
Font-Relative Units
As the name suggests, these are relative to the font size or a character within a given font:
You may have noticed that there’s no “Name” column in our table → The reason is simple: these units are not abbreviations.
The unit ex refers to the space taken by an x, so we might expect em to work similarly, but that's not the case [12]: it's a typographic unit that defines a reference space for a given font [2].
A metal slug. The line height, c, is the predecessor of the em [10].
Viewport-Relative Units
These lengths are relative to the viewport. The viewport corresponds to the visible display area of a device. For a web browser, it’s the content of the window, not including the rest of the interface. This concept, supported by browsers since around 2012, has greatly facilitated responsive behaviour, particularly on mobile:
Most of the time, we’ll use the dynamic viewport to design interfaces suited to both desktop and mobile.
Percentages
Percentages (%) are interpreted relative to the value of the same property defined on the parent element. width will depend on the parent's width, while font-size will depend on the parent's font-size [3].
TL;DR: 99% of Cases
There are many units out there, but in practice we only use a small fraction of them in web development.
Below is a summary of the most commonly used units [6]:
Which, honestly, takes a weight off our shoulders, doesn’t it? We go from over twenty units down to just six!
That said, it’s still essential to make the right choices among those six units for almost every CSS property you use. That choice will depend on the context and the stakes of your project.
The foundations are now in place. In the next article, I’ll tackle concrete cases and perhaps even a touch of architecture.
Usefull resources
- Unités CSS : em, px, pt, cm, in. . . . (s. d.). https://www.w3.org/Style/Examples/007/units.fr.html
- Wikipedia contributors. (2025, 25 mai). Quad (typography). Wikipedia. https://en.m.wikipedia.org/wiki/Quad_(typography)
- Cascading Style Sheets, level 1. (s. d.). https://www.w3.org/TR/CSS1/#percentage-units
- Media types. (s. d.). https://www.w3.org/TR/CSS2/media.html#q7.0
- An Introduction to Cascading Style Sheets. (s. d.). https://nwalsh.com/docs/articles/css/
- Valeurs et unités CSS — Apprendre le développement web | MDN. (1970, 1 janvier). MDN Web Docs. https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Values_and_units
- Reichenstein, O. (2025, 14 mai). Responsive Typography : The Basics. iA. https://ia.net/topics/responsive-typography-the-basics
- Wikipedia contributors. (2025a, mai 12). Em (typography). Wikipedia. https://en.m.wikipedia.org/wiki/Em_(typography)
- Syntax and basic data types. (s. d.). https://www.w3.org/TR/CSS22/syndata.html#length-units
Top comments (0)