CSS Units

CSS units are used to specify the size, position, and other properties of elements on a web page using Cascading Style Sheets (CSS). There are several types of CSS units, each with its own unique properties and use cases. These units are either absolute units or relative units.

CSS units are part of the overall CSS specification that's standardized by the W3C. There's generally good support of these units from web browsers and design tools.

Designers and web developers should get familiar with these different CSS units. They should learn when to use what and follow best practices. This will lead to a code that's more maintainable, flexible, and accessible.

Discussion

  • Which are the main categories of CSS units?
    Overview of CSS units. Source: Evans 2023.
    Overview of CSS units. Source: Evans 2023.

    There are two main categories of CSS units:

    • Absolute Units: These units are fixed, regardless of the context. The most common ones are Pixels (px), Inches (in), Centimeters (cm), Millimeters (mm), Points (pt), and Picas (pc).
    • Relative Units: These units are relative to some other value, such as the font size or the dimensions of the containing element. The most common ones are Percentages (%), EM (em), REM (rem), Viewport units (vw, vh, vmin, vmax), and Ex (ex).

    It's possible to use a combination of absolute and relative CSS units to achieve complex layouts and designs. For example, a combination of percentages and pixels would create a flexible layout that maintains fixed-size margins and padding. More specifically, an element's width is in px but the height's in em to make it relative to the font size of the element. Similarly, the margin or padding could be set in px but the dimensions of the containing element is in em or rem to make it relative to the size of the container.
  • Could you explain the main CSS units?
    Illustrating viewport units vmin and vmax. Source: Kumar 2020.
    Illustrating viewport units vmin and vmax. Source: Kumar 2020.

    Pixels (px) is the most commonly used unit in CSS. A pixel is a single dot on a computer screen, and its size is dependent on the device's screen resolution.

    Percentages (%) is used to define a value relative to the parent element. For example, setting the width of a child element to 50% will make it half the width of its parent.

    EM (em) is based on the size of the font that is currently in use. For example, 1em is equal to the current font size of the element. REM (rem) is similar to EM, but it is based on the font size of the root element (typically the <html> tag), rather than the element that is currently in use.

    Viewport units are based on the size of the viewport, which is the visible area of the browser window. The two most common viewport units are vw (viewport width) and vh (viewport height). Units vmin and vmax are useful to choose the width or height, whichever is the minimum or maximum respectively.
  • As a designer, when should I use what CSS units?

    Absolute units are useful for creating fixed and precise designs. This is typical when printing to physical media. Pixels are suited for fixed-size elements, such as borders or margins, that need to be consistent across different screen sizes and resolutions.

    Relative units are useful for creating responsive designs, that is, flexible designs that can adapt to different screen sizes and resolutions. This is usually the case for web content. Percentages achieve fluid layouts that adjust to the parent container's size. Similarly, viewport units are suited for creating responsive designs that adjust to the viewport size. For example, setting the height of a hero section to 100vh will make it stretch to the height of the viewport.

    EMs are good for font sizing and other proportional values that need to scale with the element's font size. REMs help implement consistent global styles across an entire website. With REMs, just by changing the root element's font size, the font sizes across the entire website can be changed. This implies that EMs and REMs result in more maintainable code. A consistent unit system will result in code that's more maintainable.
  • Could you give accessibility guidelines for using CSS units?
    Absolute units (left and centre) are less accessible than relative units (right). Source: McMahon 2019.
    Absolute units (left and centre) are less accessible than relative units (right). Source: McMahon 2019.

    Absolute units for font sizing can make it difficult for users with visual impairments. For some, the text may be too small. For others, it may be too large. Instead, use relative units. In the figure, leftmost view is least accessible. The centre view has more readable font size but line spacing is congested. Rightmost view is most accessible. It uses unitless line height value, which plays well with CSS inheritance.

    For accessibility across different devices and platforms, create responsive designs using viewport units. Use media queries to adjust units for different devices. Test the code across different devices.

    Avoid using small text sizes. The Web Content Accessibility Guidelines (WCAG) recommends a minimum font size of 16px, or 1em for body text. Be consistent in the use of CSS units. This leads to a harmonious and stable interface that's easier to use for users with cognitive or visual impairments.
  • Which W3C standards describe CSS units?

    CSS units are defined in the W3C CSS specification, which is maintained by the World Wide Web Consortium (W3C). The current version (Feb 2023) of the CSS specification is CSS3. Here are a few essential sections to read:

    • 2.1 Lengths: Absolute and relative length units in CSS, such as pixels (px), centimeters (cm), and ems (em).
    • 5.1 Percentage values: How percentage values are used to specify lengths and other values in relation to a parent element.
    • 5.2 Font-relative lengths: the em, ex, and ch units: Font-relative length units, such as ems and exes, which are based on the font size of an element.
    • 5.3 Viewport-percentage lengths: the vw, vh, vmin, and vmax units: Viewport-percentage length units, which are based on the size of the viewport.
    • 7.1.1 The 'font-size' property: How the font-size property can be used to specify the font size of text on a web page, using units such as pixels or ems.
    • 15 Media Queries: How media queries can be used to create responsive designs that adapt to different screen sizes and resolutions, including how different CSS units can be used to create flexible and adaptive layouts.
  • What are some limitations of CSS units?

    While CSS units offer a lot of flexibility in web design, there are some limitations to keep in mind:

    • Rendering Inconsistency: Different web browsers may render CSS units differently, which can lead to inconsistencies in the way the design appears to users.
    • Old Browser Support: Some of the newer CSS units may not be supported by older web browsers, which can limit their usefulness in some cases. Fallbacks or alternative approaches would be needed for older browsers.
    • Limited Flexibility: CSS units may be inadequate for special design requirements. For example, when dealing with extremely large or small measurements, or when creating complex layouts with multiple elements, other design approaches may be necessary.
    • Inaccuracy: While relative units can be useful for creating responsive designs, they can sometimes be inaccurate, especially when cascading multiple nested elements. This can make it difficult to maintain the intended design, especially on very complex layouts. This also means that pixel-perfect designs are harder to achieve with relative units. Slight variations may appear across different devices.
  • Can you describe the units in CSS4?

    CSS4 doesn't exist as a name. In fact, even CSS3 is really many smaller modules, each of which is standardized, versioned and published in its own document. As on February 2023, the following are some proposed units for the future:

    • fr unit: Represents a fraction of the available space in a grid or flexbox layout.
    • min(), max(), and clamp() functions: Set a minimum, maximum, or range of values for a property, based on the size of the container or viewport.
    • Modular Scale units: Set font sizes and other values based on a modular scale, which is a set of predefined values that follow a specific ratio.
    • Aspect Ratio units: Set the aspect ratio of an element based on the width and height of the element.
    • CSS Units for Scroll Snap: Set scroll snap properties, such as snap positions and distances, based on units such as pixels, percentages, or fractions.
  • Can CSS units be used in SVG?

    CSS units can be used in SVG (Scalable Vector Graphics) just as they can be used in HTML documents. For example, they can be used to set the size of an SVG shape, or to position it relative to other elements in the document. However, there are some limitations.

    Some CSS units may behave differently in an SVG context compared to an HTML context. For example, the vw (viewport width) and vh (viewport height) units may not work as expected in SVG images that are embedded in a fixed-size HTML document, because the viewport size differs from the SVG image size.

    CSS units that rely on the size of the font or the text, such as em or rem, may not be as useful in SVG images that don't contain text or use custom fonts. In this case, pixels or percentages may be more suited.

    SVG-specific units, such as "pt" (points) and "mm" (millimeters), may also be used in SVG documents, but may not be as widely supported by all browsers and devices as the standard CSS units.
  • What's the formula to convert from one CSS unit to another?
    Examples of CSS unit conversions. Source: Verma 2019.
    Examples of CSS unit conversions. Source: Verma 2019.

    CSS Units Converter is an online tool to easily convert between different CSS units. For those who wish to know what happens under the hood, the following formulae may help.

    ConversionFormula
    Pixels to EMs\(em = px / fontSize \)
    Pixels to REMs\(rem = px / rootFontSize \)
    Pixels to %\( \% = (px / (containerWidth \, or \, containerHeight)) * 100% \)
    EMs to Pixels\( px = em * fontSize \)
    REMs to Pixels\( px = rem * rootFontSize \)
    Viewport Units to Pixels\( px = vw * viewportWidth / 100 \\ px = vh * viewportHeight / 100 \\ px = vmin * min(viewportWidth, viewportHeight) / 100 \\ px = vmax * max(viewportWidth, viewportHeight) / 100 \)
  • What's the browser and tool support for CSS units?

    There's good browser support for CSS units. Some older browsers such as Internet Explorer 8 don't support REMs and viewport units. The Can I Use website provides information on browser support. Absolute units (in, cm, mm, pt, pc) are widely supported but their accuracy may depend on the screen or printer resolution.

    Many design tools support the use of CSS units for designing web pages and interfaces: Adobe Photoshop, Sketch, Figma, Adobe XD, Canva, etc. Sketch supports pixels, points, and picas by default, but you can also use other units by installing plugins. WIth Figma and Adobe XD, the designer can switch units and the tool will automatically generate correct CSS code.

    Popular code editors like Visual Studio Code and Sublime Text support the use of CSS units for web design.

    Web designers and developers who wish to learn more can consult the Mozilla Developer Network CSS Units Guide. It provides an overview of each CSS unit and how to use them effectively in web development. Another resource is the CSS-Tricks Guide to Length Units in CSS. It provides an in-depth overview of each CSS unit, including examples and code snippets.

