avatarMarcin Wichary

Summary

Medium's design philosophy focuses on meticulous typography to enhance readability and aesthetic appeal on both screen and print.

Abstract

Medium emphasizes the importance of detailed typography in digital publishing, drawing inspiration from the story of Bell Centennial, a typeface designed for phonebook printing. To achieve optimal on-screen font appearance, Medium employs custom font smoothing, adjusts line height and tracking, and ensures proper kerning. They also support ligatures and cherry-pick glyphs to improve font delivery speed and aesthetics. Medium's attention to typographic detail extends to using different fonts for specific glyphs and aligning code text for a consistent look across various text styles. Additionally, they ensure that content printed from their platform maintains high visual quality.

Opinions

  • Medium values the balance between font legibility and visual appeal, avoiding fonts that are too thin or too thick.
  • The platform prioritizes the use of ligatures and proper kerning to enhance the reading experience.
  • Medium is selective about the characters included in their font files, removing rarely used characters to optimize font loading times.
  • They believe in using the best-suited fonts for specific characters, even if it means combining fonts.
  • For code blocks, Medium chooses a font that maintains consistent text measure across normal, bold, and italic styles to ensure alignment.
  • Medium is committed to delivering a high-quality reading experience, whether on-screen or in print.

Death to typewriters

Part II. Making type read well and look good

We like the story of Bell Centennial, a typeface designed deliberately to be printed on a crappy phonebook paper. The shapes of Bell Centennial letters look weird when seen out of context… before you know that, during printing, the ink will spread out and make the letter forms look as intended.

This is the level of detail we want to see on Medium. Here are some things we’re doing:

Font smoothing. We specify custom smoothing to make sure the font we use looks exactly right on the screen: not too wispy, not too thick.

Line height and tracking. We adjust line height and tracking (letter spacing) of the fonts on our platform so it looks more legible and beautiful.

Kerning. We switch our text rendering CSS option to optimizeLegibility, allowing — among other things — for proper kerning.

Ligatures. The above, plus the fact we make sure that the ligature glyphs are present in the fonts we’re serving, allow us to automatically support common ligatures (fi, fl, ff, ffi, ffl).

There is nothing more amazing than seeing ligatures assemble under your text pointer as you’re writing.

Cherry-picking glyphs. As we construct font files, we make sure that the characters we want are in there (namely ligatures and various spaces), but we also remove some for faster delivery of fonts (for example, rarely used math characters go away).

Using different fonts for specific glyphs. We also cherry-pick characters from other fonts if we don’t like them in default ones, for example redacted characters ██████ go directly to Cambria and the pilcrow (¶) falls back to Arial.

Code text alignment. For code blocks, we picked the font (Menlo) where normal and bold and italic text have the same measure. This ensures that code columns will align regardless of styling.

Printing. We makes sure your stories look good in print.

« Part I · Part III »

Typography
Medium
Recommended from ReadMedium