Appropriate use of CSS Units
Introduction
By necessity, any stylesheets will include a combination of different units when specifying sizes of things. However, it is important to use the proper units for the proper uses.
Decision
rem
Rems are the most frequently used unit, and is usually the right answer if one of the units below do not match the use. They are relative to the base font size of the window (which should never be overridden). Use anytime you need a specific width, such as the size of the gutter around the page or between columns. Can be used to specify the minimum and maximum width of elements, such as making sure a logo does not get too big, or a card does not get too small. Use for breakpoints (now preferred to ems, since browser compatibility issues have been resolved). Useful for defining heading and paragraph font sizes.
px
No one should ever use px. They are no longer a thing, since no devices actually lock browser units to physical screen pixels. While browsers define “virtual pixels”, they are basically translating them into 1/16th of a rem, so we might as well use rems instead in most situations.
pt
No one should ever use pt. It’s only used in printing, not web development.
em
Ems should be used when the spacing should change along with the font size. A good example of this is that headings should always have a relative amount of space above them that gets bigger the bigger the heading gets. By using ems, we do not need to remember to change the absolute spacing between elements like paragraphs when the font size changes.
In addition to vertical space between elements, it should also be used for horizontal spacing between inline elements (such as placing an icon the appropriate distance from text). It should also be used for padding inside and border radius of buttons that should scale with the text. (Padding in things like inside of and between cards/columns should use rems, so everything lines up vertically down the page nicely.)
x.x
Unitless numbers are used for the line-heights of text elements. For example 1.2 for headings and 1.5 for body text for maximum readability. While usually equivalent to the em units when applied to a single element, “unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value.” [source]
%
Percentages are used to specify how much of the available space that an element should use. Almost always 100%, since things like column width are now usually specified using grids with fr units. Sometimes you might need to define a horizontal percentage using flexbox.
fr
Fractional units that allow you to define how much relative space each column in a grid should take. Used now instead of percentages, since you don’t need to account for the size of column gaps.
vh/vw
Used to size things in relation to the size of the viewport. Usually 100vw or 100vh to take up the full width, but watch out, since some OS/browser combinations include the scrollbars as part of that space, so content may overflow the window and create additional scrollbars. Sometimes vh is used as the min-height of the page so content takes up enough space to ensure that the footer is at the bottom of the screen. vw unit can be used for responsive scaling that changes based on screen width such as inside calc and clamp functions.
Other units
A bunch of offshoots of vh/vw units like dvh, lvh, svh, svb, svh, svi, svmax, svmin, svw, lvb, lvh, lvi, lvmax, lvmin, lvw, dvb, dvh, dvi, dvmax, dvmin, dvw, vi and vb. Who knows what they do and how to use them, but they are supported by most browsers.
deg, s, etc.
Used for css animations and transformations. We only use s for time length instead of ms.
Context
- Using the proper units will ensure accessibility especially as users have control over font size.
- Traditional units such as pixels are outdated and don’t make much sense because browser units no longer map on physical pixels.
- Browser support for many common units such as rems have become complete and we are no longer stuck using some units for browser support (such as ems in media queries).
- Newer units such as fr have been introduced to make relative sizing without precise percentage computations possible.
- Using the same units within a project and across projects ensures uniform code.
- Using the right units leads to less regressions and layout bugs especially as other things change.
Consequences
- When users do things like change the font size things like spacing will scale with and it will ensure the text stays legible.
- Some developers will be annoyed that they can’t use the units that they prefer and have been using for a while.
- QA needs to be inline with the ADR to ensure correct units are being used.
Exceptions
- Existing projects (more important to remain uniform within a project, so long as it isn’t creating layout bugs or accessibility issues.)
- When we use certain frameworks that might prefer different units that we should match.
Additional Resources
None