Milestones

1996

These are the early days of the web. Designers and developers are looking for ways to define and control the layout and appearance of HTML documents. CSS units originate from here. Pixels (px) represent a fixed size on the screen. Points (pt) are adopted from print design. Percentages (%) are also part of the early CSS units.

1998

Relative unit EM (em) is introduced in CSS2. In time, they become a popular choice for creating flexible, responsive designs, along with percentages.

1999

W3C publishes the first drafts of CSS3. Among the new CSS units are viewport units (vw, vh, vmin, vmax), REMs (rem) and Chars (ch). Chars are a font-relative unit, based on the width of the character "0" in the current font. They're useful for creating layouts that are proportional to the size of the text.

References

  1. Evans, Julia. 2023. "CSS units." Wizard Zines. Accessed 2023-02-17.
  2. Kumar, Pravin. 2020. "A deep study on CSS Units." Blog, Smazee, August 5. Accessed 2023-02-17.
  3. McMahon, Kathleen. 2019. "Pixels vs. Relative Units in CSS: why it’s still a big deal." 24 Accessibility, December 23. Accessed 2023-02-17.
  4. Verma, Akash. 2019. "Demystifying CSS units." On Medium, March 18. Accessed 2023-02-17.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
Avatar of user parrotGPT parrotGPT
1
0
1383
Avatar of user arvindpdmn arvindpdmn
1
1
103
DevCoins due to articles, chats, their likes and article hits are included.
2050
Words
2
Authors
2
Edits
1
Chats
2
Likes
2114
Hits

Cite As

Devopedia. 2023. "CSS Units." Version 2, February 17. Accessed 2024-06-26. https://devopedia.org/css-units
Contributed by
2 authors

Last updated on
2023-02-17 08:40:30

Improve this article

Article Warnings

  • Summary has no citations. Include at least one.
  • Discussion answers at these positions have no citations: 2, 3, 5, 6, 7, 8, 10
  • Milestones at these positions have no citations: 1, 2, 3
  • Following sections are empty: Further Reading
  • A good article must have at least 1.5 references per 200 words. This article has 0.4.
  • A good article must have at least 1.5 inline citations per 100 words. This article has 0.2.