# Units
- CSS Units - w3schools (opens new window)
- CSS Values and Units - MDN (opens new window)
- When to use rem vs em (opens new window)
- Understanding the Difference Between CSS Resolution and Device Resolution (opens new window)
# Absolute Units
| Unit | Description |
|---|---|
| px | pixels |
| pt | points |
| pc | picas (apc = 12 pt |
| cm | centimeters |
| mm | milimeters |
| in | inches |
In web development, you usually use px for height and width, and pt for font-size.
Pixel values (px) actual size on the screen depends on the screen of the device. It is good practice to test your website on multiple devices.
0is the same for all units
# Relative Units
| Unit | Description |
|---|---|
| em | Relative to the element’s font size (2em = 2 times the font size) |
| rem | Relative to the font size of the root element - most used! |
| vw | Relative to 1% of the viewport width |
| vh | Relative to 1% of the height of the viewport |
| % | Relative to the parent element |
- It is good practice to use em and rem a lot. It helps create good responsive websites.
- vw is also a useful unit, but has to be tested especially on small devices.
# Default Size
100%=16px, 1em=16px
← Color Typography →