Setting a heavy poster headline font on the web

A heavy, one-weight poster face gives a landing page a voice nothing else can. This site's headlines use one, Gasoek One. It also taught us three ways such fonts fail on the web, each of which looks like a different bug.

Failure 1: faux bold

Headings default to bold. A font with only one weight has no bold, so the browser synthesises one by smearing every glyph sideways. The letters thicken and touch, and it looks like a tracking problem. It is not.

h1, h2, .display {
  font-family: "Gasoek One", sans-serif;
  font-weight: 400;          /* the only weight the font has */
  font-synthesis: none;      /* never fake bold or italic */
}

Failure 2: tracking that fuses letters

Heavy faces have very little space built in beside each letter. Tight tracking that works on a normal font removes most of it and fuses letters together. For Gasoek One, -0.01em is as tight as it goes. Test tracking on the actual font, at the actual size.

Failure 3: leading that clips descenders

Display type is set close to a line height of 1. But a heavy face's descenders plus cap height can exceed 1em, so a g or y on the first line runs into the second. For Gasoek One, 1.08 is the minimum. All caps headlines can go tighter because they have no descenders.

Where it belongs

• Hero headlines and section titles, from about 32px up.
• Never body text, buttons or prices.
• Below 32px, use the text face in bold instead.

The ghost line

A two-line headline can set its first line faded, a ghost, so the eye lands on the second. The ghost must still pass contrast as large text. It is the headline at the top of this site, and it pairs with a hero that shows the product. Pairing the display face with others is in font pairing.

Warm Storefront UI writes all of this down: Gasoek One at weight 400, -0.01em tracking and 1.08 leading, with a ghost first line that still passes contrast, so Claude sets the poster headline correctly from the first attempt.