Pixels (px)

A pixel is equal to one dot on the display device. For low resolution devices, this is equal to one literal pixel on the screen.

In CSS, 1 pixel is formally defined as 1/96 of an inch. But when that standard was originally formulated, most monitors had a DPI (dots per inch) of 96.

Screens on modern devices have higher resolutions and DPIs, so a line that’s 96 pixels long may not measure exactly 1 inch.

But it has to be said that:

• CSS pixel are logical pixels.
• Device pixels are real physical pixels.

When both sizes started to diverge? High-density screens came to laptops couple of years ago.

To understand better please consider these examples:

• The 16-inch MacBook Pro has a screen that is 3072 pixels wide but that behaves like 1792 pixels. This means that every 1.714 physical pixels act like 1 logical pixel.
• The 15.6-inch full-HD screen is 1920 pixels wide but behaves like 1536 pixels. This means that every 1.25 physical pixels act like 1 logical pixel.
• The 15.6-inch 4K screen is 3840 pixels wide but behaves, again, like 1536 pixels. This means that every 2.5 physical pixels act like 1 logical pixel.

Even though sizing in pixels can vary across devices (as showed above), it’s generally considered better to use pixels for screens. By default, the base size of type in the browser is set to 16px.

p {
  font-size: 20px;
  line-height: 28px;
}

div {
  width: 200px;
  height: 100px;
}

Density-independent pixels (dp)

dp stand for density-independent pixels. Is an abstract unit that is based on the physical density of the screen.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a ‘medium’ density screen.

The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240dpi screen, 1dp equals 1.5 physical pixels.

Using dp units is a simple solution to making the view dimensions in your layout resize properly for different screen densities. In other words, it provides consistency for the real-world sizes of your UI elements across different devices.

dp = px * 160 / dpi

MDPI   = 160dpi | on MDPI   1px   = 1dp
HDPI   = 240dpi | on HDPI   1.5px = 1dp
XHDPI  = 320dpi | on XHDPI  2px   = 1dp
XXHDPI = 480dpi | on XXHDPI 3px   = 1dp

For example, let us consider a smartphone:
If 24px to be converted to dp and if it is a smartphone screen,
developers can convert it to dp easily by the following calculation:
dp = 24 * 160 / 320 = 12dp

Screen dimension:
768x1280px resolution: 320ppi or 320dpi
Optional (screen size): 4.7in diagonal

Points (pt) Picas (pc)

Both pt (point), pc (pica) units, are rarely used. 1pt is 1/72 of an inch, making it is roughly 1.3333 pixels and 1pc is 1/6 of an inch or 12 points, making it roughly 16 pixels.

Regardless, those units are better for printing, and this might be the reason why for example you see pt much more often in Microsoft Word, then CSS.

p {
  font-size: 12pt; /* would transfer to 1pc or roughly 16px (~15,9996px to be exact) */
}

Real units (cm/mm/Q/in)

These units are well known from the real world, yet you do not see them often in the web. Nevertheless they are excellent for preparing page for printing. Because mm, cm, in are always the same, with @media print query they become a great tool for printing purposes.

(cm) Centimeters          1cm = 96px/2.54
(mm) Millimeters          1mm = 1/10th of 1cm
(Q)  Quarter-millimeters  1Q  = 1/40th of 1cm
(in) Inches               1in = 2.54cm = 96px

Ems (em)

Historically, the height of the capital letter “M”. Unit-wise it is relative to the font size, i.e. 1.5em will be 50% larger than the base computed font size.

However, ems are relative to the containing element, so if you set the type size of a ul to 0.75em, it will equal 12px. But if you nest an ul inside previous ul, the type for further ul in the nested ul will be 0.75em of the first one, in other words, 9px.

p {
  font-size: 16px;
}

ul {
  font-size: 0.75em;
}

Ems analogs (ex/cap/ch/ic)

Similar to em, ex, cap, ch and ic CSS units are relative to the font-size in the current computed font size of the element.

ex – height of a glyph ‘x’, or 50% of em unit.

cap – height of the capital letters.

ch – average character advance of a ‘0’ glyph.

ic – average character advance of a “水” glyph, (CJK water ideograph, U+6C34 glyph).

p {
  font-size: 3ex; /* 1.5em */
}

Rems (rem)

Root em. This relative unit is not affected by the size or setting of a parent element, and is instead based on the root of the document. For websites, the root of the document is the html element.

Why is it important? Let’s say we have a user who changed (in browser) root’s font-size from 16px to 24px. If we used rem, our design will scale accordingly, and our UI will be intact, hence our UX will be the same for every user. That why it makes it perfect choice for accessibility.

p {
  font-size: 1rem; /* if we didn't change root html font-size, it will be equal to 16px */
}

Percentages (%)

% units are relative units based on % scale.

When used for things like font size, percentages are relative to the containing element type size. So setting a font size of 200% of default body type would result in a font size equal to 32px.

When used for length measurements like width or margin, percentages are relative to the base containing element. So a div that is a direct child of body with a width set to 50% would have a width equal to half of the current width of the browser window.

