Unit Converter
Convert typography values between px, rem, em, pt, and percent. Set root and parent font sizes for accurate em and rem calculations.
Unit Converter
Default browser root is 16px
Context for em and % calculations
| Unit | Value | Copy |
|---|---|---|
| Pixels | 16px | |
| Root rem | 1rem | |
| Em | 1em | |
| Points | 12pt | |
| Percent | 100% |
What this unit converter does
This unit converter translates typography values between px, rem, em, pt, and percent. Set root and parent font sizes for accurate relative unit calculations in your design system.
How to use it
Enter a numeric value in any supported typography unit.
Set the root font size (default 16px) for rem calculations.
Set the parent font size (default 16px) for em and percentage context.
Copy converted values directly into your CSS or design token files.
Read Typography Tokens for guidance on when to use each unit in production.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With a standard 16px root, 24px equals 1.5rem (24 / 16 = 1.5). Always declare html { font-size: 100%; } or 16px as your baseline.
When should I use em vs rem?
Use rem for global typography scales so sizes stay predictable and respond uniformly to browser font settings. Use em for spacing or padding that must scale proportionally with an element’s local font size, such as button padding.
Why do designers still use pt for typography?
Points (pt) are a print industry standard where 1pt equals 1/72 inch. On the web with standard 96 CSS dpi, 1pt equals 4/3 CSS pixels (1.333px). Points remain useful when coordinating web typography with print deliverables.
Related resources
Custom Type Engineering
Need a custom brand typeface or complete typography system?
Goafreet crafts bespoke Latin and Indic typefaces, authorized script extensions, and corporate font governance for modern digital brands.