Adding Text Overlays to OG Images That Actually Work
The text on your OG image is often the first thing people read when they see your link shared in a feed. Getting the typography right means the difference between a compelling preview that drives clicks and an unreadable mess that gets scrolled past.
Font Size and Hierarchy for Small Screens
OG images are 1200x630 pixels at full size, but they are almost always displayed much smaller, especially on mobile where a card might render at 400 pixels wide or less. Your headline text needs to be large enough to read at that reduced size, which means 48-72px minimum on the 1200px canvas. A common mistake is designing at full resolution on a large monitor and not checking how the image looks at 300-400px wide. Use a clear hierarchy: one large headline, optionally a smaller subtitle, and your brand name or logo. Two or three text elements maximum. Anything more becomes illegible at small sizes and clutters the composition.
Contrast and Readability Techniques
Text must have sufficient contrast against the background to be readable at any size. If your background is a photograph or complex illustration, do not place text directly on top of it without a contrast layer. The most effective techniques are: a semi-transparent dark overlay behind light text, a solid or semi-transparent banner area where text sits, a blurred background region beneath the text, or a text shadow/stroke for lighter backgrounds. Aim for a contrast ratio of at least 4.5:1 between your text and the immediate background, which is the WCAG AA standard. Test your contrast using tools like WebAIM's contrast checker with the specific colors in your design.
Font Selection for OG Images
Stick to clean, highly legible sans-serif fonts for OG images. Inter, Roboto, Open Sans, and similar web fonts render well at various sizes and maintain clarity when the image is scaled down. Avoid decorative, script, or thin-weight fonts that become unreadable at small sizes. If your brand uses a serif font, make sure it has thick enough strokes to remain clear at 400px wide. Consider the rendering environment too: these images are compressed as PNG or JPEG, so thin hairlines and delicate serifs can get lost in compression artifacts. Bold or semibold weights generally work better than regular weight for headlines in OG images.
Text Placement and Safe Zones
Position your primary text in the left two-thirds of the image for left-to-right languages. This placement works well because some platforms overlay their own UI elements (like a play button or share icon) in the bottom-right corner. Keep text at least 60 pixels from any edge to account for platform-specific cropping and rounded corners. For the best visual balance, align your headline to the left or center of the image and leave breathing room around it. Cramming text into every available pixel makes the image feel cluttered and desperate. White space in an OG image is not wasted space; it draws the eye to your message and gives the composition a professional, designed quality.
Dynamic Text and Truncation
When generating OG images dynamically with variable-length titles, you need a strategy for handling long text. A blog post title might be 8 words or 20 words, and your template needs to accommodate both. Set a maximum character count and truncate with an ellipsis beyond that limit. Alternatively, use a responsive text sizing system that reduces the font size as the text length increases, though this can make shorter titles look awkward if they render at the maximum size. Another approach is to set a fixed bounding box for text and let it wrap to multiple lines with a maximum of 3 lines before truncating. Test your template with the shortest and longest titles in your content library to catch edge cases.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate OG Images with Perfect Typography