Font family
Bitter font
Bitter is a slab serif designed for long-form screen reading. It has a tall x-height and open counters that hold up at small sizes.
The quick brown fox jumps over the lazy dog 0123456789
Uppercase
Lowercase
Digits
Punctuation
Click any glyph to copy it to your clipboard.
- 100Hamburgevons
- 200Hamburgevons
- 300Hamburgevons
- 400Hamburgevons
- 500Hamburgevons
- 600Hamburgevons
- 700Hamburgevons
- 800Hamburgevons
- 900Hamburgevons
Font Details
- Designer
- Sol Matas
- Foundry
- Sol Matas
- Source
- Google Fonts
- License
- OFL-1.1
- Category
- slab
- X-height
- high
- Styles
- normal, italic
- Subsets
- latin, latin-ext, vietnamese
- Weights
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Variable
- Yes
- Popularity
- 70/100
- Tags
- slab-serif, body, readable, variable
- wghtmin 100max 900default 400
Character and Use Cases
Bitter , Bitter is the slab serif in the catalog, drawn by Sol Matas with sturdy square serifs and a full weight range. It brings the blocky, industrial character of a slab while staying refined enough for headings, pull quotes, and editorial accents.
Use Bitter for headlines that need physical presence: editorial openers, brand titles, section headers, and poster work. Its variable weight axis runs from 100 to 900, which is more range than most slabs offer, and the stronger weights handle display sizes without crumbling into a block of ink.
400 to 600 for subheadings and medium display; 500 to 700 for hero titles; the 800 to 900 range is for poster-scale moments only. Keep letter-spacing at normal, because heavy slabs close up quickly when spaced out.
Production Code
Copy-paste into your project. No build step required.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bitter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">Pairings using Bitter
View allThe art of typography
Good typography is the visible voice of design, quiet when it should be, loud when it must.
PreviewBitter + Inter
Bitter headings over Inter body. A slab serif tuned for screen reading sits on top of the most legible UI sans available.
The art of typography
Good typography is the visible voice of design, quiet when it should be, loud when it must.
PreviewBitter + Roboto
Bitter headings over Roboto body. A slab serif tuned for screens handles the titles, and Roboto carries the body with its neutral humanist forms. A solid pairing for long-form blogs and reading-heavy apps.
The art of typography
Good typography is the visible voice of design, quiet when it should be, loud when it must.
PreviewArchivo + Bitter
Archivo headings over Bitter body. A grotesque sans with tight spacing for headlines and a slab serif tuned for screens for body. A practical pairing for news and editorial sites with high text density.
Frequently Asked Questions
- Does Bitter work as a body text font?
- Its medium weights can carry short paragraphs, but the thick strokes tire readers in long sections. Reserve the serious body text for a sans or a text serif and keep Bitter for the headlines.
- Is Bitter free for commercial use?
- Yes, it is released under the SIL Open Font License, so it can be embedded and served in commercial projects without payment.
Test Bitter in the playground
Drop Bitter into the typography playground, mix it with another family, and check contrast on real text.