Quote Card Generator — typography first, in your browser
A quote card is one block of prose set well inside a shape you can post. This tool does that and little else: you type the words, optionally add an attribution, choose a ratio and a background, and the card is drawn onto a <canvas> in this tab and saved to your device as a PNG, JPEG or WebP. Nothing is uploaded, because there is no server here to upload anything to — the whole tool keeps working with the network switched off.
How the text is fitted
The interesting part is the fitting. Rather than asking you to nudge a font-size slider until the text stops spilling, the tool searches for the largest whole-pixel size at which the wrapped block still fits the padded area, using a binary search between 8px and half the shorter card edge. It re-wraps the text at every size it tries, because wrapping and size are coupled: shrink the letters and two short lines merge into one, so a height judged against a wrap computed at some other size describes a layout that does not exist. The attribution line and the gap above it are part of that same measurement, which is why adding a name can pull the quote size down a step.
Every width in that search comes from measureText() on the real canvas after the font has been set — never from an assumed character width. Line spacing works the same way: the tool reads the actual ink height of the lines through actualBoundingBoxAscent and actualBoundingBoxDescent and multiplies that by your line height, falling back to the font size only where a browser reports no metrics. Words too long to break at a space — a URL, a hashtag, a run of CJK with no spaces — are split at grapheme boundaries, so an emoji, a flag or a combining accent is never cut down the middle.
Measure and line height are the two dials that matter
The measure is the longest a line may be. Left unbounded, text on a wide card runs the full width and the eye loses its place on the return sweep, which is why the measure here is capped at a fraction of the card width you control, and why the text column is centred rather than stretched. Line height then governs how the block reads as a mass. Both are shown live in the fit readout, along with the fitted size, the number of lines, and how close the longest line sits to the measure.
The card uses the fonts on your device
No webfont is fetched. A stack such as Georgia, Times New Roman, Liberation Serif resolves to whichever of those a device actually has, and different letterforms have different widths — so the same quote can break differently and settle at a different size on a phone and a laptop. That is how canvas text works, and it is precisely why every measurement is taken at draw time on the machine doing the drawing. Once the card is exported it is a fixed bitmap and looks the same everywhere.
Quoting accurately
A quotation has two parts to get right: the wording and the person. Misattribution is common and durable — lines travel for years attached to names that never said them, picked up from one aggregator page by the next, and a card makes an attribution look settled whether or not it is. This tool deliberately ships no quote library and no random-quote button, and it does not check, correct or vouch for anything you type.
Leave the attribution field empty and nothing is drawn — no “Anonymous”, no stray dash — and the quote re-centres into the space. For photo backgrounds, a scrim sits between the picture and the type, and the tool reports the WCAG contrast ratio between your text colour and the pixels actually behind the text block, stating the 4.5:1 and 3:1 thresholds it checks rather than handing you a grade. The file is written at the ratio's full pixel size, not at the preview size, and the exact byte count is shown beside the download button.