A Walkthrough of CSS Length Units You Can Use for Font Size

Detailed explanation of CSS font size units: px, em, rem, %, vw/vh and others

CSS provides a variety of units to specify the length of attributes such as font size, each with its different uses and calculation methods. This article will explore these units in depth, including pixels (px), em units (em), rem units (rem), percentage (%) and viewport units (vw, vh, vmin, vmax), etc., and analyze their response formulas. Applications in web design.

Pixels (px)

Pixels are fixed-sized units, usually referring to individual dots on the screen. However, due to different device pixel density, the display effect of px units on different devices may be inconsistent. CSS pixels calculate sizes by reference pixels to avoid this problem. The reference pixel is defined as the viewing angle of a single pixel when the reader is one arm (about 28 inches) away from the screen on a device with a pixel density of 96dpi. This makes the size of one pixel approximately 0.26mm.

Using pixels to set font sizes is difficult to maintain and unfriendly. Changing the font of all elements in a large website will be a nightmare. In addition, users cannot adjust the font size of pixel units through the browser font size settings.

em Unit (em)

em units can avoid overwriting user preferences. The value of 1em depends on the browser's default font size (usually 16px). The em value of an element is determined by the calculated font size it inherits. For example, if an element inherits a font size of 25px, then the 2em of that element will be calculated as 50px.

em units are particularly suitable for setting the font size of related elements within independent parts of the website, such as elements within independent modules.

rem unit (rem)

rem unit solves the problem of font size inheritance of em unit. The value of 1rem is always equal to the font size of the root element, simplifying the calculation.

rem units can be used to set the font sizes of the parent container of different independent modules, so that the font sizes of all elements in the module are based on their parent elements while being independent of other modules.

Percent (%)

Percentage is similar to em units and is often used to set the font size of the root element in a responsive web design to simplify calculations.

Viewport units (vw, vh, vmin, vmax)

Viewport units allow setting the font size of different elements according to the viewport size. This eliminates the need to set different font size values ​​at multiple breakpoints. For example, 1vw is equal to 1% of the viewport width.

The disadvantage of viewport units is that at very small or very large viewport sizes, the calculated font size can make the text difficult to read. The solution is to use viewport units in combination with other units.

Other absolute units

CSS also defines many absolute units, which are less useful on the screen, but plays an important role in printing media such as points (pt) and picas (pc).

Set font size using keywords

The font size can be set using keywords, including absolute keywords (such as xx-small, x-small, small, medium, large, x-large, and xx-large) and relative keywords (larger and smaller).

Browser support

Before using these units in a production environment, make sure that the target browser has good support for it. Units such as px, em are supported in all mainstream browsers, while rem and viewport units may be poorly supported in older browsers.

Conclusion

Absolute units should be avoided as much as possible, but relative units should be used. The em unit is suitable for setting the font size of child elements in a module, and the rem unit is suitable for setting the font size of independent elements, such as the root parent element in a module. Viewport units can be used in conjunction with other units to ensure that the layout is well adapted to changes in viewport width or height.

This article has been reviewed by Tom Hodgins. Thanks to all the peer reviewers at SitePoint for getting SitePoint content to its best!

The above is the detailed content of A Walkthrough of CSS Length Units You Can Use for Font Size. For more information, please follow other related articles on the PHP Chinese website!