[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-en-text-on-image-typography-mistakes":3},{"code":4,"message":5,"data":6},200,"ok",{"id":7,"slug":8,"title":9,"description":10,"content":11,"cover":12,"keywords":13,"tool":14,"tool_label":15,"reading_time":16,"status":17,"published_at":18,"created_at":18,"updated_at":18,"locale":19},534,"text-on-image-typography-mistakes","10 Typography Mistakes That Make Text Unreadable on Images","Text placed over photos fails in predictable ways. Learn the 10 most common errors — contrast ratio, font weight, placement, sizing — and how to fix each one.","Placing text on top of a photograph looks simple. In practice, it fails constantly—at small sizes, on busy backgrounds, on mobile, or just because the font choice clashed with the image in a way nobody noticed until it was published.\n\nMost of these failures follow predictable patterns. Here are the ten most common.\n\n## 1. Relying on Color Contrast Without Testing the Ratio\n\nWhite text on a photo \"looks fine\" until the image renders on a bright monitor, or until the background shifts to a lighter area of the photo. Perceived contrast is unreliable.\n\nWCAG AA requires a contrast ratio of at least 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold). Use a color contrast checker (WebAIM, Colour Contrast Analyser) on the specific color sampled from the image where the text sits—not the dominant color from the whole image.\n\n**Fix:** Sample the lightest part of the background under your text. Check the ratio against your text color. If it fails, add a text shadow, adjust the text color, or darken the background region.\n\n## 2. Placing Text Over Busy or High-Frequency Areas\n\nA serif headline over a cobblestone wall, a phone number over a foliage background, a logo over a crowd photo—all fail because the eye can't separate the text from the competing visual information behind it.\n\n**Fix:** Text lives on calm, low-contrast areas of the image. If the image doesn't have calm areas, create one: use a scrim (a semi-transparent gradient from transparent to dark\u002Flight), a solid color band, or a blurred background region behind the text.\n\n## 3. Using a Font Too Thin for Screen Display\n\nLight and ultralight weights (100–300) disappear over complex backgrounds even at large sizes. At body size (14–18px) they become nearly invisible on anything but a white background. Thin fonts are designed for print and controlled digital contexts, not floating over photography.\n\n**Fix:** On images, use medium weight (500) or bold (700) as the minimum. If the design requires a thin look, make the font noticeably larger so the letterforms have enough stroke width to stay readable.\n\n## 4. No Text Shadow or Backing on Light Text\n\nWhite or light text over a photograph without any shadow or backing on it looks clean in the design mockup (where the background was probably a placeholder color) and breaks as soon as a real photo goes in.\n\n**Fix:** Apply a text shadow in CSS: `text-shadow: 0 1px 4px rgba(0,0,0,0.6)`. Keep the spread tight (2–6px) and the opacity high enough to create separation. Alternatively, use a subtle semi-transparent background behind the text block.\n\n## 5. Wrong Hierarchy — All Text at the Same Weight and Size\n\nA banner with a tagline, a subheading, and a call to action, all at the same size and weight, reads as a wall of text rather than a visual message. The eye doesn't know what to read first.\n\n**Fix:** Apply a clear size ratio. If the headline is 48px, the subhead should be 24–28px, and supporting text 14–16px. At minimum a 2:1 ratio between headline and body. Add weight contrast too: bold headline, regular subhead.\n\n## 6. Text Too Close to Image Edges\n\nText that extends close to or over the edge of an image looks cramped, and will be cropped differently on different screen sizes or social platforms. A headline that reads cleanly on desktop might have its last word clipped on mobile.\n\n**Fix:** Keep all text at least 5–8% of the image width away from any edge. On a 1200px wide image, that's 60–96px of margin. On social cards, use the platform's defined safe zone (typically 100–150px from each edge for Twitter\u002FX and Facebook).\n\n## 7. Line Length Too Long for Reading Comfort\n\nA single line of text that spans the full width of a large hero image requires the eye to travel too far horizontally. For body text, anything over 70–80 characters per line degrades readability.\n\n**Fix:** Set a max-width on text blocks (typically 600–800px for body text). For short headlines, let them span naturally, but for subheads or supporting copy, constrain the width.\n\n## 8. No Optical Alignment Correction for Centered Text\n\nSoftware centers text by counting pixels from the edge of the text bounding box. But optically, a headline that starts with \"W\" or ends with \"Y\" looks off-center because of the asymmetric shapes at the ends. Similarly, punctuation (quotation marks, dashes) at the start of a line hangs visually into the margin.\n\n**Fix:** For headlines and display text, apply optical margin alignment where available (InDesign has it; CSS doesn't directly). Manually adjust kerning at display sizes above 36pt. This matters most for centered text in print or high-production digital contexts.\n\n## 9. Identical Font on Image as in Body Copy\n\nUsing the same typeface for overlaid text as the body text of the surrounding page creates no visual hierarchy between the image and the page. The text blends into the page reading rhythm rather than asserting itself as part of the image.\n\n**Fix:** Use a font for image text that's visually distinct from body copy. If the page is in a geometric sans-serif, use a humanist sans or a slab serif on the image. Contrast creates signal.\n\n## 10. Not Testing on a Real Image, Only a Placeholder\n\nTypography decisions made over a gray box or a low-quality FPO image don't transfer reliably. The actual photograph has its own luminance distribution, color character, and focal point. A design that looks perfect with a warm, slightly overexposed café photo might fail completely with a cool, contrasty architectural shot.\n\n**Fix:** Test text placement decisions against the actual images that will be used, or at minimum against a representative range of real photos from the same shoot or content type. If the text is designed to work across a range of user-supplied images (blog templates, social card generators), test it against ten varied image types and optimize for the hardest cases.\n\n---\n\nTypography on images gets easier once you internalize the principle: your text needs to fight for attention against the photograph, and it needs to win on every device, at every ambient lighting condition. When in doubt, add more contrast, use heavier weight, and test on a real image.\n\n---\n\nNeed to place text on an image with proper design controls? Try the free [Image Editor](\u002Feditor) — add text, adjust layout, and export without installing any software.","","text on image typography,text over photo design,typography on images,readable text over photos,image text contrast,overlay text mistakes","editor","Image Editor",6,"published","2026-05-11 17:45:59","en"]