Type any text, pick a font, size and weight, and see exactly how many pixels wide it renders in your browser. Set a pixel limit to check whether a title, button label or heading fits, and where it would be cut off.
Last updated:
Any font installed on this device, or a fallback list like Inter, sans-serif.
px
px
CSS letter-spacing, added after every character.
px
600 px is the commonly cited desktop search-result title width.
Enter your values to see the result.
Advertisement
Advertisement
How to use the Text Pixel Width Calculator
Type or paste your text. Put several titles on separate lines to measure them all at once.
Choose the font, size, weight and any letter spacing, or tap a preset such as the search title preset.
Enter a width limit in pixels if you need the text to fit a space.
Read the width, the pixels left or over, and the truncated preview.
Compare fonts and sizes in the tables below and download them as CSV.
Why character counts and pixel widths disagree
Most fonts are proportional: every glyph has its own advance width. Arial (which shares its character widths with Helvetica) uses these widths, expressed in thousandths of an em; multiply by the font size to get pixels.
Character
Width (em)
At 14 px
At 20 px
i, l
0.222
3.1 px
4.4 px
space, period, comma
0.278
3.9 px
5.6 px
a, e, digits 0-9
0.556
7.8 px
11.1 px
A
0.667
9.3 px
13.3 px
m, M
0.833
11.7 px
16.7 px
W
0.944
13.2 px
18.9 px
So ten lowercase i's at 20 px are about 44 px wide and ten capital W's about 189 px. Titles with many capitals, m's and w's run out of room long before the character count suggests. Monospaced fonts such as Courier New are the exception: every character has the same width (0.6 em).
Formulas used
Width with letter spacing = measured width + letter spacing × number of characters.
em = width in px ÷ font size in px.
Points = px × 0.75 (CSS: 96 px = 72 pt = 1 inch).
Scaling: width grows in proportion to font size, so text that is 300 px at 20 px is about 360 px at 24 px (300 × 24 ÷ 20).
Tips for fitting text into a pixel limit
Put the key words first so that a truncated title still makes sense.
Avoid ALL CAPS for long labels; capitals are much wider than lowercase letters.
Leave a safety margin of 5-10% for font rendering differences between systems.
Bold text is noticeably wider than regular text; measure the weight you will actually use.
If the visitor may not have your font, also measure the fallback font in the comparison table.
Frequently asked questions
How is the pixel width calculated?
The text is drawn with the HTML canvas measureText() method using the exact CSS font you choose (style, weight, size and family). This is the same text engine your browser uses for web pages, so kerning and glyph widths match what you would see on screen. Letter spacing is then added once per character, as CSS letter-spacing does.
Why not just count characters?
Characters have very different widths. In Arial at 20 px a lowercase i is about 4.4 px wide while a capital W is about 18.9 px, so two titles with the same character count can differ by more than 100 pixels. Places that cut text by width, such as search result titles, buttons and table cells, need a pixel measurement.
What is the pixel limit for a search result title?
Search engines do not publish a fixed number. Desktop titles are commonly observed to be cut at roughly 600 px in Arial 20 px, and desktop descriptions at roughly 920 px in Arial 14 px. Treat these as guides and keep the important words at the start.
Why do I see a warning that the font is not installed?
Canvas can only measure fonts that this device has. If the font is missing, the browser silently substitutes a fallback, so the number would be for the wrong font. Install the font or choose one that is installed for an exact measurement.
Will the width be the same on other computers?
Very close if the same font file is used. Small differences of a fraction of a pixel can come from font versions, hinting and operating system rendering, and a different fallback font can change the result a lot.
How do I convert the width to em or points?
Divide the pixel width by the font size to get em (a 240 px wide line at 20 px is 12 em). Multiply pixels by 0.75 to get points, because CSS defines 96 px per inch and 72 pt per inch. The tool shows all three.
Is my text uploaded?
No. The measurement runs entirely in your browser with the canvas API. Nothing you type leaves your device.
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.