CSS (Cascading Style Sheets) is a language used to style and layout web pages. One of the most important concepts in CSS is the use of units to specify measurements such as length, width, and font size. In this article, we will discuss the different types of units available in CSS and how they are used to create a consistent and visually appealing design.

Absolute Units

Absolute units are fixed units of measurement that do not change based on the user's device or screen size. The most common absolute units used in CSS are pixels (px), inches (in), centimeters (cm), and millimeters (mm).

/* Setting the width of an element to 200 pixels */
div {
  width: 200px;
}

/* Setting the font size of text to 12 points */
p {
  font-size: 12pt;
}

Relative Units

Relative units are units of measurement that are relative to the user's device or screen size. The most common relative units used in CSS are em, rem, and vh/vw.

/* Setting the font size of text to 1.5 times the parent element's font size */
p {
  font-size: 1.5em;
}

/* Setting the height of an element to 50% of the viewport height */
div {
  height: 50vh;
}

Viewport Units

Viewport units are a special type of relative unit that is based on the size of the user's viewport (the visible area of the browser window). The most common viewport units used in CSS are vh (viewport height) and vw (viewport width).

/* Setting the width of an element to 50% of the viewport width */
div {
  width: 50vw;
}

/* Setting the height of an element to 100vh */
div {
  height: 100vh;
}

Pixels (px)

Pixels are the most common unit of measurement used in web design. One pixel is equal to one dot on the user's screen. Pixels are a fixed unit of measurement and do not change based on the user's device or screen size.

/* Setting the width of an element to 200 pixels */
div {
  width: 200px;
}

/* Setting the font size of text to 12 pixels */
p {
  font-size: 12px;
}

EM units

EM units are a relative unit of measurement that is based on the font size of the parent element. One em is equal to the font size of the parent element. For example, if the parent element's font size is 16 pixels, then 1 em is equal to 16 pixels.

/* Setting the font size of text to 1.5 times the parent element's font size */
p {
  font-size: 1.5em;
}

REM units

REM units are similar to EM units but are based on the font size of the root element (usually the HTML element) instead of the parent element. This makes it easier to create a consistent design across a website or application.

/* Setting the font size of text to 1.2 times the root element's font size */
p {
font-size: 1.2rem;
}

Percent

Another common unit in CSS is percent (%). This unit is used to specify a measurement as a percentage of the parent element's width or height. For example, if you want an element to take up 50% of the width of its parent element, you would use width: 50%. It's important to note that using percent for height may not always work as expected, as it depends on the parent element having an explicitly defined height.

/* Setting the width element to 1/2 of their parent */
div {
  width: 50%;
}

Ch

The ch unit is a relatively new CSS unit that is used to set the font size relative to the width of the character "0" in the current font. This unit is particularly useful when working with monospace fonts, as it ensures that all characters in a monospace font are the same width.

p {
  font-size: 2ch;
}

p {
  font-size: 2ch;
  font-size: 2rem;
}

Traditional Units

We can also use more traditional units on web pages such as centimeters. Note, I would not recommend using these for web designs, but rather perhaps for prints or non-web design-related CSS. That is because browsers and devices determine the definitions of these based on their own definitions of pixel density, which makes things very complicated.

Please note that these units are not widely used in web design as they are based on physical measurements and do not take into account the variations in pixel density across different devices and screens. It is recommended to use relative units such as em, rem, vh, vw, and % for web design as they are based on the size of the viewport and adapt to different screen sizes.

In conclusion, understanding and utilizing the different types of units available in CSS is essential for creating a visually appealing and responsive design. By using a combination of absolute and relative units, and utilizing media queries, you can ensure that your website or application looks great on any device and screen size. Additionally, using REM units for font size allows for greater consistency and ease of maintenance across your entire website or application. It is always important to test your design on different devices and screen sizes to ensure that it looks great and functions well for all users.