Tools
Font Size Converter
A font size converter translates between the five CSS units. Pixels are absolute. rem is relative to the root font size.em is relative to the parent element. Points are for print. Percent is relative to the parent like em, but written differently. The converter takes a base size and returns every equivalent value.
CSS Font Size Units Explained
CSS gives you several ways to write a font size. The unit you pick changes how the value behaves when the parent, the root, or the viewport changes. The MDN reference on font-size covers the full list. Below is a short, practical reference.
| Unit | Relative to | When to use it |
|---|---|---|
| px | Nothing (absolute) | Pixel-perfect mockups, thin lines, fixed UI elements. Avoid for body text. |
| rem | Root font size (html) | Body text, headings, spacing. Inherits a single scale from one source. |
| em | Parent font size | Components that scale with their container. Watch for compounding when nested. |
| pt | Print point (1/72 inch) | Print stylesheets. 1pt equals 1.333px at the standard 96dpi screen ratio. |
| % | Parent font size | Same as em, written as a percentage. 100% equals the parent font size. |
| vw, vh | Viewport width or height | Fluid typography. Always wrap in clamp() to set a floor and ceiling. |
| ch | Width of the 0 character | Measure (line length) and code blocks. 60 to 75 ch is a comfortable reading width. |
The root font size lives on the html element. The browser default is 16px. Change it once, on :root or html, and every rem in your stylesheet recalculates. Setting html { font-size: 100%; } keeps the user's browser font preference, which is a low-effort accessibility win.
Related Tools
Convert a single size, then put it in context with a modular scale, a fluid scale, or a real layout.