In the world of web design, there was a need for a common language that could help designers and developers speak the same styling dialect. This is where CSS units, came into play. CSS units are like the measuring tape when you’re building a house, ingredients in a recipe for web design.

CSS units are crucial for specifying the size of elements on a web page. Whether you want to set the width of a div, the height of an image, or the font size of text, CSS units allow you to express these dimensions precisely. In this article, we'll go over some of the most commonly used CSS units, typography, and some new CSS viewport units.

Decoding CSS Units

We use PX, PT, EM, REM, %, VW, VH, VMIN, and VMAX as CSS units. CSS units can be classified into two categories: Absolute and Relative units. Each of them serves different purposes and use cases.

Absolute Units

Pixels (px),  points (pt), and picas (pc) fall under absolute units and can be considered as fixed units, such as px. They do not change based on the context or the size of the parent element. For example, 10px always represents the same physical size, regardless of screen resolution or the surrounding elements. They are often used when precise control over element sizes is required, such as setting the dimensions of images or specific layout elements.

Relative Units

The %, em, rem, vh, and vw are relative units. Relative values are not fixed. They are dynamic and depend on something else, like the root element's font size or the browser’s default font size. They’re suitable for creating responsive designs that adjust to different screen sizes and user preferences. Relative units are commonly used for font sizing, margins, padding, and responsive layouts.

PX

‘px’ is the easiest measurement to use. But there is a drawback. For example, when we use pixels throughout our site we implement media queries too. In this case, what happens when a user changes the default font size of his browser? Font sizes implemented with PX units will remain the same. As a result, the user’s font preferences won’t take place. Which is not a good user experience. So, using pixels for spacing and layout is fine but is not a good use for font size. ems and rems come to the rescue.

EM

'em' values are dependent on the font size of its parent element. We may experience problems when working with em units due to the effect on the inheritance of em values. As all elements inherit the font sizes of their parent, em values compound linearly as the level of nesting increases.

Example: Suppose you have a paragraph inside a <div> element, and the font size of the <div> is set to 16px, and the paragraph has a font size of 1.5em. In this case, the paragraph's font size would be 1.5 times the font size of its parent <div>, resulting in 24px (1.5 * 16px).

REM

'rem' values are dependent on the font size of the root element, Or the default font size of browsers. And if the font size of the root element isn't set, its value depends on the browser's default font size.

Example: If you set an element's font size to 2rem, it will be twice the size of the root element's font size. So, if the root element's font size is 16px, the element with 2rem font size will be 32px (2 * 16px).

Typography: Using px, rem, and em

Typography in web design involves using various CSS units like "px" (pixels), "rem" (root em), and "em" (em) to size and style text elements for optimal readability and design consistency. Each unit has its own characteristics and advantages, and understanding when to use them is essential for effective typography.

'rem' values are relative to the root font size, This means that when the root font size is 16px, a value of 1rem would be 16px. This way we can have a different root font size for a different @media query. Making it scalable for each @media query.

Since 'em' is dependent on the font size of the nearest parent, with em, we can control how the webpage scales on the modular level.

New CSS Viewport Units

Viewport units offer a straightforward way to size and position elements based on the dimensions of the viewport, providing a better user experience across a wide range of devices and screen sizes.

A few new viewport units were introduced in March 2022, like svh, lvh, dvh, svw, lvw, and dvw .

'Svh' is used for the smallest viewport height that is visible to users. The smallest possible viewport height excludes the address bar which by default is included in the VH unit.

'Lvh' is used for the largest viewport height visible to the users. It includes the address bar and other interfaces provided by the user agent.

'Dvh' reflects the current viewport height. This unit excludes the user agent's interfaces. It reflects how much vertical viewport height the user agent's interface currently covers up. For example, it will change as the user scrolls down a page on small screens because the address bar moves out of your screen.

Same as the Vh unit, We can add modifiers in VW turning them into more precise viewport units like svw, lvw, and dvw.

Final Thoughts

CSS units are the building blocks of web design, allowing designers and developers to control the size, spacing, and layout of elements on a web page. The choice of units depends on the design goals and responsiveness requirements of the project. When web designing, it's essential to strike a balance between fixed and relative units, using them strategically to achieve the desired visual aesthetics and responsiveness. If you’re looking for expert UI/UX design services, send us an email and we’ll get back to you soon!