16px to rem — The Most Common Conversion
Convert 16px to rem and understand why 16px equals exactly 1rem. Learn why 16px is the universal browser default and the foundation of CSS relative units.
Detailed Explanation
16px = 1rem
With the default browser root font size, 16px is exactly 1rem. This is the fundamental baseline that every other conversion derives from.
Why 16px Became the Standard
The 16px default dates back to the earliest graphical browsers in the 1990s. At 96 DPI screen resolution (the Windows standard), 16px was approximately 12pt — a comfortable reading size for body text. The value stuck and became the de facto standard across all browsers and operating systems.
The Identity Conversion
16 / 16 = 1rem
This means that if you never change the root font size, writing 1rem and 16px produce the same visual result. The difference is that 1rem respects user preferences while 16px does not.
Common Elements at 16px
Many default styles rely on 16px:
- Body text — The default paragraph font size
- Form inputs — Browsers render
<input>and<textarea>at 16px (iOS Safari requires at least 16px to prevent auto-zoom on focus) - List items — Default
<li>font size - Table cells — Default
<td>font size
The iOS Safari Zoom Issue
If an <input> has a font size below 16px (e.g., 14px or 0.875rem), iOS Safari automatically zooms in when the user focuses the field. Setting inputs to at least 16px (1rem) prevents this unwanted behavior. This is one of the most common reasons developers search for this conversion.
When 16px Is Not 1rem
If your project uses html { font-size: 62.5%; }, then 1rem = 10px, and 16px = 1.6rem. Always verify your project's root font size before converting.
Use Case
A mobile developer ensuring form inputs are at least 16px (1rem) to prevent iOS Safari from auto-zooming when users tap on text fields.