CSS Typography Converter

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.
Loading...
CSS Typography Conversion
px16px
pt12px
em1
rem1
vw0.833
vh1.481
%100%
em/% scale from the parent font size (16 px), rem from the root (16 px), vw/vh from the viewport (1,920×1,080 px). Browser default is 16 px.
©2026 Itung.online. Built for practical online workflows.
This site is protected by reCAPTCHA and the GooglePrivacy PolicyTerms of Serviceapply.

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

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

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