DESIGN2026.04.12·3 MIN READ

TYPOGRAPHY AT SCALE

Display fonts that hit like a hammer. Impact, Haettenschweiler, and the art of uppercase letter-spacing in dark interfaces.

Typography in a dark interface is a different problem than typography on paper. The screen emits light; ink absorbs it. A display font that works on a white page can feel thin and brittle on a black one. The solution is not to switch fonts — it is to change the scale and the spacing.

IMPACT IS NOT IRONIC

Impact has a reputation as a meme font — bold text on images, the "Impact font" generator. But Impact is a serious display face: condensed, heavy, and designed for maximum legibility at large sizes. In a dark brutalist interface, set in uppercase with letter-spacing: -0.02em and line-height: 0.9, it hits like a concrete block. That is the goal.

"The font is not the message. The scale is the message. Impact at 12px is a joke; Impact at 80px is a statement."

LETTER-SPACING AS ARCHITECTURE

Letter-spacing is the most underused typographic tool in web design. Most developers set it to normal and never touch it. But in a brutalist system, letter-spacing has three distinct roles:

Three Spacing Zones

  • Tight (-0.02em to -0.025em): large display headlines. The letters almost touch, creating a solid mass of text that reads as a shape, not a sentence.
  • Neutral (0): body text. Default spacing. The reading rhythm is uninterrupted.
  • Wide (0.2em to 0.3em): small uppercase labels — nav links, eyebrows, metadata. The wide spacing signals system and separates the label from the content it describes.

THE DISPLAY / BODY CONTRAST

The contrast between display and body type should be extreme. If the display font is Impact at 80px, the body font should be Arial at 16px. That is a 5x ratio. The reader's eye moves from the hammer to the whisper in one beat. A system where the display is 32px and the body is 16px has no contrast — it has two sizes of the same voice.

Why Arial for Body?

Arial is not a beautiful font, and that is the point. It is neutral, widely available, and renders consistently across every platform. The display font carries the personality; the body font carries the content. When the body font is distinctive, it competes with the display font, and the hierarchy collapses. Arial does not compete. It serves.

MONOSPACE FOR METADATA

The third font in the system is monospace — Courier New or a system equivalent. It is used for code blocks, timestamps, and technical metadata. Monospace signals this is data, not prose. The fixed width aligns numbers and labels into columns without a table, and the typewriter aesthetic fits the brutalist ethos: functional, mechanical, honest.

CONCLUSION

Typography at scale is about contrast and spacing, not font selection. Impact, Arial, and Courier New are not exciting choices — they are correct ones. The excitement comes from the scale: 80px headlines, 16px body, 11px labels with 0.28em letter-spacing. The system speaks in three voices — hammer, whisper, and data — and each voice knows its place.