This site started life from a short talk about the future and the importance of typography on the web. Web designers and developers are going to shape the coming years of global visual communication. The web spans many contexts and setting text that responds appropriately to those contexts is key. We still don’t yet have the level of control on the web as we have in print, and until we do we cannot fully explore what the medium holds for type. We cannot forget the centuries of work that has gone into figuring out solutions to similar problems, albeit in different contexts. We need to learn how to make better informed typographic decisions and not be put off by typography.

Books are obviously a great place to start when researching any given subject. There are many books out there on the history and theory behind typography so I’ve narrowed it down to a key few that can help you learn all about it. This is by no means a complete list, nor do you have to go and buy all of these straight away. They are however, all worth a read if you have some time.

The Elements of Typographic Style

by Robert Bringhurst

Often hailed as the bible of typography. A wealth of information in here. If you still haven’t read it, why not this is recommended everywhere!

View on Goodreads

Inside Paragraphs

by Cyrus Highsmith

All you need to know about setting text at the paragraph level and beyond. Great illustrations to accompany the ideas.

View on Goodreads

On Web Typography

by Jason Santa Maria

One of the only of the books listed here specifically about the web. Just about all the things you need to get going are in here.

View on Goodreads

Detail in Typography

by Jost Hochuli

I still remember picking up the remnants of my brain off the floor after having my mind blown the first time I read it.

View on Goodreads

Typographic Web Design

by Laura Franz

Booked as “How to Think Like a Typographer in HTML and CSS”, this is a great starting point for applying typographic principles to the web.

View on Goodreads

Counterpunch

by Fred Smeijers

The trials & tribulations of making metal type by hand makes for fascinating reading. A glimpse into the past can only help us make the future.

View on Goodreads

There are lots of great blogs out there that focus on typography, many of which you will know of already. There’s also a wealth of individual posts that are easily lost in the ether. Here are some of those. I’ll try to keep these updated with recent posts too.

Typekit Blog

News on the latest works in web font serving, typography on and off the web, new fonts, and weekly inspiration.

blog.typekit.com

I Love Typography

John Boardley’s blog on typography. Keep up with all the latest news from the world of fonts and read longer in depth articles on typography.

ilovetypography.com

“The Web is Terrible For Typography”

Part of the ‘Dear Design Student’ series which answers the question ‘I’m a print designer. How can I learn about web typography?’

Read on Medium

“Web Design is 95% Typography”

A classic post from 2006(!). It was very controversial at the time. Well worth reading again. Also includes a list of resources.

Read on the iA blog

“More Meaningful Typography”

Learn how to make meaningful choices using ratios and modular scales to create a visual harmony to your compositions.

Read on A List Apart

“Efficient Web Type, c. 1556”

Kenneth’s talk in blog form. Lots of great information on performance and implementation in here.

Read on Kenneth Ormandy’s blog

This is somewhat of an awkward title for the grouping for these resources but these don’t quite fit in under blogs or books. Many of these are perhaps the best places to start, if you want to learn more about typography on the web.

Typo Guide

Lots of really handy tips and good advice to guide you. Once available as a pocket book too, keep an eye out if they do another print run.

Visit

Practical Typography

Typography in ten minutes, a bold claim — but justified. A great starting point. Although remember that ‘rules’ is a loose term.

Visit

Pro Web Type

An online book to Professional Web Typography. Read it and give Donny some money to support his self-publishing. This is good.

Visit

Typekit Practice

‘Good decisions take practice’. Lessons, examples to work on, references, and resources. This is exciting stuff.

Visit

Universal Typography

I had the pleasure of finally seeing Tim Brown speak at a conference recently. Incredible. This is the online home of his talks (and more).

Visit

The State of Web Type

It’s like caniuse but specifically for web type and typography. Open source up-to-date browser support data. Nice.

Visit

If you fancy watching, or re-watching, some great conference talks on typography here are a few of my favourites.

More Perfect Typography

Tim Brown, Build conference 2010.

Watch

On Web Typography

Jason Santa Maria, Build conference 2011.

Watch

Advanced Web Typography

Elliot Jay Stocks, Kerning conference 2014.

Watch

Web Typography You Should Be Doing Now

Rich Rutter, Up Front conference 2015.

Watch

A selection of side projects that show off ideas that could be native web experiences and tools to help you improve the typography in your web projects.

Type Rendering Mix

Apply different styles based on the text rasterizer and antialiasing the browser is using.

typerendering.com

Modular Scale

The only modular scale calculator you need. See also the Sass and JS plugins.

modularscale.com

Typecast

Set text in browser in any web font you can dream of.

typecast.com

Web Font Loader

What probably loads the fonts on your website, from Google and Typekit.

View on GitHub

Normalize-Opentype.css

All the OpenType features you need baked into a version of normalize.css.

View on GitHub

Sassline

Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.

View on GitHub

Typeset

Magical typesetting wizardry using Node to pre-process your HTML.

View on GitHub

Typesetter.js

More wizardry as far as I’m concerned. Open sourcing good typography.

View on GitHub

Hypher

A small and fast JavaScript hyphenation engine. Much better than your browser.

View on GitHub

Typeset (line breaking)

A JavaScript implementation of what we should be able to do in browsers for justification.

View on GitHub

Type.js

Nathan gives us some typographic tools for better web type.

View on GitHub

Font Face Observer

Want to roll your own font events? Well, you can. Thanks Bram.

View on GitHub

These are but some of the people who are working to progress web typography. Check out their work, follow them, and talk to them. We’re all in this together. (Names in no particular order).

Nathan Ford

@nathan_ford

Tim Brown

@nicewebtype

Robin Rendle

@robinrendle

Marcin Wichary

@mwichary

Bram Stein

@bram_stein

Richard Rutter

clagnut

Nick Sherman

@NickSherman

Nina Stössinger

@ninastoessinger

Viljami Salminen

@viljamis

Erik Van Blokland

@letterror

Scott Kellum

@ScottKellum

Jason Santa Maria

@jasonsantamaria

Elliot Jay Stocks

@elliotjaystocks

Andreas Carlsson

@nofont

Kenneth Ormandy

@kennethormandy

Donny Truong

@visualgui

Zach Leatherman

@zachleat

Trent Walton

@TrentWalton

Marko Dugonjić

@markodugonjic

Jason Pamental

@jpamental

Jessica Hische

@jessicahische

Indra Kupferschmid

@kupfers

Matthew Butterick

@mbutterick

Jake Giltsoff (…me)

@jakegiltsoff

Want some science to back these ideas up? Here are some that might come in useful.

The Aesthetics of Reading

by Kevin Larson, Rosalind Picard

‘Good typography induces a good mood’. An all time favourite piece of research. A++ would quote again.

View PDF

Reading from paper versus screens

by Andrew Dillon

‘The question is not can we do everything on screens, but when will we, how will we and how can we make it great?’

Read online

How physical text layout affects reading from screen

by Mary Dyson

‘The number of characters per line is an important variable which can affect speed of reading’

View PDF

The Science of Word Recognition

by Kevin Larson

‘Word shape is no longer a viable model of word recognition … we recognize a word’s component letters, then use that visual information to recognize a word’

Read online