CSS Font Size & Unit Converter
Convert one CSS length into every other unit, with the context each relative unit depends on stated rather than assumed.
# 2rem converted
# Root 16px, parent font 16px, parent size 640px, viewport 1280x800px
32px
2rem (against the root font size)
2em (against the parent font size)
24pt
0.8467cm
8.4667mm
0.3333in
5% (against the parent size)
2.5vw (against the viewport width)
4vh (against the viewport height)Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Convert one CSS length into every other unit, with the context each relative unit depends on written down rather than assumed.
How to use
- Type the length, with or without its unit. Without one, pixels are assumed.
- Set the context that applies to your case: the root font size for rem, the parent font size for em, the parent size for percentages, the viewport for vw and vh.
- Read the rows. Each relative one says what it was measured against, because the same length converts differently in a different place.
- Choose a single target unit if you only want one answer.
Example
2rem at a 16 pixel root, in a 640 pixel parent, on a 1280 by 800 viewport:
32px
2rem (against the root font size)
2em (against the parent font size)
24pt
0.8467cm
0.3333in
5% (against the parent size)
2.5vw (against the viewport width)
4vh (against the viewport height)The absolute units need no context at all: 96 pixels is an inch by definition, and a point is a 72nd of that.
Pitfalls
- Absolute units are only absolute relative to each other. A CSS inch is 96 pixels, which is not a physical inch on any screen you own.
- em compounds. Nest three elements at
0.9emand the innermost is 0.729 of the original, which is the usual cause of text that shrinks down a list. - A percentage is measured against different things depending on the property: width against the parent’s width,
padding-topagainst the parent’s width too, andline-heightagainst the element’s own font size. vhon mobile changed meaning. The URL bar makes the viewport height move, which is whydvh,svhandlvhexist; this converter uses the classicvh.chandexdepend on the font, not just its size. The values here use half the font size as an approximation, which is close for proportional fonts and wrong for monospace.- Points belong to print. A point in CSS is a fixed 1.333 pixels, and has nothing to do with the point size in your design tool unless that tool also assumes 96 dpi.
- Converting a length is not converting a design. A 24 pixel heading at one viewport is not a 1.875vw heading: one is fixed and the other changes with the window.
pc,cmandmmare legal and almost never useful on screen. They are here because print stylesheets use them.
Compatibility
Every unit converted here is part of CSS Values and Units, supported by all current browsers. vmin and vmax need IE10 or newer, which is to say everything. The newer viewport units (dvh, svh, lvh) need Chrome 108, Safari 15.4 or Firefox 101 and are deliberately not included, since their whole point is that they change while you scroll. The tool runs entirely in your browser.
Frequently asked questions
Why does the same value convert differently for you and me?
Which unit should I use for type?
Are cm and mm useful?
What about ch for line length?
65ch is about 65 characters of the current font. The exact width depends on the font, which is why this tool approximates it.