Convert font sizes between pixels, points, em, rem, percent and vw. Set your root font size, parent size and viewport to match your design, then copy the CSS.
Last updated:
Context
px
Browser default is 16px.
px
px
e.g. 390 phone, 768 tablet, 1440 laptop
Enter your values to see the result.
Advertisement
Advertisement
How to use the Font Size Converter
Enter the font size you have, e.g. 24.
Choose the From and To units, e.g. px to rem.
Check the context: root size for rem (16px by default), parent size for em and %, and the viewport width for vw.
Read the result and all other units in the results panel, and see the live preview.
Copy the CSS with Copy results, or download the 6–72px chart as CSV.
Font size units explained
All conversions go through CSS pixels, using these formulas (root and parent sizes in px):
px: the CSS reference pixel, 1/96 of an inch. Absolute.
pt: a typographic point, 1/72 inch. px = pt × 96 ÷ 72 (1pt = 1.3333px). Used in print and word processors.
rem: relative to the root html font size. px = rem × root.
em: relative to the parent element's font size. px = em × parent; nested em values multiply.
%: for font-size, a percentage of the parent's font size. px = % ÷ 100 × parent, so 100% = 1em.
vw: 1% of the viewport width. px = vw ÷ 100 × viewport width.
Common font sizes (16px root)
Pixels
Points
Rem / em
Percent
Typical use
10px
7.5pt
0.625rem
62.5%
fine print, legal notes
12px
9pt
0.75rem
75%
captions, labels
14px
10.5pt
0.875rem
87.5%
small UI text, table cells
16px
12pt
1rem
100%
body text (browser default)
18px
13.5pt
1.125rem
112.5%
comfortable reading text
20px
15pt
1.25rem
125%
lead paragraph, h5
24px
18pt
1.5rem
150%
h3 / h2 on mobile
32px
24pt
2rem
200%
h1 on mobile, h2 on desktop
48px
36pt
3rem
300%
large desktop headline
64px
48pt
4rem
400%
hero / display text
Practical tips
Use rem for text so your type respects the visitor's browser font setting, and px only for things that should not scale, such as hairline borders.
Fluid headings: combine units with clamp(), e.g. font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem), to grow with the screen but stay within limits.
Print and PDF: designers often specify pt. Convert to px with ×4/3 before building the web version, so 10.5pt becomes 14px.
Watch nested em: a 1.2em list inside a 1.2em container ends up at 1.44 × the parent size. Switch to rem when sizes compound unexpectedly.
Frequently asked questions
How do I convert px to pt?
Multiply pixels by 0.75. CSS defines 1px as 1/96 inch and 1pt as 1/72 inch, so 16px = 12pt and 24px = 18pt. To go from pt to px, multiply by 4/3 (1.3333).
How many pixels is 1rem?
1rem equals the root (html element) font size, which is 16px in all major browsers unless the user or your CSS changes it. So 1.5rem = 24px with the default root size.
What is the difference between em and rem?
rem is always relative to the root html font size, while em is relative to the font size of the parent element (or the element itself for properties other than font-size). Nested em values multiply, which is why rem is easier to predict.
Is 12pt the same as 16px?
Yes. 12pt × 96 ÷ 72 = 16px. That is why 12pt in a word processor and the 16px browser default look about the same size.
How is vw calculated for font sizes?
1vw is 1% of the viewport width. On a 1440px-wide screen 1vw = 14.4px, so a 48px heading is 3.3333vw. Pure vw text does not respect user zoom settings well, so many designers combine it with rem in clamp().
What is the 62.5% font size trick?
Setting html { font-size: 62.5% } makes the root 10px (62.5% of 16px), so 1.6rem = 16px and 2.4rem = 24px. Set the root to 10 in this converter to work with that setup.
Should I use px or rem for font sizes?
rem is generally recommended for text, because it scales when visitors change their browser's default font size. px values stay fixed, which can hurt accessibility for people who need larger text.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.