SERP Pixel Width Checker for Titles & Meta Tags

Google does not cut snippets at a character count. It cuts them at a pixel boundary, because the SERP is rendered in a proportional font where W is more than four times wider than l. This checker measures the rendered width of your title tag and meta description with the browser canvas at Google's actual render sizes, simulates the line wrapping, and reports the exact character index where the text gets clipped.

How the measurement works

1. Advance widths, not characters

Every glyph in a proportional font carries an advance width expressed in font units, normally 1000 units per em. Arial (and its metric clone Liberation Sans) uses these values, which is why identical character counts produce wildly different pixel widths:

Width for a string is simply the sum of its glyph advances scaled by the font size:

width_px = ( sum of advance_units ) × font_size_px / 1000

Ten W characters at 20px come to 188.8 px. Ten l characters come to 44.4 px. Same character count, more than four times the pixels. That is the whole reason a character-count check misfires.

2. Two measurement engines

The tool first asks the browser: it creates an offscreen canvas, sets ctx.font = "20px Arial" and calls measureText(). That path uses the real installed font and is exact. It then calibrates the canvas against the embedded advance table with a reference string. If the browser has no Arial and substitutes a font whose metrics deviate by more than 2%, the tool switches to the table so that two people on two machines get the same number. The badge next to the buttons shows which engine is live.

3. Line boxes and budgets

Google gives a snippet a fixed number of lines and a fixed pixel budget. The per-line box is the budget divided by the allowed lines:

The character estimates in the last column are derived, not assumed. Measuring ordinary English title case in this table gives an average advance of 9.34 px per character at 20px, and ordinary English prose gives 6.24 px per character at 14px; dividing each budget by that average produces the counts above. This is exactly why the familiar rules of thumb are "keep titles near 60 characters" and "keep descriptions near 150 characters" — those numbers are a by-product of the pixel budgets, not the rule itself. Your copy will land above or below them depending on how wide your glyphs are, which is the number this tool actually reports.

4. The wrap and truncation simulation

Whitespace is first collapsed to single spaces, with a character map kept so every position can be traced back to your original string. Then a greedy line breaker runs:

1. Take the next word. Build the candidate line current + " " + word.
2. If the measured width of the candidate is at or below the line box, accept it and continue.
3. Otherwise close the current line and start a new one with that word.
4. Stop after the allowed number of lines.

If any text is left over, the final visible line is filled character by character while width(fragment) + width(ellipsis) stays inside the line box, trailing spaces are trimmed, and the ellipsis is appended. Because the ellipsis is re-measured against the fragment rather than assumed, the rendered line never overshoots. The character index at which the fill stopped, mapped back through the whitespace normalisation, is the cut index reported above.

5. Keyword survival and prominence

Two different questions get two different answers. Survival uses the last occurrence of the keyword: the keyword survives when the end of that occurrence lands at or before the cut index, so a keyword repeated late in a long description is correctly judged as lost. Prominence uses the first visible occurrence and weights it by position:

prominence = 1 − ( start_index / visible_length )

A keyword at the very start scores 1.00, a keyword halfway through the visible text scores 0.50, and a keyword that never appears in the visible text scores 0.00. Front-loading matters because the first words are what a scanning user reads and what stays legible when Google rewrites the tail.

6. Brand suffix cost

The tail | Brand is measured on its own so you can see what the branding is charging you. A pipe, two spaces and a five character brand runs roughly 70 px at 20px Arial — about 12% of the entire desktop title budget, or six to seven characters of keyword copy you no longer get to use.

Practical thresholds

• Under 90% of budget — safe. Google has room even if it appends a site name.
• 90–100% — tight. A different rendering context or an appended brand will clip you.
• Over 100% — truncated. Check the cut index and move anything important before it.
• Wide-glyph copy — ALL CAPS, "W", "M" and "—" burn budget fast. Sentence case buys pixels for free.
• Pixels are a ceiling, not a promise — Google rewrites a large share of titles and descriptions regardless of length. Staying inside the budget only guarantees that your version is displayable.