Web typography: a refresher and history

Many designers still think in px first when creating baseline styles. But we know intellectually that various relative typography approaches are better suited to our medium in all its complexity. Better for accessibility. Better for avoiding bizarre typographic disasters linked to user preference settings, device limitations, and the unforeseen ways our overwrought styles can interact with one another.

As I contemplate a long-overdue redesign of my own site, it’s worth taking a refreshing dip into what we’ve learned about web typography over the past 20+ years. From the pages of (where else?) A List Apart:

Bojan Mihelac: “Power to the People: Relative Font Sizes” (2004)

An early and simple creative solution for text resizing that respects users’ choices and also gives them an additional option for resizing despite the limitations of some of the most popular browsers of the day. Presented for its historical importance, and not as a how-to for today. https://alistapart.com/article/relafont/

Lawrence Carvalho & Christian Heilmann: “Text-Resize Detection” (2006)

Detect your visitors’ initial font size setting, and find out when they increase or decrease the font size. With this knowledge, you can create a set of stylesheets that adapt your pages to the users’ chosen font sizes, preventing overlapping elements and other usability and design disasters. Presented for its historical importance as an insight into the complex dancing we’ve done in the past to ensure readability. https://alistapart.com/article/fontresizing/

Richard Rutter: “How to Size Text in CSS“ (2007)

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), provides accurate, resizable text across all browsers in common use today. An early move toward more responsive type and away from the accessibility problems created by setting text sizes in px in some browsers and devices. https://alistapart.com/article/howtosizetextincss/

Wilson Miner: Setting Type on the Web to a Baseline Grid

The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page. The magical end result is that all the text on your page lines up across all the columns, creating a harmonious vertical rhythm. https://alistapart.com/article/settingtypeontheweb/

Tim Brown: “More Meaningful Typography” (2011)

Introduces modular scales, the golden ratio of readable typography. Delivers accessibility plus aesthetic beauty derived from the math underlying all of creation. https://alistapart.com/article/more-meaningful-typography/

Tim Brown: “What is Typesetting?” (2018)

“We must now practice a universal typography that strives to work for everyone. To start, we need to acknowledge that typography is multidimensional, relative to each reader, and unequivocally optional.” https://alistapart.com/article/flexible-typesetting/

Keep going…

For more web design community wisdom and web typography history, see Typography & Web Fonts in A List Apart, for people who make websites.

And in the Comments below, please share your favorite resources for creating websites that look great and read beautifully, no matter what technical and human capabilities get thrown at them.