Free Developer Tool
Measure Text Width Online
Paste any text, pick a font, size, and weight, and get its exact pixel width instantly — computed with the browser's Canvas measureText() engine via Pretext.js. No DOM, no reflow.
Loading Pretext.js…
What Is a Text Width Calculator?
A text width calculator tells you how many pixels wide a string will be when rendered in a specific font. That number drives a surprising amount of UI work: truncating labels with an ellipsis, sizing buttons and chips to their content, aligning canvas or SVG text, laying out PDFs, and deciding whether a heading fits on one line. Guessing leads to clipped text or wasted space; measuring gets it right.
This tool measures width the correct way — through the browser's font engine — and reports the total width plus the width of every individual line if your text contains hard line breaks.
How to Measure Text Width in JavaScript
The canonical approach uses a Canvas 2D context — no element ever touches the DOM:
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '16px Arial';
const width = ctx.measureText('Hello world').width; // → pixelsThat works for a single line. For real text — multiple lines, wrapping, CJK, RTL — you want Unicode-aware segmentation too. Pretext.js builds on measureText() with prepare() (measure once) and layoutWithLines() (pure arithmetic), which is exactly what powers this page.
When You Need Text Width
Decide where to cut a string so it fits a fixed-width label or column.
Position and align glyphs precisely when there is no DOM box to read.
Size tabs, chips, and buttons to their content without a render pass.
Lay out lines server-side or before paint where layout reflow is unavailable.
Three Ways to Measure Text Width in JavaScript
There is more than one way to measure text width, and the right choice depends on whether you can touch the DOM, how many strings you need to measure, and how accurate the result must be. The three approaches below are the ones developers actually reach for when they need to measure text width in a real application.
1. Canvas measureText(). The most common and most reliable way to measure text width without rendering. You set the context font and read the advance width. It is fast, accurate, and never forces layout — which is why this measure-text-width tool is built on it.
2. A hidden DOM element. You can put text in an off-screen span and read its width, but every read forces a reflow. Measuring text width this way in a loop is the classic cause of layout thrashing, so avoid it when you need to measure many items.
3. Pretext.js. Pretext wraps Canvas measurement with Unicode-aware segmentation and caching, so you can measure text width for multi-line and multilingual strings and reuse the prepared handle across many container widths. It is the most robust way to measure text at scale.
Getting an Accurate Text Width Every Time
An accurate text width depends on measuring with the exact font that will paint on screen. The single most common reason a text width comes out wrong is measuring before a web font has loaded: the browser measures the fallback font, so the text width you get does not match what the user sees. Always wait for document.fonts.ready before you measure text width, which this tool does automatically.
The font string also matters. Text width changes with font family, size, weight, and style, so a complete CSS font shorthand — for example bold 18px 'Inter' — is required to measure width correctly. Change any of those inputs above and watch the reported text width update instantly.
Finally, remember that text width is reported in CSS pixels at the given font size. If you render at a different size, the text width scales with it, so measure at the size you actually paint.
Common Mistakes When Measuring Text Width
Developers trip over the same handful of issues when they measure text width. Estimating text width by multiplying character count by an average character width is fast but wildly inaccurate for proportional fonts, where a lowercase “i” and an uppercase “W” have very different widths — only real measurement gives a correct text width. Forgetting to account for white-space handling is another: trailing spaces and tabs change the text width depending on the white-space mode.
A third mistake is measuring text width once and caching it across font changes. Because text width is a function of the full font spec, a cached value becomes stale the moment the font, size, or weight changes. Pretext.js solves this cleanly: prepare once per text-and-font pair, then read an accurate text width as often as you like. Use the calculator above whenever you need to check a text width by hand instead of wiring up Canvas yourself.
Frequently Asked Questions
How do you measure text width in JavaScript?
The reliable way is the Canvas API: create a canvas 2D context, set ctx.font to a CSS font string like "16px Arial", and call ctx.measureText(text).width. This returns the rendered advance width in CSS pixels without inserting anything into the DOM. This tool uses Pretext.js, which wraps measureText() and adds Unicode-aware segmentation so multi-line and multilingual text are measured correctly.
Why not just use getBoundingClientRect() or offsetWidth?
Reading offsetWidth or getBoundingClientRect() forces the browser to flush layout (a forced synchronous reflow). In a loop that measures many strings it causes layout thrashing and dropped frames. Canvas measureText() and Pretext.js return widths through pure measurement and arithmetic, so they never trigger reflow.
Does the measured width match what the browser renders?
Yes — measureText() reads glyph advance widths from the browser's own font engine, the same one used to paint the page, for normal and pre-wrap white-space. Make sure the web font is fully loaded first (await document.fonts.ready) so the correct font is measured rather than a fallback.
Can it measure CJK, Arabic, or emoji text?
Yes. Pretext.js uses Intl.Segmenter for Unicode-correct segmentation, so Chinese, Japanese, Korean, Arabic, Hebrew, Thai, and emoji are measured with the right glyph widths and break behavior.
Is this text width calculator free?
Completely free, runs entirely in your browser, and requires no sign-in. Nothing you type leaves the page.
Measure Text Width the Right Way
When you need to measure text width, the right tool measures real glyphs instead of estimating from character counts. Enter any string, font, size, and weight above and the exact pixel width is computed with Canvas under the hood, so the result matches what the browser paints — for a single label or for thousands of list rows alike.
Bookmark this page for quick checks by hand, and reach for Pretext.js when you need to measure text width in code. Either way you get the answer without the DOM, without forced reflow, and without guessing — the dependable way to size text on the modern web.
More Pretext Text Tools
Line count & height at a given width.
Copy-paste truncation CSS + live preview.
Largest font size that fits a box.
All four tools are powered by Pretext.js, the open-source JavaScript text-measurement engine. Try the interactive playground to explore the full API.