Typography is one of those design decisions readers never consciously notice when it's done well, and immediately notice when it's done badly. A site with mismatched fonts, cramped line spacing, or body text that's slightly too small to read comfortably loses readers before they've even processed what you wrote. Get it right, and your writing just feels easier to read, without anyone quite knowing why.
Ghost has gotten genuinely good at this over the past couple of years, moving from "whatever your theme's developer hardcoded" to real, built-in typography control. Here's how it actually works, and how to make good decisions with it.
Ghost's Native Typography Settings
As of late 2024, Ghost added native support for custom typography, which means you no longer need to touch a single line of code to change your site's fonts. To find it, go to Settings → Design & Branding, click Customize, and scroll down to the Brand section, where you'll find a Typography option.
What makes this implementation worth appreciating, rather than just functional, is the curation behind it. Rather than handing you an enormous, overwhelming list of every font under the sun, Ghost deliberately curated a smaller set of typefaces that work well across almost any theme, explicitly favoring quality over quantity. The idea is that almost anything in that curated list will look professional and cohesive, rather than leaving you to accidentally pick something that clashes with your theme's layout.
One important caveat: this feature is only supported by the latest versions of Ghost's official themes. If you're running an older version of a theme, or a heavily customized one, you may need to update or reinstall it before the typography setting actually does anything. Going to Settings → Theme → Change theme and reinstalling your current theme is usually enough to pick up the update.
Heading Fonts vs. Body Fonts: Why the Distinction Matters
Most well-built Ghost themes let you set your heading font and body font independently, rather than forcing one typeface across your entire site. This isn't just a nice-to-have, it reflects how typography actually works in good design.
Headings are read in short bursts, a title, a section header, and they're meant to grab attention and establish hierarchy. A heading font can afford to have more personality: a touch of weight, a distinct character, something with a bit of presence. Body text, on the other hand, is what someone reads continuously for minutes at a time. It needs to disappear into the background and just be comfortable, which usually means something simpler, more neutral, and extensively tested for readability at length.
A common, reliable pairing pattern: a slightly more expressive serif or display font for headings, paired with a clean, highly legible sans-serif (or a different, simpler serif) for body text. This contrast creates visual hierarchy without needing color or size alone to do all the work.
What Actually Makes a Font Good for Reading Online
If you're choosing between options, whether from Ghost's curated list or elsewhere, a few practical qualities matter more than how stylish a font looks in a logo or headline:
- Legibility at small sizes. A font that looks beautiful at 48px in a heading might turn into a blurry mess at 16px in a paragraph. Always judge a body font specifically at the size it'll actually be read at.
- Generous x-height. Fonts where lowercase letters are proportionally taller relative to capital letters tend to read more comfortably on screens, especially at smaller sizes.
- Distinct character shapes. Make sure lowercase "l," uppercase "I," and the numeral "1" are actually distinguishable from each other. This sounds minor until a confusing font makes a code snippet or a name genuinely hard to read correctly.
- Reasonable letter spacing by default. Overly tight or overly loose default spacing can make long paragraphs feel either cramped or disjointed. Good web fonts are generally tuned reasonably well for this already, but it's worth a glance.
Going Beyond the Curated List: Custom Fonts and Code Injection
If none of Ghost's curated typefaces match what you're going for, you're not stuck. The most common way to add a genuinely custom font, say, a specific brand typeface or a Google Font not in Ghost's built-in list, is through Code Injection.
The general approach: add an @font-face rule (or a Google Fonts embed link) into your site's header through Settings → Code Injection → Site Header, then reference that font in your theme's CSS. This requires a bit more comfort with code than the native typography setting, but it's a well-documented, common pattern, and it doesn't require modifying your actual theme files if you'd rather avoid that.
For developers building or customizing a theme directly, Ghost's themes typically expose font choices through CSS variables, commonly something like a heading-font variable and a body-font variable, which makes swapping fonts across an entire site a matter of changing one or two values rather than hunting through every template file.
Custom Theme Settings: A Middle Ground for Theme Developers
If you're building or customizing a theme that you want other people (or future you) to be able to adjust without touching code, Ghost's custom theme settings system is worth knowing about. Theme developers can define a typography option as a dropdown directly inside the theme's configuration, giving site owners a clean choice between a couple of predefined typeface pairings (a "modern sans-serif" option and an "elegant serif" option, for instance) right inside Ghost Admin's design settings, with no code required on the site owner's end.
This is exactly the kind of setting that strikes the right balance Ghost recommends for custom theme settings generally: a meaningful visual choice, exposed simply, without turning into an overwhelming list of fifty micro-adjustments. Ghost caps themes at twenty custom settings total, which is a useful constraint, it forces theme developers to prioritize the handful of choices that actually matter rather than exposing everything that technically could be configurable.
Practical Pairing Advice for Common Site Types
A few starting points depending on what kind of publication you're building:
- Personal blogs and newsletters tend to do well with a warm, slightly more characterful serif for headings and a simple, highly readable sans-serif for body text, striking a tone that feels personal rather than corporate.
- News and magazine-style sites often lean toward classic serif pairings throughout, evoking the feel of traditional print publishing, which tends to read as more authoritative for hard news or analysis.
- Tech, SaaS, or documentation-style sites usually do best with clean, modern sans-serif fonts across both headings and body text, prioritizing clarity and a contemporary feel over personality.
- Portfolios and personal brand sites have the most room to experiment, since the goal is often distinctiveness, but it's still worth keeping body text simple even if your heading font is more expressive.
A Few Things to Avoid
- Don't use more than two font families on a single page. A heading font and a body font is usually the right amount. A third "accent" font for buttons or callouts can occasionally work, but it's easy to tip into visual clutter.
- Don't pick a font purely because it looks distinctive in a headline mockup. Always check it at actual body-text size before committing, since that's where most of your readers will spend most of their time.
- Don't ignore line height and paragraph spacing just because the font itself looks good. A great font with cramped line spacing still reads poorly. Most Ghost themes handle this reasonably well by default, but it's worth checking on an actual published post, not just a settings preview.
The Bigger Point
Typography is one of the cheapest, highest-leverage design decisions available on Ghost, now that it's a native setting rather than something requiring custom code. A few minutes spent choosing a heading and body font pairing that actually fits your site's tone, then double-checking it at real reading size, does more for how professional and readable your site feels than almost any other single design choice you'll make.
Get this right early, and it's one less thing to second-guess every time you sit down to write.
