Marco

Posted on Sep 7 • Originally published at blog.disane.dev

Size specifications in CSS: A developer's joys and sorrows 🎨

#webdev #css #responsivedesign

A comprehensive guide to the different sizing units in CSS and their applications. Learn the pros and cons and improve your design! 🎨

CSS offers a variety of size specifications that help developers to design layouts precisely and flexibly. Choosing the right unit of measurement can make the difference between the success and failure of a design. In this article, we look at the common and lesser-known size specifications in CSS, their advantages and disadvantages and useful areas of application. We also show an interactive example that demonstrates the effects of the different units.

Pixels (px) 📏

Advantages of pixels

Pixels offer developers precise control over the layout. This is especially useful for creating design elements that require exact sizing, such as logos or icons. Pixels are constant, which means that they maintain the same size on all devices and in all browsers.

Disadvantages of pixels

Pixels are rigid and do not automatically adapt to different screen sizes. This can lead to problems, especially on high-resolution screens, where pixel-based designs can appear either too large or too small.

Applications for pixels

Logos and Icons
Fine tuning of graphic elements

Percent (%) 📊

Advantages of percent

Percentages are ideal for responsive designs, as they adapt relative to the parent element. A container that is 50% wide will take up half of the parent container, regardless of the screen size.

Disadvantages of percentages

Percentages always refer to the parent element, which can lead to unexpected results if the parent element changes its size. It can also be difficult to achieve precise distances and sizes with percentages.

Applications for percentages

Responsive layouts
Fluid layouts

Em (em) and Rem (rem) 🅴

Advantages of Em and Rem

"Em" and "Rem" are defined relative to the font size. While "em" refers to the font size of the parent element, "rem" refers to the font size of the root element. These units offer flexibility and scalability, especially in responsive designs.

Disadvantages of Em and Rem

"Em" can lead to unexpected results in nested elements, as it refers to the font size of the direct parent element. "Rem", on the other hand, is less flexible as it only refers to the root element.

Application areas for Em and Rem

Typography
Responsive Design

Viewport units: vw, vh, vmin, vmax 🌍

Advantages of viewport units

Viewport units are ideal for responsive design as they behave relative to the size of the viewport. "vw" refers to the width of the viewport, "vh" to the height. "vmin" and "vmax" are dependent on the smaller or larger dimension of the viewport.

Disadvantages of viewport units

Viewport units can lead to unpredictable results with unusually large or small viewports. They are also sometimes difficult to use with complex layouts, especially if the layout changes significantly.

Applications for viewport units

Fullscreen backgrounds
Viewport-based typography
Responsive elements, that adapt to the screen

char and ex-height: ch and ex 🅰️

Advantages-of-ch-and-ex

"ch" is based on the width of the character "0" in the current font, while "ex" is based on the height of the lowercase letter "x". These units are particularly useful for designing text boxes and other typographic elements that need to be matched to the specific font size.

Disadvantages of ch and ex

These units are highly dependent on the font used, which makes them difficult to predict. They are also less well known and therefore used less frequently, which can make it difficult for other developers to maintain projects.

Fields of application for ch and ex

Text fields and Forms
Typography-based layouts

Absolute sizes: cm, mm, in, pt, pc 📐

Advantages-of-absolute-sizes

Absolute sizes such as centimeters (cm), millimeters (mm), inches (in), points (pt) and picas (pc) provide an exact and fixed size that is independent of the screen resolution. This is particularly useful for print layouts or designs that require a precise physical size.

Disadvantages of absolute sizes

These units are less suitable in web development as they can be displayed differently on different screens. Their use can lead to inconsistent results, especially on different devices and resolutions.

Applications for absolute sizes

Print layouts
Specifically tailored designs, that require a physical size

Interactive example: Size specifications in comparison 🛠️

To better understand the differences between the various size specifications, here is an interactive example. This example shows how different elements are displayed with different sizes. Adjust the browser size and observe how the elements change!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Sizes Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .box {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .pixel {
            width: 200px;
        }
        .percent {
            width: 50%;
        }
        .em {
            width: 20em;
        }
        .rem {
            width: 20rem;
        }
        .vw {
            width: 50vw;
        }
        .vh {
            height: 30vh;
        }
        .ch {
            width: 40ch;
        }
        .ex {
            height: 10ex;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box pixel">Pixel (200px)</div>
        <div class="box percent">Percent (50%)</div>
        <div class="box em">Em (20em)</div>
        <div class="box rem">Rem (20rem)</div>
        <div class="box vw">Viewport Width (50vw)</div>
        <div class="box vh">Viewport Height (30vh)</div>
        <div class="box ch">Character height (40ch)</div>
        <div class="box ex">Ex-Height (10ex)</div>
    </div>
</body>
</html>

Overview of the sizes 📐

Size	Applications	Explanation
px (pixels)	Logos, icons, precise graphic elements	A fixed, non-scalable unit, ideal for precise layout definitions.
% (percent)	Responsive layouts, fluid layouts	Relative to the size of the parent element, ideal for flexible designs.
em	Typography, responsive design	Relative to the font size of the parent element, flexible and scalable.
rem	Typography, responsive design	Relative to the font size of the root element, scalable and consistent.
vw	Viewport-based layouts	1% of the width of the viewport, ideal for fullscreen elements.
vh	Viewport-based layouts	1% of the height of the viewport, ideal for viewport-dependent layouts.
vmin	Viewport-based layouts	1% of the smaller dimension of the viewport (width or height).
vmax	Viewport-based layouts	1% of the larger dimension of the viewport (width or height).
ch	Typography, text fields	Based on the width of the character "0" in the current font.
ex	Typography, special text layouts	Based on the height of the lowercase letter "x" in the current font.
cm (centimeters)	Print layouts, special physical sizes	Fixed physical unit, often used for print media.
mm (millimeters)	Print layouts, special physical sizes	Smaller physical unit, also used for print media.
in (inches)	Print layouts, physical sizes	1 inch = 2.54 cm, rarely used in web design, rather for print.
pt (point)	Typography, print media	1/72 inches, often used in typographic layouts and print.
pc (pica)	Typography, print media	1 pica = 12 points, specific to print typography.

This table provides a compact overview that helps you to quickly grasp the various CSS size specifications and their optimal areas of application.

Conclusion 🎯

The choice of the right unit of measurement in CSS depends heavily on the requirements for flexibility and precision. While pixels are suitable for static elements such as logos, percentages and relative units such as "em" and "rem" offer the necessary flexibility for responsive designs. Viewport units are ideal for full-screen layouts, while "ch" and "ex" serve specific typographic requirements.

To get the most out of CSS, it's important to know the strengths and weaknesses of each unit of measurement and use them according to the situation. Use the interactive example to get a feel for how the different units work in practice.

Which size units do you use most often? Share your experiences in the comments and let's discuss how we can create even better designs!

If you like my posts, it would be nice if you follow my Blog for more tech stuff.

DEV Community