DEV Community

Alex
Alex

Posted on Originally published at logoray.com

The 7 fonts that survive a SaaS browser tab (and how I test them)

I build LogoRay, a tool that composes a full brand kit around a name. After watching thousands of names run through it, I am convinced the most common mistake in a SaaS logo has nothing to do with the mark. It is the font, chosen at the wrong size.

A SaaS name does not live on a billboard. It spends its life at 13 to 20 pixels: a browser tab, a sidebar, an app switcher, a favicon with three letters next to it. Designers pick the font at 80 pixels in Figma, where everything looks good, then ship it to the one place it was never tested. So here is what I learned building the pairing engine, and the short list that survives where SaaS actually gets seen.

Three properties decide it, and none show up on a specimen page

The first is x-height. The taller the lowercase, the more of each letter survives when the name renders at 16 pixels next to your favicon. Low-x-height display faces look elegant large and turn to mush small.

The second is tracking behavior. Display faces that look sharp at 80 pixels often have spacing that closes up as they shrink, welding letters together exactly where users see the name most. A face has to hold its spacing down at product-UI sizes, not just at hero sizes.

The third is dark-mode behavior. Most SaaS products ship a dark surface somewhere, and thin strokes that look refined on white either vanish on near-black or bloom into a halo. Sturdy, even-weight faces with open counters pass all three tests. That is why my shortlist is all grotesks and geometrics, and why it is much shorter than any font library suggests.

The shortlist

For the name itself, a grotesk or geometric sans with a tall x-height and open counters, paired with a neutral body face. Space Grotesk, Sora, Schibsted Grotesk, Hanken Grotesk, Outfit, Familjen Grotesk, and Gabarito all qualify. Which one wins depends on whether the product should read engineered, calm, editorial, or friendly. There is no single best face, but there is a clear shortlist, and it fits on one hand twice.

Almost always sans-serif for the name. A SaaS name lives at tab size, where serif detail turns to noise. High-contrast serifs like Playfair Display or Gloock belong to editorial and luxury brands that are seen large. The exception is a deliberate contrarian play, and it only works when the serif stays sturdy small.

The body face should be boring on purpose

Almost every pairing I trust resolves to Inter on the body side. That is not a lack of imagination. A neutral body face is what gives the display face room to have a personality. When both the headline and the body try to be interesting, they fight, and the brand reads busy at every size. Pick one voice for the name and let the rest recede.

What I avoid, every time

Novelty display faces. Anything that announces a genre, brush scripts, pixel faces, rounded bubble fonts, ages at the speed of the trend that produced it and reads wrong the moment the product moves upmarket.

Fake-tech stencil and sci-fi fonts. Angular cuts, missing crossbars, and stencil gaps signal "technology" the way a stock photo of a hooded figure signals "hacker". Real technical brands run the other way: calm grotesks, even color, no costume.

Ultra-thin weights. A hairline wordmark disappears on a dark surface and breaks up at small sizes. Even-weight or medium holds together everywhere.

How to test a font in two minutes

Set the name at 16 and 20 pixels, on both a white and a near-black background. Then look at three things: do the letter counters stay open, does the spacing between letters close up, and do the strokes vanish or bloom on the dark version. A pairing that passes at 16 pixels passes everywhere. The reverse is not true, which is the whole trap.

One more question I get: are Google Fonts good enough for a commercial SaaS logo? Yes. Every face on my shortlist ships under an open license, most commonly the SIL Open Font License, which permits commercial use including logos. These are the same faces shipping in well-funded product brands today. Check the license file on each family's Google Fonts page before you commit, because terms can differ per family.

See them on your own name

Reading about type is close to useless. The test that matters is your own product name, at the size it will actually render. I put all 16 pairings and 12 palettes on one page in LogoRay so you can type your name once and judge every option on the word that matters: the font pairings page. If you want to see the SaaS registers as finished marks rather than raw type, the indie SaaS logo ideas page renders them as complete lockups.

The font is the part of a logo that gets chosen fastest and regretted longest. Give it the two minutes at 16 pixels, and most of the regret never happens.

Top comments (0)