Absolute units

CSS works with a variety of units of measurement that can help you specify the size of elements. These units can be absolute and relative. Absolute units of measurement have a fixed size. They are often used when working with text and can also be useful if you want to create an item the size of which will not change.

You have already tried using pixels in the values of some properties. Pixels are usually attributed to absolute units of measurement. In this topic, we will learn more about pixels and other absolute units.

Pixels

Pixels are used more often than any other absolute units to specify the size of elements on the web pages intended for viewing on devices.

px defines the measurement in pixels.

p {
  font-size: 16px; 
  margin: 10px;
}

In this example, the paragraph text has a font size of 16 pixels, and the margin around the paragraph is 10 pixels on all sides.

Key Characteristics:

• Precision: Pixels allow for pixel-perfect designs, offering precise control over the appearance of elements.

• Accessibility Concerns: Fixed pixel sizes may not adapt well to different screen sizes or users with visual impairments who need to enlarge text.

Usage Tips:

• Pixels are ideal for creating fixed layouts, icons, and images that must remain consistent across all devices.

• When designing for accessibility, consider using relative units like em or rem for text sizes, allowing users to adjust the size according to their needs.

Units of measurement can be specified as a whole number or in a decimal form:

p {
  font-size: 12.5px; 
  height: 150.5px;
}

Other absolute units

Besides pixels, there are other absolute units of measurement. You have probably seen or used some of them outside of CSS.

• cm defines the measurement in centimeters (1cm ~ 38px):

p {
  font-size: 10cm;
}

• mm defines the measurement in millimeters (10mm = 1cm):

p {
  font-size: 100mm; /* or 10cm */
}

• in defines the measurement in inches (1in = 2.54cm):

p {
  font-size: 4in; /* or 10.16cm */
}

• pt defines the measurement in points (1pt = 1/72 of 1in):

p {
  font-size: 288pt; /* or 10.16cm */
}

• pc defines the measurement in picas (1pc = 12pt):

p {
  font-size: 24pc; /* or 10.16cm */
}

Although centimeters, millimeters, inches, points, and picas are designed to display the elements on a web page, the browsers will not always be able to accurately calculate the physical size of the screen. This means that the elements' dimensions which are set with these units may have different dimensions on different devices. Therefore, it is best to use these units of measurement for printing web pages.

Best practices

1. Test Across Devices: If you use absolute units in your web design, test your design on different devices to ensure that it looks good and functions well across various screen sizes and resolutions.

2. Accessibility Challenges: Fixed units like pixels can make it difficult for users with visual impairments to adjust text sizes. Relative units are often more accessible, as they allow users to scale text and other elements to their preferences.

3. Inconsistent Rendering Across Devices: Absolute units may not render consistently across devices with different screen densities or resolutions. For example, a centimeter on a low-resolution screen may appear smaller than on a high-resolution screen. So, it is better to use relative units at such places.

4. Prioritize Accessibility: Always consider the accessibility implications of using absolute units. Where possible, use relative units for text and other scalable elements to ensure your design is accessible to all users.

Conclusion

Now you know the full range of absolute units of measurement in CSS. Remember that choosing a unit is not random, and different units are good for different situations. Now you will be able to create web pages for both printing and digital displays.