CSS Length Units

Px stands for CSS pixels. You've probably heard the term and are thinking about device pixels — the smallest light blobs that make up any display picture. Those are not the pixels used in CSS — otherwise, everything would look progressively smaller with higher screen resolution.

CSS pixels are also called reference pixels. The W3C CSS specification defines a CSS pixel as the visual angle of one pixel on a device with a pixel density of 96 PPI (pixels per square inch) and a distance from the reader of an arm's length.^[1] It means that the CSS pixel dimension depends on the distance between the viewer and the display. At the same time, an element whose size is set in CSS pixels will look the same on different quality screens.

Pixels are a canonical measurement on the web because browsers handle them consistently, and other absolute length units map directly to pixels — for example, 1px=1/96in.

"In" stands for CSS inches — an absolute unit, where 1in=96px. On high-resolution devices like laser printers today, a CSS inch will be the same size as its physical dimension, and that's when inches and other absolute units are mostly used.

But how often is CSS used for creating printed media? Actually, quite often. A common use case would be when a webpage has a separate style sheet for its version for printing to make sure it's legible, and the layout doesn't change. CSS is also used to format books, catalogs, and brochures — content that may never have been designed to be a web page at all.

Cm stands for CSS centimeters. Similar to other CSS absolute units, centimeters map directly to pixels, with 1cm=96/2.54px or approximately 37.7px.

There's a lot of content created with HTML and CSS that isn't meant for the web. For example, CSS is widely used to format printed books and ebooks because HTML & CSS are handy formats to standardize and are far easier to deal with than MS Word or a desktop publishing package.

Mm means CSS millimeters, with 1mm = 1/10cm. Much like cm, mm are occasionally used when creating documents for later printing. For example, to specify the column and page dimen­sions as well as margin sizes.

Millimeters and other absolute units are not recommended for use on-screen because screen sizes vary a lot. For example, the same 60x60mm image will look different on a 24in desktop display and a 6in smartphone screen, not to mention that users look at them from different distances.

Pt stands for CSS points — the term that came to CSS from typography. In previous CSS versions, points and picas were physical units and not related to the pixel unit. However, in the current version, a point maps directly to pixels as 1pt=4/3px. This unit is prima­rily used to specify font size and line spacing in the design of web page variants suitable for printing.

Pc stands for CSS picas — another typography unit of length, with 1pc=12pt. Like points, it's primarily used for web pages for printing — for example, to specify column height or width. You can also use this and other absolute units when generating PDF or eReader formats such as EPUB and MOBI, as they are based on HTML.

A length set in percentage (%) is based on the length of the same property of the parent element. In the example, the yellow-box is the child of the purple-box. No matter how much the width of the purple-box (parent) changes, the width of the yellow-box(child) will always be 90% of that.

Percentage isn't technically a length unit, but it's similar to relative length units that specify a length relative to another length property. Percentage and relative length units are great for both screen and print media types and are the most frequently used CSS units.

Em is a relative length unit equal to the speci­fied font size. It was originally a typographic measurement based on the current typeface's capital letter M.^[2] A measurement of 1em is defined by the font-size of the element. In the example, we have a parent element purple with the declaration font-size: 16px;, and its child yellow with font-size: 1.5em;, which means that the child element's font size will be 24px.

Keep in mind that em units multiply upon themselves when applied to the font-size property. For example, if we create a child element inside yellow and set its font-size to 1.5em, the actual font size will be 16 x 1.5 x 1.5 = 36px.

Em allows speci­fying a variety of typo­gra­phic para­me­ters like spacing, kerning or tracking, so they're propor­tional to the font size used.

Rem stands for root em, and it's another rela­tive unit based on font size. Unlike em, it doesn't refer to a direct parent, but the font size of the entire HTML docu­ment. For this reason, it is a good prac­tice to define the font size for the whole web page and then refer to this value using rem. In contrast to em, even in complex struc­ture, rem doesn't require many calcu­la­tions as it's not affected by inheritance as em units are.

The rem unit acts as an em on the entire docu­ment scale. On web pages, setting an element's dimensions in rem allows you to scale the font size with JavaScript. When construc­ting scalable macro­-ty­po­graphic schemes, rem is used to maintain specific proportions of the font size of indi­vi­dual elements, the spacing between them and the line spacing.

Ex is a relative length unit that refers to the x-he­ight of a given font — the height of a lowercase x. As you can probably guess, it's another length unit that came to CSS from typography.^[3] Although rarely used, ex is helpful in the area of micro­ty­po­graphy — for example, to determine the posi­tion of super­script and subscript charac­ters. The x-he­ight can be a refe­rence point for control­ling the size of icons or bullets used in the text or to size inline images to fit the x-height of the current font for visual harmony.

Ch (stands for character) is a relative length unit equal to the width of the character 0 in a font. There aren't many use cases for this value. It's used to style monospace text or braille,^[4] justify the nume­rical values in the table, or specify the text section's width in forms.

Vw stands for viewport width — a percentage of the full width of the browser window. 1vw resolves to 1% of the current viewport width. For example, if the viewport is 50cm wide, 1vw=1/2cm.

The difference between % and vw is most similar to the difference between em and rem. A % length is relative to the containing element width, while a vw length is relative to the full width of the browser window.

It's become very popular to use viewport units for responsive typography – establishing font sizes that grow and shrink depending on the current viewport size.

Vh stands for viewport height — a percentage of the full viewport height, where 1vh is 1% of the current viewport height. This unit is useful when sizing boxes that adapt to different window sizes. For example, you can use vh to set a maximum height of an image so that it does not exceed the viewport dimensions. There are other use cases as well.^[5]