.png)
1 day ago
2
In this article:
I’m constantly building side-projects. So what does every side project need? You guessed it — a banger font (or seven).
(Your latest SaaS also needs users, but… fonts are fun 😅)
I got sick of hunting around Google Fonts for fonts I liked, so I’ve compiled this list of my favorite SaaS fonts.
These fonts are great for landing pages, particularly headings. I’m sure they’d also work well for body text under the right conditions, but I’m typically far less adventurous there and just stick with Inter (or even ui-sans-serif).
The fonts
Each section below is styled in its font. They each link to their Google Fonts page, and at the end, I’ve included a drop-in block of CSS @imports so you can easily test all these fonts at once.
Mona Sans
Mona Sans is a versatile, sans-serif font with clean lines & modern curves. It works well in headings or UI text.
Mona Sans, a SaaS font worth trying.
Playfair Display
Playfair Display is a high-contrast serif font, perfect for a more elegant look. It includes a very fancy looking italic font family as well.
Playfair Display, a SaaS font worth trying.
Poppins
Poppins is quite a geometric font. I tend to prefer it large, so think headings or subheadings on dashboards or landing pages.
Poppins, a SaaS font worth trying.
Archivo
Archivo is quite a striking, grotesque (grotesk) style of font. It's designed for strong headings and highlights.
Archivo, a SaaS font worth trying.
Lora
Lora brings warmth to your writing. Unlike many of the fonts on this list, it excels as body text: perfect for long-form text and thoughtful design.
Lora, a SaaS font worth trying.
DM Sans
DM Sans is a low-contrast, geometric sans-serif font with a friendly feel. It works well for mobile and small text, although personally, I prefer it for headings.
DM Sans, a SaaS font worth trying.
Poetsen One
Poetsen One is a heavyweight, playful font with character. Use it sparingly for headings or accents (even this sentence is too much). It's only got a single weight, making it less versatile than other fonts here.
Poetsen One, a SaaS font worth trying.
Plus, more bonus fonts
I couldn’t help myself! These fonts deserve an honorable mention: Inter because, well, it’s Inter. What more do you need me to say?
JetBrains Mono because it’s a great monospaced font, and it rounds out the full spectrum of fonts in this article.
Inter
You know Inter. I know Inter. It's clean and simple (it's what I use for this site) and often easy to forget.
Inter, a SaaS font worth trying.
JetBrains Mono
Handy @import code block
Here’s a code block you can drop into your main CSS file. It imports all the fonts from this article in one go.
This makes it easy to test out each font. Once you’ve decided on a few to keep, make sure to remove the rest (to save bandwidth for your users):
I’ve written separately about how to import custom fonts into Tailwind CSS, which you might find handy.
