A Look at Length Units in CSS

Share this article

Measuring things is as important an aspect of web design, as any other. The fact that we have at least 10 different measurement units in CSS speaks for itself.

Each unit serves its own specific purpose and makes web pages more flexible for a variety of devices. Once you become acquainted with all these units, you will be able to size your elements more precisely. In this tutorial, we will take a look at the different units that are available in CSS and I’ll discuss which units to use in which situations, and how to use them.

Absolute length units

Absolute units are a digital representation of actual measurements in the physical world. These units are not related to the size of the screen or its resolution. As a result, absolute length units are not as well suited for use on digital devices or when the resolution is not known. These units are more appropriate when you are designing for physical media such as print.

Absolute units include:

  • cm (centimeters)
  • mm (millimeters)
  • in (inches)
  • pc (picas)
  • pt (points)
  • px (pixels)

Note that the editor’s draft of the spec also includes the quarter-millimeter (q) unit, but this is new and doesn’t seem to have any browser support.

You might observe that while using absolute lengths there are differences between the same values of a particular unit on different screens. This is because of the difference in the DPI (dots per inch) for a screen. Higher resolution screens have a higher DPI compared to smaller resolution screens, thus making the image or text look smaller.

The most widely used of all absolute units is the pixel (px). A pixel is generally understood to be a single dot on the screen, although it is technically more complex than that. It is the smallest unit of measurement and usually the unit used as a benchmark for the other units.

Other units like inch, millimeter, and centimeter represent the physical size of these units. The point (pt) unit represents 1/72 of an inch and the pica (pc) represents 1/6 of an inch. Here is some CSS that makes use of the six common absolute units:

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

This CodePen demo shows the above code in action:

See the Pen Demo using different absolute units in CSS by SitePoint (@SitePoint) on CodePen.

Relative length units

Relative units, as the name suggests, don’t have fixed values. Their values are relative to some other predefined value or feature. Relative units make it easy to properly size elements since we can relate their width, height, font-size, etc. to some other base parameter.

These units are usually recommended when you creating responsive layouts and are preferred for digital media. Their value can be relative to the fonts you are using, or to the height and the width of the view window of a screen.

Relative units include:

  • ex (x-height)
  • ch (character)
  • em (named after print ems, but not the same)
  • rem (root em)

Let’s take a look at each of these in more detail.

X-height (ex) and Character (ch) units

The ex unit is rarely used in development. 1ex is equal to the size of the lowercase ‘x’ in the font being used. In most cases, the value of 1ex is nearly equal to 0.5em. However this changes from one font to another. This unit can be considered the vertical equivalent of em.

p {
  font-size: 2ex;
}

The character (ch) unit is related to the ‘0’ character. 1ch is the advance measure of the character ‘0’ in a font.

p {
  margin: 2ch;
}

Em units

The em unit has a value equal to the font size of the base element or the parent element. For instance, if the font size of parent element is 20px then the value of 1em will compute to 20px for all immediate child elements. The font size of a child element can be increased or decreased easily based on knowledge of the base unit. The number need not be a whole number.

Using em makes it easy for us to keep font sizes of various elements in a fixed ratio. For example, if the value of font-size for a parent element is 50px, setting the font size of a child element to 2em will be the same as setting it to 100px. Similarly, setting it to 0.5em will make the font size of the child element 25px.

The demo below shows a simple example of how em units work:

See the Pen Basic em unit example by SitePoint (@SitePoint) on CodePen.

Sometimes, however, em units produce undesired results in the case of nested elements. This is because the em value takes the value of the immediate parent tag, so each nested child will have the same em value, but a different computed value, because the computed value is always relative to its immediate parent. Thus it makes it difficult if we need to set the value of the current element in ratio to a parent element that is not immediate or not the root parent.

Below is a demo to show the unusual nesting effect of the em unit. For this example, we’re assuming there’s a base font size of 16px in the document (which is often the default):

See the Pen Demonstrating how em units affect nested elements by SitePoint (@SitePoint) on CodePen.

Notice the nested elements in the HTML, each with content declaring the computed font size.

Below is the CSS for this example:

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

You can see that even though the div elements are all defined at 1.15em, because they are nested, they have different actual font sizes.

Rem units

This is where the rem unit comes in handy. The value of a rem always stays equal to the font size of the root element (which is the html element in HTML documents). The rem demo is similar to that of the em units. Here is the CSS:

div {
 font-size: 1.15rem;
}

span {
 font-size: 2rem;
}

Here is a simple demo with the same nesting as the previous demo, but this time using rems:

See the Pen Basic rem unit example by SitePoint (@SitePoint) on CodePen.

Notice now the nesting is still present, but does not affect the computed font size of the nested elements.

Viewport-relative length units

Viewport-relative lengths are based on the width and height of the view window or the viewport. A view window or viewport is the visible area or the framed space on the screen.

Viewport-relative units include:

  • vh (viewport height)
  • vw (viewport width)
  • vmin (viewport minimum)
  • vmax (viewport maximum)

Viewport Height (vh) and Viewport Width (vw)

The vh unit is related to the height of the viewport. The value of vh is equal to 1/100th of the height of the viewport. This unit is useful if we want to scale elements based on the height of the browser window. For example, if the height of the viewport is 400px, 1vh equals 4px. If the viewport height is 800px, 1vh equals 8px.

Just as vh is related to the height of the window, vw units are related to the width of the viewport. The value of 1vw can therefore be deduced similarly. This means that 1vw is equal to 1/100th of the width of the viewport. For example, if the width of the window is 1200px, 1vw will be 12px. The CSS for setting the width, height, and padding of an element in viewport units is:

div {
  height: 80vh;
  width: 95vw;
  padding: 1vw;
}

View demo here

Viewport minimum (vmin) and Viewport maximum (vmax) units

The vmin unit is related to the side of the viewport with the lower value so it can be either the height or the width. The value of 1vmin is equal to 1/100th of the side with the smallest length. For example, if the dimensions of the viewport are 500 x 700 then the value of 1vmin equals 5px. If the dimensions were 1000 x 700, the value would be 7px.

Conversely, vmax takes into consideration the maximum value of the viewport. The relation factor is again 1/100, so 1vmax is 1/100th of the edge with the higher value. Taking the same examples as above, if the dimensions of the viewport are 500 x 700 then the value of 1vmax is equal to 7px. In case the dimension was 1000 x 700, the value would be 10px. This is the CSS to set width and height in vmin and vmax:

div {
  height: 80vmin;
  width: 95vmax;
  padding: 1vmax;
}

View demo here

Browser support

em, ex, px, cm, mm, in, pt, and pc
Supported in all browsers, including old IE.

ch
Firefox, Chrome 27+, IE 9+, Safari 7+, and Opera 20+.

rem
All in-use browsers including IE9+. If you need more support, here is a polyfill.

vw, vh, and vmin
Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. One thing worth remembering is that in Internet Explorer vmin is supported by the non-standard vm syntax. For a polyfill you can try vminpoly or use -prefix-free with a plugin.

vmax
Chrome 20+, Firefox 19+, and Opera 20+, and Safari 6.1+. No support in IE. You can try this polyfill for some hacky support and help with some bugs in different mobile browsers.

Conclusion

This tutorial introduced you briefly to the different measurement units available in CSS, including many of the new units that can help with responsive layouts and cross-device measurements. Have you used rem or viewport units in any projects? How was your experience? Share any tips on using these units, or any problems you’ve had, in the comments section.

Frequently Asked Questions (FAQs) about CSS Length Units

What are the different types of CSS length units?

CSS length units are used to specify the size of various elements on a webpage. There are two types of length units in CSS: absolute and relative. Absolute units are fixed and do not change their size based on any other property of the page. They include pixels (px), points (pt), picas (pc), inches (in), centimeters (cm), and millimeters (mm). Relative units, on the other hand, are relative to another length value. They include em, ex, ch, rem, vw, vh, vmin, vmax, and percentages (%).

How do I choose the right CSS length unit for my project?

The choice of CSS length unit depends on the specific requirements of your project. If you need a fixed size that does not change regardless of the screen size or font size, you should use absolute units. However, if you want your design to be responsive and adapt to different screen sizes or font sizes, you should use relative units.

What is the difference between ’em’ and ‘rem’ units in CSS?

Both ’em’ and ‘rem’ are relative units in CSS. The ’em’ unit is relative to the font-size of its closest parent element. On the other hand, ‘rem’ stands for “root em” and is relative to the root element (html), not the parent element. This means that ‘rem’ will always be consistent, regardless of the nesting level, making it easier to control the overall sizing in your CSS.

How does the ‘vw’ and ‘vh’ units work in CSS?

The ‘vw’ (viewport width) and ‘vh’ (viewport height) units in CSS are relative units that represent a percentage of the viewport’s width and height, respectively. One unit of ‘vw’ is equal to 1% of the viewport’s width, and one unit of ‘vh’ is equal to 1% of the viewport’s height. These units are particularly useful for creating responsive designs that adapt to the size of the viewport.

Can I mix different CSS length units in a single project?

Yes, you can mix different CSS length units in a single project. However, it’s important to understand how these units work and interact with each other to ensure a consistent and responsive design. For example, you might use ‘px’ for border widths, ’em’ for font sizes, and ‘vw’ for layout widths to create a design that scales well across different screen sizes.

What are the advantages of using relative units in CSS?

Relative units in CSS offer several advantages, especially in responsive design. They allow the size of elements to scale relative to each other, to the size of the viewport, or to the user’s default font size. This makes your design more flexible and adaptable to different screen sizes and user preferences.

How do I convert between different CSS length units?

Converting between different CSS length units can be complex because it depends on various factors such as the current font size, the viewport size, and the pixel density of the screen. However, there are online tools and calculators that can help you with these conversions.

What is the default font size in CSS?

The default font size in most browsers is 16px. This means that 1em or 1rem is equal to 16px by default. However, the user can change this default font size in their browser settings, which is why it’s often recommended to use relative units for font sizes.

How does pixel density affect CSS length units?

Pixel density refers to the number of pixels in a given physical area of the screen, usually measured in pixels per inch (PPI). Higher pixel density screens display more detail in the same physical space. In CSS, a pixel (px) is not a physical pixel on the screen, but a reference pixel, which is a physical unit of measure that takes into account the pixel density of the screen. This means that a length of 1px in CSS might correspond to multiple physical pixels on a high-density screen.

What is the ‘ch’ unit in CSS?

The ‘ch’ unit in CSS is a relative unit that represents the width of the “0” (zero) character of the current font. It’s useful for setting widths or margins that need to align with a certain number of characters, regardless of the actual font size.

Gajendar SinghGajendar Singh
View Author

Gajendar is a web developer with a keen interest in learning new things in web development. He has been developing websites for five years and occasionally writes tutorials on topics he feels confident about.

em unitslearn-advanced-cssLouisLrem unitsviewport units
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form