ColorKitFree CSS font size converter
Font size converter for all seven CSS forms
This font size converter is free and needs no signup: type a size in any unit and it comes back as px, pt, pc, em, rem, percent and the closest CSS keyword simultaneously, so 16px shows up as 12pt, 1pc, 1em, 1rem, 100% and medium in one reading. Parent size and root size are separate fields, because em and percent measure against the parent while rem measures against the document root and a converter that offers one box for both is wrong the moment a component sets its own size. The eight absolute-size keywords are listed with the pixels browsers actually resolve them to, next to the ratios the specification prints — they do not agree.
- 100% free
- No signup
- 7 units at once
- 8 CSS keywords
- Live text preview
used by em and %
used by rem
px
18px
what layout actually uses
pt
13.5pt
print and Word
pc
1.125pc
12pt to the pica
em
1.125em
against a 16px parent
rem
1.125rem
against a 16px root
%
112.5%
em with the decimal moved
keyword
large
lands on the table exactly
Rendered at 18px
Handgloves at this size
The eight absolute-size keywords
| Keyword | Browsers | Spec ratio | pt | rem |
|---|---|---|---|---|
| xx-small | 9px | 3/5 = 9.6px | 6.75pt | 0.5625rem |
| x-small | 10px | 3/4 = 12px | 7.5pt | 0.625rem |
| small | 13px | 8/9 = 14.22px | 9.75pt | 0.8125rem |
| medium | 16px | 1 = 16px | 12pt | 1rem |
| large | 18px | 6/5 = 19.2px | 13.5pt | 1.125rem |
| x-large | 24px | 3/2 = 24px | 18pt | 1.5rem |
| xx-large | 32px | 2/1 = 32px | 24pt | 2rem |
| xxx-large | 48px | 3/1 = 48px | 36pt | 3rem |
The keywords answer to the reader's default size, not to your root rule, so the middle column stays put whatever you type in the root field above.
Press Ctrl+V anywhere on the page to drop in a size in any of the seven forms, 13px or 0.8125rem or small — no need to click the field first.
How to convert a font size between units
Three steps for the case where the unit, not the number, is the open question.
Say what you already have
Enter the number and choose the unit it came in. Picking the keyword option swaps the number field for a list of the eight absolute-size names, so a size lifted from an old stylesheet as font-size: x-large goes in as it was written. Anything you paste is recognized by its suffix — 13px, 10pt, 0.8125rem, 120% or a bare keyword — and the unit selector follows it.
Set the two contexts separately
The parent field feeds em and percent; the root field feeds rem. They are two different elements and conflating them is the usual reason a converted value is out by a factor: a card at 14px inside a 16px document makes 1em 14px and 1rem 16px at the same moment. Leave both at 16 and the six numeric columns line up with the defaults everyone quotes.
Take the column that fits where it is going
Each tile carries its own copy button and the tile matching your input unit is highlighted, so the comparison is between the others. Under them is the size rendered as live text, which settles the question the numbers cannot: whether 13px is small enough to be a caption or just small enough to be unreadable at arm's length.
Technical specifications
| Units shown | Seven at once: px, pt, pc, em, rem, percent and the nearest absolute-size keyword |
|---|---|
| Point | 1pt is 1/72 inch and CSS fixes 1 inch at 96px, so 1pt is exactly 1.3333px and 12pt is 16px |
| Pica | 1pc is 12pt and therefore exactly 16px — the only unit here that coincides with the default root by accident rather than design |
| Keywords | Eight, resolving at a 16px medium to 9, 10, 13, 16, 18, 24, 32 and 48px in Chrome, Firefox and Safari alike |
| Spec ratios | CSS Fonts 4 lists 3/5, 3/4, 8/9, 1, 6/5, 3/2, 2/1 and 3/1, which would put small at 14.22px; browsers use the lookup table instead |
| Percent | A share of the parent's computed size — numerically em with the decimal point moved two places |
| Two contexts | Parent size drives em and percent, root size drives rem, and each is set on its own because they are different elements |
| No network calls | The keyword table is a constant in the page source rather than a lookup, so every column is computed on your machine |
Frequently asked questions
How many pixels is 12pt?
Exactly 16px. A point is one seventy-second of an inch and CSS fixes an inch at 96 pixels, so a point is 96/72 = 1.3333px and twelve of them come to 16. That coincidence is why Word documents and browsers agree on body text: 12pt in a word processor and the browser's default 16px are the same nominal size, which makes 12pt the most reliable landmark in the table.
Which of the seven should a stylesheet actually use?
Rem for type, em for spacing that should follow the type, pt only in a print stylesheet, and the other four almost never. Percent is em with the decimal moved and buys nothing on font-size; pc is a curiosity; px is defensible for hairlines and icon glyphs but not for anything a reader needs to read. The keywords are the one unusual case worth a second look, because they answer directly to the reader's default size without any root discipline.
What does font-size: small compute to?
13px in Chrome, Firefox and Safari when the reader's default is 16px. The absolute-size keywords are resolved through a lookup table rather than by multiplication, and the row for a 16px medium reads 9, 10, 13, 16, 18, 24, 32 and 48px for xx-small through xxx-large. Change the browser's default font size and the whole row shifts, which is the property that makes the keywords quietly accessible.
Is font-size: 120% the same as 1.2em?
On font-size, yes — both resolve to 1.2 times the parent's computed size and there is no case where they differ. On other properties they part company completely: percent on padding or margin is a share of the containing block's inline size, while em stays a ratio of the font-size, so padding: 10% and padding: 0.1em have nothing to do with each other. Line-height is a third variation again, where 120% freezes to a length and the bare number 1.2 does not.
Why do print stylesheets use pt?
Because on paper the physical units are the honest ones. A point maps to a fixed fraction of an inch on the sheet, whereas a CSS pixel is defined against a reference viewing distance and only becomes a physical size once a printer driver has decided a scale. Print work also inherits the vocabulary: type has been specified in points for two centuries, and a print shop asked for 9pt captions is not going to appreciate 12px.
Is the pica still worth knowing?
Rarely in CSS, often in the conversation around it. One pica is twelve points and therefore exactly 16px, and it survives as the unit newspapers and books measure column widths and gutters in — a 20-pica column is a common measure. CSS accepts pc anywhere a length is allowed, so it is available if a print spec arrives in picas, but no browser or design tool will hand a value back to you in them.
About the seven ways CSS writes a type size
The seven fall into three families. The physical ones — pt, pc and their relatives in, cm, mm and Q — are tied to each other by fixed ratios and to the page by a printer: 72pt, 6pc and 1in are the same length. The CSS pixel pretends to belong with them, since the specification anchors 1in at 96px, but it is not a device pixel and never was; it is a reference unit defined against a viewing distance, which is how a phone at 3× density and a monitor at 1× can both honour font-size: 16px and produce text that subtends roughly the same angle at the eye. Then come the relative ones — em, rem and percent — which have no size at all until an element supplies one.
The keywords are the family almost nobody uses and the only one that behaves well by default. There are eight absolute-size names from xx-small to xxx-large, and browsers do not compute them from the ratios in CSS Fonts 4; they carry a lookup table, which is why small comes out at 13px rather than the 14.22px the 8/9 ratio implies. What makes them interesting is the base they use: the reader's own default font size, not your root rule. A stylesheet written in keywords tracks the browser setting without a single rem in it. Their relative cousins, smaller and larger, step along the same table from wherever the parent sits, which makes them harder to reason about and rarer still.
The practical use of seeing all seven together is catching a size that is not what it claims. A design handed over in points, an old stylesheet in percentages and a component library in rem will each describe the same 18px heading differently, and the argument about which is correct evaporates once the columns line up. From there the work is choosing values rather than converting them: moving a legacy px ramp to rem is mechanical, while stepping a ramp by 1.618 is a decision about how far apart the steps should feel. CSS keeps one other family of interchangeable units for the same reason — 180deg, 200grad and 0.5turn are one rotation — and those degrees are the ones being measured out on the color wheel.
Where the seven columns are computed
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.