A quote card is a rectangle, a gradient and some text that fits. The part every generator gets wrong is the last one: the text is either clipped, scaled to something illegible, or allowed to run off the edge where the preview does not show it.
This fits the text to the box, shrinking in steps until it fits, and stops shrinking before it becomes unreadable. When it still does not fit, it says so.
How to use
- Pick a size. The link preview, 1200 by 630, is the one to use if you only make one.
- Write the headline. Add a supporting line and your domain if you want them.
- Choose a background; each carries its own text colour.
- Download the PNG.
Nothing is uploaded. The card is drawn on a canvas in your browser and the file comes from there.
Example
The default, at link preview size:
1200 × 630 · Link preview (Open Graph) · headline at 84px over 2 linesAt 84 pixels on a 1200-wide canvas the headline still reads in a timeline at about 400 pixels wide, which is what most people actually see. That is the design constraint for these images: they are looked at small.
Pitfalls
Link previews are cached, hard. Facebook, LinkedIn and X keep the old preview long after you change the image. Their own debugging tools force a refresh; nothing on your site will.
1200 × 630 is the size, 1.91:1 is the ratio. Anything under 600 × 315 is shown as a small thumbnail rather than a large card, and a square image in a link preview gets cropped to the ratio by whoever is showing it.
Stories have furniture at the top and bottom. Roughly 250 pixels at each end sits under the platform’s own interface. Text there is text nobody reads, which is why the story preset keeps out of it.
Text over a photograph needs a scrim, not hope. These backgrounds are gradients so the contrast is decided in advance. Put a dark overlay under text on a photograph, or the card is unreadable on half the images you try.
The fonts are whatever the machine has. The card is drawn with the system stack, so the same text can break differently on a Mac and on Windows. Check the preview rather than the text.
Nobody reads three lines on a card. The headline shrinks as it grows, so a long one ends up small and unread. Under about twelve words is the useful range.
A PNG of flat colour and text is small; a photograph is not. These come out under 200KB. A photographic background belongs in a JPEG.
Alt text still matters. The card carries its words as pixels, so the alt attribute on the post is the only version a screen reader gets. Repeat the headline there.
Compatibility
Works in any browser with a canvas. Nothing is uploaded, nothing is stored, and the PNG is produced locally.
The fitting is the part with tests. Wrapping breaks between words and puts a word longer than the line on
its own line rather than looping; the size steps down two pixels at a time and stops at the minimum
rather than shrinking to nothing; an overflow is reported instead of clipped. Measurement is passed into
that code rather than done inside it, so the tests use a font whose widths are known exactly and the
browser passes the canvas’s own measureText, which is the only measurement that matches what gets
drawn.
The presets are the sizes the platforms use: 1200 × 630 for link previews, 1080 × 1080 and 1080 × 1350 for feed posts, 1080 × 1920 for stories, 1600 × 900 for wide posts. Each carries a note about what it is for, because the numbers change and the reasons do not.
Type scales with the canvas, on the geometric mean of the two sides rather than the shorter one. Scaling to the shorter side makes the headline on a 1200 by 630 link preview look lost across all that width; the mean gives 84 pixels there, 104 on a square and 139 on a story, each of which then shrinks to fit.