In web design, choosing the right unit for your text and spacing is the difference between a broken site and a professional one.
Pixels (px):A static, fixed unit. If you set text to 16px, it stays 16px regardless of the user's settings.
Ems (em):A relative unit. It is based on the font size of the parent element.
Percent (%):Similar to em, it is relative to the parent element's size.
The Rule of Thumb: In most browsers, the default font size is 16px. Therefore, 1em = 100% = 16px.
To calculate ems from pixels, you use a simple math formula:
em = target pixels /parent pixelsExample: If your body font is 16px and you want a heading to be 24px:
24 / 16 = 1.5emUse this table on your LearnHTML site as a cheat sheet for your students.
| Pixels (px) | Ems (em) | Percent (%) |
|---|---|---|
| 10px | 0.625em | 62.5% |
| 12px | 0.75em | 75% |
| 14px | 0.875em | 87.5% |
| 16px | 1.0em | 100% |
| 18px | 1.125em | 112.5% |
| 20px | 1.25em | 125% |
| 24px | 1.5em | 150% |
| 32px | 2.0em | 200% |
Accessibility: If a user increases their browser's font size for better reading, em units will scale up automatically. px units will stay tiny.z
Responsiveness: It is much easier to resize a whole website for mobile if the layout is built with relative units.