Work Sans and Bitter: A Font Pairing Guide
How to pair Work Sans and Bitter: a screen-ready sans for headings and a slab serif for readable body text. Weights, use cases, setup, and OFL licensing.
Work Sans & Bitter
The quick brown fox jumps over the lazy dog. Good type is invisible until you need it to work — in a headline, a caption, a long read at 11pm.
Quick answer: Use Work Sans for headings and Bitter for body text. Work Sans is a clean grotesque-style sans-serif optimized for screens, while Bitter is a sturdy slab serif designed for comfortable on-screen reading. The sans headings feel modern; the slab-serif body adds warmth and steady rhythm. Set Work Sans 600 and Bitter 400.
Work Sans and Bitter pair a screen-friendly sans-serif with a slab serif built for reading, giving you headings that feel modern and body text that feels solid and warm. Both were designed with the screen in mind, so they hold up well across devices.
Why Work Sans and Bitter work together
Work Sans is a grotesque-style sans-serif whose middle weights are optimized for on-screen text and whose heavier weights make clean, confident display type. Bitter is a contemporary slab serif designed specifically for comfortable reading on screens, with sturdy slab serifs and a steady rhythm. Setting a crisp sans against a slab serif gives clear hierarchy while keeping a consistent, contemporary tone—slab serifs read as modern rather than old-fashioned, so the two faces feel like they belong together.
- Serif vs. sans contrast: Bitter’s blocky slab serifs stand clearly apart from Work Sans’s clean, straight strokes.
- Screen-first design: both families were drawn for digital reading, so they stay sharp at a range of sizes.
- Balanced warmth: Work Sans is neutral and modern; Bitter adds a little solidity and warmth to paragraphs.
How to set it up: headings vs. body
Let Work Sans lead the display layer and Bitter carry the reading layer. Work Sans works well for H1–H3 headings, navigation, and buttons, especially in SemiBold or Bold where its clean shapes feel assured. Bitter handles paragraphs, blockquotes, and captions; its slab serifs give long text a stable, readable rhythm.
Both families offer many weights, so you have room to build a clear scale. Keep headings at Work Sans 600–700 and body at Bitter 400, using Bitter 700 for emphasis. Bitter has a comfortable x-height, so around 18px with a 1.6 line-height reads well. You can also reverse the pairing—Bitter headings over Work Sans body—for a sturdier, editorial look.
| Role | Font | Weight |
|---|---|---|
| Page title (H1) | Work Sans | 700 |
| Section heading | Work Sans | 600 |
| Body text | Bitter | 400 |
| Emphasis in body | Bitter | 700 |
| Buttons / nav | Work Sans | 500–600 |
Where to use this pairing
Work Sans and Bitter suit blogs, documentation, product and marketing sites, knowledge bases, and long-form articles—anywhere readability matters and you want a modern, approachable tone. Because both were made for screens, they are a safe choice for responsive sites that must look good on phones and desktops alike.
If your design needs a delicate, luxury serif feel, a higher-contrast serif would be a better body choice than a slab. But for clear, friendly, screen-first content, this pairing is hard to beat.
How to add Work Sans and Bitter
Both families are on Google Fonts. Link them in your head or self-host the files, then set roles with CSS.
- Load Work Sans 600/700 for headings and Bitter 400/700 for body and emphasis.
- Set font-family: ‘Work Sans’, sans-serif; on headings and font-family: ‘Bitter’, serif; on body.
- Include a
sans-serif/seriffallback and usefont-display: swapto avoid blank text while fonts load.
Licensing and cost
Work Sans and Bitter are both free and open source under the SIL Open Font License (OFL) 1.1. You can use them in commercial and personal projects, embed them on websites, bundle them into apps, and use them for client work at no charge. As with all OFL fonts, you cannot sell the font files on their own, but every normal use is free.
Building a clear type scale
Both families have generous x-heights, so they size predictably. Anchor the scale on Bitter body at 18px, then step Work Sans headings up: 22px H3, 28px H2, and 40px H1 make a clean, readable progression. Keep heading line-height around 1.2 and Bitter body near 1.6. Because Bitter’s slab serifs add visual weight, you rarely need bold body text—reserve Bitter 700 for genuine emphasis so it stays meaningful.
Watch the overall color of the page. Slab serifs put more ink on the line than a light sans, so a wall of Bitter can feel heavy if the line-height is too tight. A touch more leading keeps long passages breathing. For headings, Work Sans in SemiBold gives a confident tone without shouting; save the heaviest weight for the single most important title on the page.
Common mistakes to avoid
- Tight leading on Bitter: slab serifs need a little room; cramped lines make the body feel dense.
- Overusing bold body: Bitter already reads as solid, so keep 700 for real emphasis only.
- Loading too many weights: both families are large; pick two per role to keep the page fast.
- Using Bitter for tiny UI chrome: its serifs shine in reading text, not micro-labels—use Work Sans there.
- No
font-display: swap: without it, slow loads can leave readers staring at blank text.
Accessibility and performance notes
This pairing is a strong accessibility choice because both faces were designed for screen reading: keep Bitter body at 16px or larger, hold a comfortable line-height, and maintain solid contrast against the background. For performance, both Work Sans and Bitter are variable fonts on Google Fonts, so a single variable file can replace several static weights and cut requests. Preload the heading weight, subset to the languages you support, and use font-display: swap so text stays visible while the fonts download.
Frequently asked questions
Are Work Sans and Bitter free for commercial use?
Yes. Both are licensed under the SIL Open Font License 1.1, allowing free use in commercial and personal projects, including websites, apps, and print.
Is Bitter good for body text?
Yes. Bitter is a slab serif designed specifically for comfortable reading on screens, so it works well for paragraphs and long-form content.
Can I reverse the roles?
You can. Bitter makes sturdy, editorial headings with Work Sans as a clean sans body. Choose one direction and apply it consistently across the site.
Which weights should I load?
Work Sans 600 and 700 for headings, plus Bitter 400 and 700 for body and emphasis, gives a clear scale without loading too many files.
Do these fonts work well on mobile?
Yes. Both were designed for on-screen reading and stay legible at smaller sizes, which makes them dependable for responsive, mobile-first layouts.