div {
  width: 1000px;
}

div h1 {
  width: 50%; /* since parent element is 1000px, it will have 500px width */
}

Line height (lh) Root line height (rlh)

lh stands for line-height, and rlh stands for root line-height.

Same as em and rem, lh is ‘equal to the computed value of line-height’ of the element, while rlh is ‘equal to the computed value of line-height’ of the root element.

These units are for example useful for aligning icons or pseudo-element with text.

p {
  font-size: 1rlh; /* if we didn't change root html line-height, it will be roughly 1.2 */
}

Viewport width (vw) Viewport height (vh)

vw stands for viewport width and vh stands for viewport height. This means that these units depend on the screen size. Element of 50vw and 50vh will take 50% of the screen’s width and 50% of its height, regardless of screen size and resolution.

div {
  width: 50vw;  /* with 1280x800px screen div will have 640px width */
  height: 50vh; /* with 1280x800px screen div will have 400px height */
}

Viewport max (vmax) Viewport min (vmin)

vmax stands for viewport maximum (larger) dimension and vmin stands for viewport minimum (smaller) dimension.

vmin and vmax rely on the maximum width and a minimum height of the screen, or vice versa. For example, if screen size is 1280px by 800px, then 1vmax is 12.8px and 1vmin is 8px. While, if the screen is 800px by 1280px, then 1vmin is 8px and 1vmax is 12.8px.

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.

div {
  width:  50vmax; /* in 1280x800px screen, div will have 640px width */
  height: 50vmin; /* in 1280x800px screen, div will have 400px height */
}

div {
  width:  50vmax; /* in 800x1280px screen, div will have 640px width */
  height: 50vmin; /* in 800x1280px screen, div will have 400px height */
}

Viewport analogs (vb/vi)

vb stands for viewport block axis and vi stands for viewport inline axis. This means that these units are relative to the size of the initial containing block — which is itself based on the size of the viewport. Element of 50vb will take 50% of the initial contaning block and 50% of its size in the block direction, regardless of screen size and resolution. Element of 50vi will take 50% of the initial contaning block and 50% of its size in the inline direction, regardless of screen size and resolution.

What are these “inline” and “block” axes? For those languages that are written horizontally, like English or Arabic (as a right-to-left example), they’re respectively the horizontal and the vertical direction, making these two units the equivalent of vw and vh.

These units become handy in real-life scenario with vertical language writing modes, for example Japanese language being changed to horizontal writing mode like in English, with one CSS stylesheet. Though probability of actual usage in a project is infinitesimal. Thus, so far only Firefox and Safari browsers support this values.

div {
  width:  50vb; /* in Japanese writing-mode with 1280x800px screen, div will have 640px width */
  height: 50vi; /* in Japanese writing-mode with 1280x800px screen, div will have 400px height */
}

div {
  width:  50vi; /* in English writing-mode with 1280x800px screen, div will have 640px width */
  height: 50vb; /* in English writing-mode with 1280x800px screen, div will have 400px height */
}

Angle (deg/rad/grad/turn)

deg stands for degrees, rad stands for radians, grad stands for gradians and you guessed it turn stands for turns. All of them represent a part of an angle.
deg works usually in range of 0°-360°. 1rad is equal to 57,2958° equals to 180°/π. 1grad is equal to 0.9°. 1turn is equal to 360°.

div {
  transform:  rotate(45deg);    /* quarter of a circle */
  transform:  rotate(0.785rad); /* quarter of a circle */
  transform:  rotate(50grad);   /* quarter of a circle */
  transform:  rotate(0.25turn); /* quarter of a circle */
}

Resolution (dpi/ppi)

The dpi unit stands for dots per inch. The ppi unit stands for pixels per inch.

The <resolution> unit represents the size of a single “dot” in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.

A useful context for this is detecting very high resolution screens, such as Retina displays in a media query and serving up a higher resolution image.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background: url('high-resolution-img.jpg');
  }
}

• PPI
  Screens are built from a lot of small light dots, called pixels. To measure the density of pixels, we count the number of pixels that fit 1 inch, called pixels per inch (PPI).
• DPI
  Printers print color dots. To represent the density of printer dots, we count the number of dots that fit 1 inch of paper, called dots per inch (DPI).

Though manufacturers of mobile and desktop devices prefer to express their screen measurements in DPI, not PPI. But don’t let that confuse you: It is always PPI for screens and DPI for printers.

It is important to mention that the count of CSS pixels and dots in 1 inch are for both the width and the height. This means that on a screen of 96 PPI, a box with a height and width of 1 inch will have a total size of 9216 pixels (96×96 px = 9216 px).

CSS Resolution (px)     CSS PPI         CSS Inches
------------------------------------------------------
96x96                   96              1×1
141×141                 141             1×1

Fractions (fr)

There is a special sizing method which only works in CSS grid layout. This is the fr unit, a flexible length which describes a share of the available space in the grid container.

The fr unit works in a similar way to using flex: auto in flexbox. It distributes space after the items have been laid out. Therefore to have three columns which all get the same share of available space.

div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
}