Font Size Calculator
A font size in every CSS unit that can be converted: rem, em and % at your root and parent sizes, px and the absolute units, and vw, vh, vmin and vmax at your viewport.
The size
A unit typed with the number, as 1.25rem, moves to the menu.
What the relative units are relative to
For rem. In px, or as a % of the browser default, as 62.5%.
For em and %: the font size of the element's parent.
For vw, vmin and vmax, in CSS pixels.
For vh, vmin and vmax, in CSS pixels.
In every unit
16px = 1rem at a 16px root.
The preview is 16px.
| Unit | Value and arithmetic | Copy |
|---|---|---|
| Relative to the root and the parent | ||
| rem | 1rem16px ÷ 16px root | |
| em | 1em16px ÷ 16px parent | |
| % | 100%16px ÷ 16px parent × 100 | |
| Absolute | ||
| px | 16pxas entered | |
| pt | 12pt16px × 72 ÷ 96 | |
| pc | 1pc16px ÷ 16 | |
| in | ≈0.1667in16px ÷ 96 | |
| cm | ≈0.4233cm16px × 2.54 ÷ 96 | |
| mm | ≈4.2333mm16px × 25.4 ÷ 96 | |
| Q | ≈16.9333Q16px × 101.6 ÷ 96 | |
| Relative to the viewport | ||
| vw | ≈1.1111vw16px ÷ 1440px × 100 | |
| vh | ≈1.7778vh16px ÷ 900px × 100 | |
| vmin | ≈1.7778vmin16px ÷ 900px × 100 | |
| vmax | ≈1.1111vmax16px ÷ 1440px × 100 | |
CSS font size units explained
rem is a multiple of the root (html) element's font size. In font-size, em and % are shares of the parent's size, so they compound when nested. The absolute units are fixed multiples of the CSS pixel: 1in is 96px, 1pt is 1/72in and 1cm is 96/2.54px, so 12pt is exactly 16px, and on a screen they need not match a ruler. vw and vh are 1% of the viewport's width and height, and vmin and vmax 1% of its shorter and longer side.
For a size that grows with the viewport between a minimum and a maximum, use the CSS Clamp Calculator. For a list of px and rem pairs, try the px to rem Converter, and for lengths other than font sizes, the CSS Unit Converter.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Converting a size from a design file in px to the rem a stylesheet uses, at the root size that site actually sets.
- Checking what an em or % size comes to inside a parent with its own font size, before nesting it one level deeper.
- Seeing what Tailwind's text-xs to text-9xl come to at a root other than 16px, such as a 62.5% root.
- Turning a point size from a print or Word specification into px and rem, where 12pt is exactly 16px.
- Finding how many vw a size is at a given viewport width, as a starting point for a fluid size between two breakpoints.
- Pasting a font-size declaration from DevTools, unit and all, to see the same size in every other unit.
How it works in practice
A worked example
Your stylesheet sets html { font-size: 62.5% } so that 1rem is 10px. You need a 24px heading in rem, and want to know what Tailwind's text-base comes to beside it.
Font size 2.4rem Root 62.5% Parent 16px Viewport 1440 × 900px
2.4rem = 24px at a 10px root. Root 10px, parent 16px, viewport 1440 × 900px rem 2.4rem em 1.5em % 150% px 24px pt 18pt pc 1.5pc in 0.25in cm 0.635cm mm 6.35mm Q 25.4Q vw ≈1.6667vw vh ≈2.6667vh vmin ≈2.6667vmin vmax ≈1.6667vmax
A 62.5% root is 62.5% of the browser's default size, 10px at the usual 16px, so 2.4rem is 24px. The em and % depend on the heading's parent instead: in a 16px parent, 24px is 1.5em or 150%. The absolute units depend on none of it, because CSS fixes 1in at 96px, so 24px is 18pt, 0.25in or 0.635cm on every page. The viewport units are shares of the window, and 24px is 1.6667% of 1440px only after rounding, which is why those rows carry a ≈. The trick's cost shows in the Tailwind buttons: text-base is 1rem, which at this root is 10px, so every size in Tailwind's scale renders at 62.5% of what it was designed at.
The edge case that catches people
em compounds. If the heading sits in a sidebar whose font-size is 0.875em of a 16px body, its parent is 14px, and 1.5em comes to 21px instead of 24px; one more 0.875em level makes the parent 12.25px. A rem size reads the root directly, so 2.4rem is 24px at any depth. That is why the parent field takes px or rem but not em or %: a parent size in em would depend on its own parent, and so on up the page. At this root, a parent of 1.4rem is 14px.
When not to use this tool
Not for ch, ex, cap, ic or lh, which are measured on the font or the line, so only a browser with the font loaded can resolve them. Not for building a fluid size: a clamp() needs a minimum, a maximum and a slope between two viewport widths, which the CSS Clamp Calculator works out. And not as a readability check: the arithmetic says how big a size is, not how well it reads, so look at the page with a larger default text size set in the browser and at 200% zoom.
Frequently Asked Questions
- What is the difference between rem, em and %?
- rem is a multiple of the root element's font size, so 1.25rem is the same size anywhere on the page. In font-size, em and % are shares of the parent's size, so they compound: 0.875em inside another 0.875em is 0.766 of the outer size. In other properties, such as padding, em is the element's own font size.
- Is px bad for accessibility?
- Not under WCAG 1.4.4, which browser zoom can satisfy, and zoom enlarges px text too. But px ignores the default text size a reader picks in the browser's settings: at a 20px default, 0.875rem is 17.5px while 14px stays 14px. Sizes in rem follow that setting.
- What does the 62.5% root trick do?
html { font-size: 62.5% }makes the root 10px at the 16px default, so 1.6rem is 16px, and unlike a px root it still follows the reader's setting. The catch is everything else written in rem: Tailwind's text-base is 1rem, so it becomes 10px, and a component library's sizes shrink the same way.- Is pt only for print?
- No. CSS fixes 1pt at 1/72 of a CSS inch and the CSS inch at 96px, so 12pt is exactly 16px on screen as well as on paper. What a screen does not fix is the physical size: a CSS inch is 96 CSS pixels, so it need not measure an inch on a ruler, and neither need cm, mm or pt.
- Why does my iPhone zoom in when I tap a form field?
- Safari on iPhone zooms into a focused field whose text is smaller than 16px, and so do other iPhone browsers built on WebKit. Give inputs 16px, 1rem at the default, or more. Do not cap zoom in the viewport meta tag instead: some browsers then block pinch-zoom too, which readers who need it rely on.
- Can I size text in vw alone?
- Not safely. Text sized only in viewport units does not grow with browser zoom or a larger text setting, which WCAG lists as failure F94 of 1.4.4. Add rem to it, as
calc(1rem + 0.5vw), so part of the size still scales, and wrap it in clamp() if it must stop growing on wide screens. - Why can't this page convert ch, ex or lh?
- They are measured on the font. ch is the width of its 0, ex its x-height and cap its capital height, so 1ch in one typeface differs from 1ch in another at the same font size, and lh is the computed line height. Only the browser, with the font loaded, knows them.
Common errors and gotchas
- Assuming the root is 16px. A reader can change the default size in the browser's settings and a stylesheet can set its own, so 1rem is 16px only when neither has.
- Nesting em sizes without multiplying them. 0.875em inside 0.875em inside 0.875em, under a 16px body, is 16 × 0.875³ = 10.72px, not 14px.
- Adding a 62.5% root to a project that already uses rem from a component library or Tailwind, which shrinks every size the library sets to 62.5% of its design.
- Expecting 1cm or 1in in CSS to measure that on a screen. They are fixed multiples of the CSS pixel, and how big a CSS pixel looks depends on the device.
- Sizing body text in vw alone. 1.5vw is 21.6px at 1440px wide but 5.6px on a 375px-wide phone, too small to read.
- Giving form fields text below 16px. An iPhone zooms the page into a focused field with smaller text, so an input set at 14px, Tailwind's text-sm, zooms on every tap.