Code Screenshots People Actually Read: Typography, Contrast and Sharing
How to make code images that stay legible on a phone — line length, font size, theme contrast, export resolution — and when a screenshot is the wrong format entirely.
The phone is the real screen
Most code screenshots are viewed on a phone in a social feed at roughly 350 CSS pixels wide. A snippet that looks perfect in your 1440px editor becomes unreadable at that size. The constraint that matters most is line length: keep it under ~60 characters, and if the real code is wider, reformat it for the image — break long chains, shorten variable names, drop unrelated arguments. An image is an illustration, not source control.
- Font size: 16–20px equivalent in the exported image; nothing below 14.
- Line count: 10–20 lines is the sweet spot; beyond 30, link to a gist instead.
- Padding: generous margin around the code frame — it reads as intentional and survives platform cropping.
Contrast beats aesthetics
Pastel-on-dark themes look gorgeous in an editor and turn to mush after JPEG compression on a dim phone screen. Pick a theme whose comment color is still readable (many themes render comments at contrast ratios below 3:1), and test the exported image at 50% scale — if you cannot read it there, nobody will. Syntax highlighting should emphasize structure, not decorate it: keywords, strings and comments in three distinguishable tones is usually enough.
Export and accessibility
Export at 2× for crisp text on high-density screens — a 700px-wide frame should export at 1400px. PNG, not JPEG: JPEG artifacts around sharp text edges are the single biggest readability killer. And always pair the image with the code as text — in a gist link, in the post body, or at minimum in the alt text. Screen-reader users cannot read an image, and neither can the developer who wants to copy your snippet. A screenshot that cannot be copied is a small insult to the reader; make it an illustration of text that is available elsewhere.
When a screenshot is the wrong tool
- Documentation and tutorials: use code blocks — searchable, copyable, version-controllable.
- Bug reports: paste text; maintainers need to grep it, not squint at it.
- Anything longer than a screen: link to a repository or gist.
- Screenshots win for social posts, slides, newsletter headers and anywhere the platform cannot render code blocks.