Unit Converter
Convert typography values between px, rem, em, pt, and percent. Set root and parent font sizes for accurate em and rem calculations.
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 value in any supported unit.
- Set the root font size (default 16px) for rem calculations.
- Set the parent font size for em calculations when needed.
- Copy converted values into your CSS or design tokens.
- Read Typography Tokens for when to use each unit in production.
For deeper context, read the Typography Tokens chapter in the Typography Master guide.
Frequently asked questions
- How do I convert px to rem?
- Divide the pixel value by the root font size. With a 16px root, 24px equals 1.5rem. Always define 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. Use em for spacing relative to the current element's font size, such as button padding that scales with label text.
- Why do designers still use pt for typography?
- Points (pt) are a print industry standard where 1pt equals 1/72 inch. On the web, px and rem replaced pt for screen work, but pt remains useful when coordinating with print deliverables.