Convert CSS font sizes between px, pt, em, rem, vw, vh, and percent with adjustable root, parent, and viewport sizes. See how em scales from the parent and rem from the root in one table.
Overview
The CSS Typography Converter translates a font size between px, pt, em, rem, vw, vh, and percent. It lets you set the root font size, the parent font size, and the viewport size so the relative units resolve exactly as they do in your layout.
Common Use Cases
Converting design specs between px and rem for accessible styling
Matching print sizes in pt to screen sizes in px
Scaling text relative to the root font size (rem)
Checking how vw/vh values behave at a target viewport
Converting percentage-based font sizes to absolute units
Building consistent fluid typography systems
Auditing existing CSS unit usage across a project
How to Use
1
Type the font size value and pick its unit.
2
Set the root font size, parent font size, and viewport size to match your project (browser default root is 16 px).
3
Every unit updates instantly in one table; the input row is highlighted.
4
Use the Print button to export the conversion table.
Example Scenario
A 16 px body size
Enter 16 px with a 16 px root. The table shows 16 px = 12 pt = 1 em = 1 rem = 100% (of a 16 px parent) = 0.83 vw on a 1920 px viewport.
Technical Notes
Pixels are the absolute unit everything else converts through. 1 px = 1 CSS pixel, and 1 pt = 96/72 px (about 1.333 px).
em and percent scale from the parent element's font size. 1 em = parent size, 100% = parent size.
rem always scales from the root (html) font size, ignoring the parent. The browser default is 16 px.
vw and vh are 1% of the viewport width and height respectively. The results depend on the viewport size you enter.
Common Mistakes
Using rem when the intent is to scale with the parent (em)
Assuming em and rem are always equal — they differ whenever the parent and root sizes differ
Forgetting that the root can be changed by users or by CSS resets
Calculating vw from the wrong viewport width
Frequently Asked Questions
Most browsers default to 16 px. One rem equals the root font size, so 1 rem ≈ 16 px unless the root is changed.
em scales from the parent element's font size; rem scales from the root font size. They are equal only when the parent size equals the root size.
Multiply by 96/72 (about 1.333). For example, 12 pt ≈ 16 px.
vw is 1% of the viewport width, so on a 375 px phone, 100 vw is 375 px. Text sized in vw scales with the device width, which can make it too small on narrow screens.
Related Topics
CSS unitsem rem pxFluid typographyViewport unitsResponsive designFont size