Typography for the Web

As a digital designer with a foundation in print, I’ve always struggled with the lack of eloquence in typography on the web. I’d gotten so used to only having 4-5 web fonts to choose from that I stopped even considering them as an asset. I tried to use a couple of web fonts but they often ended up looking like a hot mess. I gave up.

Then I heard Jenn Lukas talk at An Event Apart Atlanta 2014 and… RAZZLE DAZZLE! I know I’m a little late to the game, but I was just looking in the wrong place. Typography on the web has come so far in the past few years. Here’s a collection of tools, inspiration, articles, and font foundries to get your started (and feel free to add your favorites!) :

Tools.

Typecast: http://typecast.com/
Create type compositions directly in your browser. No more guessing how content will look once it goes live.

What Font: http://chengyinliu.com/whatfont.html
Find which fonts are used on a webpage with a simple click.

FFFFallback: http://ffffallback.com/
Bulletproof web typography.

TypeWonder: http://typewonder.com/
Test fonts on a current website without writing a single bit of code.

Font-Combinator: http://font-combinator.com/
Test font combinations.

Inspiration.

TypeWolf: http://www.typewolf.com/
Typographica: http://typographica.org/
R-Typography: http://www.r-typography.com/
Friends of Type (not all web type): http://friendsoftype.com/
Good Typography (not all web type): http://goodtypography.tumblr.com/
Dribbble web type: http://dribbble.com/tags/web_type

Articles

Responsive Typography in Web Design: Understanding and Using
Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet)
The Era of Symbol Fonts
Don’t Fear Web Typography

Free/Open Source Web Type

The League of Moveable Type: https://www.theleagueofmoveabletype.com/
Google Fonts: https://www.google.com/fonts
Font Squirrel: http://www.fontsquirrel.com/