Your headline is too bold

Nobody outside of design ever gets a real grip on typography, and it shows. Four fixes below for the mistakes that give you away as an amateur every time, and every one of them takes less than a minute.

1. Take your headline off bold

Move your display type from 700 to 600, or go all the way to 500. Change nothing else. Look at it again.

Bold exists to give type presence at small sizes. At 64px you already have presence, size handed it to you free, and piling 700 on top of that just closes up the counters and turns a nice face into a fat one.

The loudest person in the room isn’t the one everybody’s listening to.

Semi-bold shows that you can say what you mean with confidence and you don't have to raise your voice.

2. Use one typeface

If you can get most of the way there with one, you don’t need two.

If you can’t say out loud what the second face is for, that isn’t contrast. It’s decoration.

You already have four free ways to build hierarchy: size, weight, color, opacity. Drop your labels to 60%. Set your eyebrow one weight up and four points down. That’s more contrast than most pairings give you, and it can’t clash with itself.

3. You don't need the fancy typefaces

Sure, they look awesome and i think they are stylistically superior, but for most companies, they aren't worth it.

Expensive type is not what makes a brand look expensive. I’ve watched a five hundred dollar license get spent making something look worse, because the money went out the door before anybody decided what the type was supposed to do.

The knock on Google Fonts isn’t quality, it’s ubiquity, and the ubiquity is about six faces deep. Roboto, Montserrat, Instrument, Poppins, Open Sans, and Lato are all Google fonts that have been overused.

Six out of thousands. Curation is the whole skill and curation is one afternoon.

Here are some hidden gems:

Newsreader or Spectralfor real reading that feels like it's fresh off the press.

Outfitfor a clean, sleek tone.

Archivo for a workhorse with more spine than Inter.

IBM's suite when you need a variety that feels coherent.

There are even some typefaces that were created for specific companies, like Faculty Glyphic by Studio Koto, that was made publicly available.

Awesome, functional, and free.

4. Have your agent build a golden ratio derived type scale

The golden ratio is 1.618, but don’t use 1.618. Use its square root, 1.272, instead. Straight golden ratio compounds too hard across six steps and you end up with a display size that is super annoying.

The square root is still the golden ratio, derived from it rather than rounded off it, and it lands on sizes that actually feel calm: off a 16px base, roughly 16, 20, 26, 33, 42, 53, 68.

That’s every heading size on your site.

Nobody chooses 22px on purpose. 22px happens because 20 looked a little small in one card and nobody was keeping a list. Do that forty times and you’re running thirty sizes, which is the real reason the thing feels unfinished.

So ask your agent: “Type scale, 16px base, ratio is the square root of the golden ratio, about 1.272, six steps, as CSS custom properties in rem.” Thirty seconds and you have the tokens.

Then the rule that makes it worth anything: if a size isn’t on the scale, it doesn’t ship.

It also hands you real size contrast for free, which is most of why you didn’t need that second typeface.

Your agent will give you a set of body type sizes too for added variety.

Turn the headline down. Cut the second typeface. Stop shopping. Build the scale once and obey it.

Good typography doesn't need to be complex, in fact, I'd recommend against it heavily... unless you're David Carson.

— Zach 😎