The best fonts and themes for code screenshots
How to pick a monospace font and syntax theme for code images: legibility, ligatures, dark vs light, and the best pairings for posts, docs and slides.
DesignBy the Codeshot team5 min read
Quick answer: For most code screenshots, use a highly legible monospace font with a tall x-height and clearly distinct characters — JetBrains Mono, Cascadia Code or IBM Plex Mono — at a large size, without ligatures if the code is meant to be retyped. Pick a theme to suit where the image will appear: a high-contrast dark theme such as One Dark or Dracula for social feeds, and a light theme such as GitHub Light for white documentation pages and print.
The theme and font you choose for a code image affect much more than its looks. They decide whether the image is readable at thumbnail size, whether it fits the page or slide around it, and whether people notice the line you care about. Here is how to choose deliberately, instead of defaulting to whatever your editor happens to use.
What makes a monospace font good for screenshots
A font that is pleasant for eight hours in an editor is not automatically the best choice for an image that will be shrunk on a phone. Look for:
- Distinct look-alike characters. Can you tell
0fromO,1fromlfromI, andrnfrommat small sizes? A slashed or dotted zero and a lowercaselwith a tail help a lot. - A generous x-height. Taller lowercase letters stay legible when the image is scaled down.
- Moderate width. Narrower fonts fit longer lines without forcing a wide, short image.
- Clear punctuation. Code is full of
.,,,:and;; tiny punctuation disappears first. - Solid regular weight. Very thin weights wash out after social platforms compress the image.
Popular coding fonts compared
| Font | Origin | Character | Best for |
|---|---|---|---|
| JetBrains Mono | JetBrains, 2020 | Tall x-height, designed for readability; optional ligatures | Small images, social posts — a safe default |
| Cascadia Code | Microsoft, 2019 | Friendly, rounded shapes; ships with Windows Terminal; ligature and no-ligature variants | Terminal images, friendly tutorials |
| Fira Code | Nikita Prokopov, based on Mozilla's Fira Mono | The font that popularized programming ligatures | Showcase snippets that use ligatures |
| IBM Plex Mono | IBM, 2017 | Neutral, crisp, highly legible | Documentation, corporate and print |
| Source Code Pro | Adobe, 2012 | Classic, clean and widely available | Beginner tutorials, long-form docs |
| Geist Mono | Vercel, 2023 | Modern and geometric | Product and launch visuals |
| Space Mono | Colophon for Google Fonts | Distinctive, retro personality | Short, display-style snippets |
All of these are free and open source. If you are unsure, start with JetBrains Mono: its tall lowercase letters hold up at small sizes better than most.
Ligatures: when to use them
Programming ligatures render character sequences such as =>, !==, >= and -> as single combined glyphs. They can make code look cleaner — and they can confuse readers who will retype the code. A ligature for !== does not show that it is three characters, and beginners may not know which keys produce ≥.
A practical rule:
- Turn ligatures off for tutorials, documentation and beginner content — anything readers might type.
- Turn them on freely for showcase posts, where the image is about aesthetics or a feature's look.
Dark vs light themes for code images
Neither is universally more readable. Reading research generally finds that dark text on a light background is slightly easier to read for most people in bright conditions, while many developers prefer dark themes for long sessions and low light. For an image, consistency with its surroundings matters more than either preference.
| Destination | Usually best | Why |
|---|---|---|
| Social feeds | Dark | Most people browse in dark mode; saturated tokens stand out |
| Documentation on white pages | Light | Blends into the page instead of creating a heavy block |
| Dark slide decks | Dark, matched to the slide | Avoids a "pasted-in" rectangle |
| Light slide decks | Light | Projectors wash out low-contrast dark themes |
| Print and PDF | Light | Dark backgrounds use lots of ink and reproduce poorly |
Popular syntax themes and when to use them
| Theme | Style | Good for |
|---|---|---|
| Dracula | Dark purple-gray with vivid pink, green and cyan | Eye-catching social posts |
| One Dark | Balanced, muted dark theme from the Atom editor | General purpose, slides |
| Night Owl | Deep blue, designed with low light and color blindness in mind | Longer snippets |
| Gruvbox | Warm, retro earth tones | A distinctive, recognizable brand look |
| VS Code Dark | The default many developers know | Tutorials for beginners |
| Okaidia | Monokai-style, high-energy colors | Short, punchy snippets |
| GitHub Light | Crisp, high contrast on white | Docs, print, light slides |
| One Light / Night Owl Light | Soft light backgrounds | Blogs with off-white pages |
Whatever you choose, check the token types that carry your message. Comments, punctuation and parameters are often the lowest-contrast colors in a theme; if your point is in a comment, make sure it is readable. The alt text and accessibility guide covers contrast guidelines in more detail.
Font size, padding and line spacing
- Font size: bigger is almost always better. When the image feels crowded, remove code before shrinking text.
- Padding: space around the window helps an image breathe in a feed. In slides and docs, a tighter frame makes the code larger relative to the space it takes.
- Line height: around 1.5× the font size keeps lines distinct without wasting vertical space.
- Line numbers: useful when your caption refers to a specific line ("see line 4"); otherwise they add noise.
Choosing a background
The background behind the window is a frame, not the subject.
- Dark, low-saturation gradients keep attention on the code — a good default.
- Bright, bold gradients suit launch announcements, where the image is a brand moment.
- Solid brand colors make a series of images recognizable in a feed.
- Transparent backgrounds are best when the image sits on a page or slide with its own background color, so there is no visible rectangle.
Recommended combinations
| Use case | Theme | Font | Background |
|---|---|---|---|
| X or LinkedIn post | Dracula or One Dark | JetBrains Mono | Subtle gradient or brand color |
| Documentation on a white page | GitHub Light | IBM Plex Mono | Transparent |
| Dark conference slides | One Dark | Cascadia Code, very large | Transparent or matching dark |
| Beginner tutorial | VS Code Dark | Source Code Pro, no ligatures | Subtle |
| Launch announcement | Dracula or Shades of Purple | Geist Mono | Bold brand gradient |
All of these themes and fonts are available in Codeshot's code to image generator, SQL query tool and regex image tool, so you can compare them on your own snippet in a few seconds. For how much code to show and how to caption it, see the code screenshot best practices.
Frequently asked questions
What is the best font for code screenshots?
JetBrains Mono is a strong default because its tall x-height keeps text legible when images are scaled down. Cascadia Code, IBM Plex Mono and Source Code Pro are also excellent, highly legible choices.
Should I use a dark or light theme for code images?
Match the destination. Dark themes stand out in social feeds; light themes blend into white documentation pages and print better. Check that comments and punctuation stay readable either way.
Should I use font ligatures in code screenshots?
Avoid ligatures in tutorials and documentation, where readers may retype the code and need to see the actual characters. Ligatures are fine in showcase images where appearance is the point.
What font size should code be in a screenshot?
As large as the snippet allows. Test the exported image on a phone: if you have to zoom to read it, show fewer or shorter lines rather than reducing the font size.