Death to typewriters

Part II.
Making type read well and look good

Marcin Wichary
Feb 9, 2015 · 3 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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).

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

« Part I · Part III »

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store