The CSS unit rem is a relative measurement for sizing page elements. By default, 1rem equals 16px, but it follows the default font size a browser user chooses in their settings. That makes rem-based sizing a more accessible alternative to fixed pixel measurements. section 3.4
To convert a pixel value, divide it by 16 when the default size is 16px. Common conversions are 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, and 48px = 3rem. You can use these conversions for font sizes and, when updating a page consistently, for padding and margins too. section 4.4 section 6.4
Convert a font size
Start with a CSS rule such as font-size: 20px;. To make that size relative to the browser's default font size, replace it with font-size: 1.25rem;. The intended default-size result remains 20px, while users' browser font-size preferences can affect the result. section 5.4
When customizing CSS, use rem deliberately:
- Replace pixel-based font sizes with their rem equivalents to make text sizing relative to browser settings. section 7.4.3
- Convert padding and margin measurements as well when you want those dimensions to scale alongside the page's text settings. section 9.6
- Keep the number and unit together: changing 24px to 1.5rem changes both the value and the measurement unit. section 12.5
A simple next step is to scan a stylesheet for px values, convert familiar values first, and check the page afterward. Begin with text sizes, then extend the same approach to spacing where it improves the layout. section 10.8 section 13.7
