Web Typography

Typography on the web is about readability, hierarchy, and user experience. Here are three websites that get it right.

Stripe (stripe.com)

Stripe’s website feels effortlessly professional. They use their custom Stripe Sans typeface with bold, confident headings and lighter body text that’s easy to read. What stands out is the generous white space—nothing feels cramped. The simple black text on white backgrounds creates high contrast without distraction. When you resize your browser or view it on mobile, everything scales perfectly. It’s clean, modern, and trustworthy—exactly what you’d expect from a payment platform.

Medium (medium.com)

Medium is built for reading. The line length sits at that sweet spot of 60-70 characters, and the generous line spacing (around 1.6-1.8) keeps text from feeling crowded. They use a serif font like Charter or Georgia, which feels comfortable for longer articles—like reading a book rather than scanning a webpage. Large headings draw you in, but once you start reading, the body text just works. You forget about the design and focus on the content, which is exactly the point.

Apple (apple.com)

Apple’s typography is theatrical. Their San Francisco font system, designed specifically for screens, creates massive hero text that feels powerful without being overwhelming. As you scroll, the text scales down naturally, maintaining perfect readability. Subtle color variations and font weights guide your eye exactly where they want it to go. The letter-spacing is immaculate—every headline feels perfectly balanced. Most people won’t notice these details consciously, but they’ll feel the premium quality. That’s how Apple uses typography to elevate their brand.

These three sites share key principles: clear hierarchy, generous white space, readability first, and consistency. Great web typography doesn’t show off—it serves the content so well that users don’t notice it. It’s about making deliberate choices about size, spacing, and contrast, then sticking with them. The best typography does its job quietly, letting the content shine.

References

MDN Web Docs: Web Fonts – https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

Modern Font Stacks – https://modernfontstacks.com/