Understanding CSS Size Units
CSS units are essential for defining sizes and lengths in web design. They come in two main types: absolute and relative units
Absolute Units:
- px (pixels): The most common unit, representing a fixed size on the screen. One pixel is roughly 1/96th of an inch. Used for precise control but less flexible for responsive design.
- pt (points): Traditionally used in print, 1pt equals 1/72 of an inch. Rarely used for screen styles.
Relative Units:
- em: Relative to the font size of the current element. For example, 2em means twice the current font size. Useful for scalable typography and spacing.
- rem: Relative to the font size of the root element (usually the <html> element). Unlike em, rem is consistent across the page, making it great for uniform scaling.
- vh (viewport height): 1vh equals 1% of the viewport’s height. Useful for responsive layouts based on screen height.
- vw (viewport width): 1vw equals 1% of the viewport’s width. Useful for responsive layouts based on screen width.
- ch: Relative to the width of the “0” (zero) character in the current font. Handy for setting widths based on character count.
- ex: Relative to the x-height of the current font (height of lowercase “x”). Less commonly used but useful for fine typography adjustments.
Common CSS Unit Conversions to cm/mm
| Category | CSS Unit | Approximate Conversion |
|---|---|---|
| Absolute Units | ||
| 1 px | 0.026 cm / 0.26 mm | |
| 1 pt | 0.035 cm / 0.35 mm | |
| 1 in | 2.54 cm / 25.4 mm | |
| 1 cm | 1 cm / 10 mm | |
| 1 mm | 0.1 cm / 1 mm | |
| Relative Units | ||
| 1 em | Relative to current font size | |
| 1 rem | Relative to root font size | |
| 1 vh | 1% of viewport height | |
| 1 vw | 1% of viewport width | |
| 1 ch | Width of “0” character | |
| 1 ex | x-height of current font |
Note: These conversions are approximate and can vary slightly depending on screen resolution and device.
Choosing the right unit depends on your design goals. Absolute units give fixed control, while relative units provide flexibility and responsiveness, adapting to different screen sizes and user settings.
