Images of Text
Text should be implemented as actual text, not as a rasterized image, unless the image is essential (a logo, a screenshot of a UI being discussed) or fully customizable.
What it asks
When the same visual presentation can be achieved with real text plus CSS, use real text. Images of text don’t zoom cleanly, can’t be selected, can’t be translated by the browser, can’t be restyled by user CSS, and pixelate at high zoom. Exceptions: logos, essential images (a screenshot demonstrating how a UI looks), and images of text the user can customize.
How to meet it
- Render headings, banners, and promotional copy as HTML text with web fonts, not as exported PNGs.
- For marketing badges (“New”, “Sale”, “30% Off”), use a
<span>styled with CSS rather than a sprite image. - If a designer hands over a hero image with text baked in, request the text as a separate layer to render over the image with CSS.
- For social-media-style quote cards generated server-side, render them as SVG with
<text>elements when possible — SVG text scales cleanly and is selectable. - Use
@font-faceto load custom display fonts instead of rasterizing decorative type.
Common failures
- Banner ads with all the copy (“Limited time offer! Shop now!”) rendered as a JPEG, blurry at 200% zoom.
- Pricing-tier cards where “$99/month” is part of a card image rather than HTML text.
- Section dividers with stylized text (“Our Services”) shipped as PNG instead of a styled
<h2>. - Calls-to-action that are entirely image-based, with the alt text duplicating the visual copy.
- Email-style screenshots used in marketing pages where the marketing copy could just be real text.
Why it matters
Images of text are also a translation and SEO failure — Google can’t index them, Chrome can’t translate them, and screen-magnifier users see them pixelated. The fix is usually trivial: replace the export with HTML. The friction is workflow — designers ship JPEGs because they’re faster to produce in Figma than to spec.