Pixel vs. REM
Pixels (px) and rem values are both units of measurement used in web design and development, but they have significant differences in how they are calculated and applied.
| Feature | Pixel (px) | REM |
|---|---|---|
| Definition | Absolute unit of measurement | Relative unit of measurement based on root font size |
| Representation | Fixed size based on screen pixels | Relative to the font size of the root element |
| Flexibility | Fixed size, unaffected by user settings or screen size | Relative size, adapts to changes in font size settings |
| Responsive Design | Less flexible for responsive design | More flexible, better suited for responsive design |
| Precision | Precise and consistent | Flexible, allows for scalability and adaptability |
| Control | Provides precise control over layout | Offers more control for responsive layouts |
Based on these features we applied pixels and rems in different places:
| Variables | Pixel (px) | REM |
|---|---|---|
| Spacing | Yes | No |
| Typography | No | Yes |
Pixel to REM
| Style | Font-size (px) | Font-size (rem) | Line-height (px) | Line-height (rem) | |
|---|---|---|---|---|---|
| h1 | 27 | 1.7 | 33 | 2 | |
| h2 | 21 | 1.3 | 27 | 1.7 | |
| h3 | 18 | 1.1 | 24 | 1.3 | |
| h4 | 16 | 1 | 24 | 1.5 | |
| Root font-size | p | 16 | 1 | 24 | 1.5 |
| p small | 14 | .875 | 18 | 1.125 | |
| fineprint | 12 | .75 | 15 | .938 |