18px=1.125rem

To convert 18px to rem, divide by the root font size: 18 ÷ 16 = 1.125rem. Most browsers set the root font size (the font-size on the html element) to 16px by default, which means 1rem always equals 16px in a standard environment. The rem unit was designed specifically so that all relative measurements trace back to a single, predictable base — the document root — rather than cascading through nested elements.

The rem unit (root em) was introduced to CSS to solve the compounding problem with em units, which are relative to each element's parent and can stack in unexpected ways when elements are deeply nested. Using rem keeps values consistent: a declaration of 1.125rem means exactly 18px at default zoom, regardless of where that element sits in the DOM hierarchy. The WCAG accessibility guidelines recommend rem for font sizes and spacing because rem values automatically scale when a user changes their browser's base font size, ensuring the interface remains comfortable for people who rely on larger text.

Front-end developers encounter this conversion constantly when translating designs from tools like Figma, Sketch, or Adobe XD, which export measurements in pixels. A spacing value of 18px in a design file becomes 1.125rem in your CSS. Many teams define a project-level rem baseline in a design token system — if you ever change the root font size away from 16px, updating the single root declaration scales the entire layout automatically, which is why understanding this conversion is fundamental to building scalable, accessible CSS systems.