Absolute Units
Pixels, points, picas, inches, centimetres and millimetres have fixed conversion relationships within the CSS reference system.
Understanding CSS units
What Is a Typography Unit Converter?
A typography unit converter translates font sizes and CSS lengths between absolute, font-relative and viewport-relative units using the correct conversion context.
Relative Units
REM, EM, percentages and viewport units change according to the root font size, parent font size or viewport dimensions.
Simple process
How to Use the Typography Converter
The converted value updates automatically whenever you change a number, unit or context setting.
Enter the value
Type the font size or CSS length you want to convert into the first input.
Select both units
Choose the original unit and the destination unit, such as pixels to rem or points to pixels.
Adjust the context
Set the root font size, parent font size or viewport dimensions when converting relative units.
Conversion formulas
Common Typography Conversion Formulas
These formulas explain how frequently used typography values are converted.
Pixels to REM
REM = Pixels ÷ Root Font Size
With a 16px root font size, 24px equals 1.5rem.
REM to Pixels
Pixels = REM × Root Font Size
With a 16px root font size, 2rem equals 32px.
Pixels to EM
EM = Pixels ÷ Parent Font Size
With a 20px parent font size, 30px equals 1.5em.
Percentage to Pixels
Pixels = Percentage ÷ 100 × Parent Size
With a 16px parent size, 125% equals 20px.
Common values
Typography Unit Reference Table
The relative examples below assume a 16px root and parent font size.
| Pixels | REM | EM | Percentage | Points |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 50% | 6pt |
| 12px | 0.75rem | 0.75em | 75% | 9pt |
| 16px | 1rem | 1em | 100% | 12pt |
| 20px | 1.25rem | 1.25em | 125% | 15pt |
| 24px | 1.5rem | 1.5em | 150% | 18pt |
| 32px | 2rem | 2em | 200% | 24pt |
| 48px | 3rem | 3em | 300% | 36pt |
Choosing the right unit
When Should You Use PX, REM or EM?
Different units are useful for different design and development requirements.
Use Pixels for Precision
Pixels are useful when a design needs predictable borders, icons, small spacing values or dimensions that should remain tied to CSS pixels.
Use REM for Scalable Type
REM values scale from the root font size, making them useful for consistent typography systems, spacing scales and accessible layouts.
Use EM for Component Scaling
EM values are useful when text, padding and spacing should scale relative to a component’s font-size context.
Use Viewport Units Carefully
VW and VH can produce fluid sizes based on the browser viewport, but extreme screen sizes may require minimum and maximum limits.
Helpful answers
Frequently Asked Questions
Divide the pixel value by the root font size. With a root size of 16px, 32px divided by 16 equals 2rem.
No. One rem equals the root HTML font size. It equals 16px only when the root font size is 16px.
REM is based on the root document font size, while EM is based on the relevant local or inherited font-size context.
One CSS point equals approximately 1.333333 CSS pixels. Therefore, 12pt equals 16px.
A percentage font size is calculated relative to the inherited parent font size. For example, 125% of 16px equals 20px.
One vw equals one percent of the viewport width, while one vh equals one percent of the viewport height.
Yes. CSS defines one inch as 96 CSS pixels, so the converter can translate inches, centimetres, millimetres, points and picas into pixels.
Context note:
Relative units do not have one universal pixel value.
REM depends on the root font size, EM and font percentages
depend on the applicable font context, and viewport units
depend on the viewport dimensions.