The Headline Fit Rule: How 180 Characters Become 68, 44 and 32 Pixel Text in the Social Preview Designer

I work on OnePassApps, the team behind app.onepassapps.com. This is about our own Social Preview Designer, and every number below was measured on the live build on 11 November 2026, in one signed-out browser session.

The question this post answers is narrow and practical: what happens to a headline that is too long for the card. In this app it is neither left to overflow nor cut off. The text is re-fitted, and the exported file carries the sizes that were actually used. I measured that rule by setting the headline to three different lengths, exporting the SVG at each one and reading the file off disk.

What the panel says

The first control is a Headline field with a counter under it, and the app's own line under the counter reads "Text fits the chosen layout automatically." The field's own maxlength attribute is 180.

Typing more than the cap

I focused the Headline field, selected everything in it and typed 192 characters as real key events. The field kept 180 of them and the counter read "180 / 180". While you are typing, the number next to the counter never runs past the cap.

Three lengths, three font sizes

This is the rule, measured three times. The headline is a real element inside the exported SVG, so the size it was drawn at is a number in the file rather than something I read off a screenshot.

The words themselves are wrapped by the app, not by me. At 30 characters the headline is two lines: "A little space" and "for a big idea." At 109 characters it is five: "OnePassApps builds", "nine small browser apps", "under one membership", "and this card is made in" and "your own browser tab". At 180 characters it is seven, ending on the single word "check".

The first line also moves up as the headline grows - 212, then 188, then 176 - because the text block is placed in the space above the description rather than starting from a fixed line.

Nothing is clipped

In the three text-only files I exported there is no clipPath element, no textLength attribute and no ellipsis character. Every word of the headline is present in a at every length. The type gets smaller and the words re-wrap; nothing is cut off and nothing is abbreviated.

The description moves too

The eyebrow stayed at font size 20 and the footer at 23 in all three cards. The description sat at font size 30 in the 30 and 109 character cards, and dropped to 27 in the 180 character card. Its two lines also broke differently: "A practical guide to making room for" and "your next creative project." became "A practical guide to making room for your" and "next creative project."

The preview and its alt text

The preview in the page is an image 1200 by 630, and its alt text is "Card preview: " followed by the headline in full. At the cap the whole 180 character headline is in that alt text, so the accessible description of the preview is the entire headline and not a shortened version of it.

What the guide says

The live guide for this app states the rule in its own words: "Inspect all text; shorten wording or change layout if the design cannot fit it readably." It also says "Standard canvas sizes are examples, not platform-compatibility guarantees" and "Social Preview Designer runs in your browser with no account or payment details, and it never uses OnePassApps credits."

What I did not measure, so that you know what is not claimed here

One build, one browser, one signed-out session, 11 November 2026. Only the headline length changed; the description, eyebrow, footer, colours, typeface and composition were left at their shipped values. I did not download the PNG in this session, so nothing is claimed about the PNG bytes. I did not test the fit rule against the Image composition, where a photo sits behind the text, and I did not measure the other canvas sizes, so the 68, 44 and 32 figures are for the 1200 by 630 card. The headline I typed was test copy, not a real headline.

There is an earlier post on this route that covers the canvas sizes, the contrast readout and the difference between the PNG and the SVG: https://dev.to/onepassapps/social-preview-card-maker-in-the-browser-canvas-sizes-contrast-and-png-vs-svg-4801

You can open the app at https://app.onepassapps.com/apps/social-card?utm_source=devto&utm_medium=post&utm_campaign=social-card-fit-ladder&utm_content=social-card-link

Its guide, which is the short version of the same app: https://app.onepassapps.com/guides?utm_source=devto&utm_medium=post&utm_campaign=social-card-fit-ladder&utm_content=guides-link

I write here as the OnePassApps team, so questions about how the app works are welcome - and corrections are better than praise.