Web Typography Resources
A growing list of web typography related apps, tools, plugins and other resources for web designers and web developers.
Web Typography Quiz
Web typography is a bit tricky. Take this web typography quiz and test your typography knowledge.
Check it out ➝Font Memory Game
Recognizing different styles of fonts is one of the most challenging parts of typography. This game helps you train your eyes to notice the smallest details.
Check it out ➝Equilateral Triangle of a Perfect Paragraph
A learning game that teaches players how to shape typographically perfect paragraphs.
Check it out ➝Better Web Typography for a Better Web
A comprehensive web typography book for web designers and web developers.
Check it out ➝Basics
Typography Inspector
Typography Inspector analyses the typography on your site and helps you improve it.
Check it out ➝45to75
Character counter for helping to optimize line length (measure) between 45 and 75 characters.
Check it out ➝More Perfect Typography
At long last, designers can use real fonts on the web. But what now? Where do we go from here?
Check it out ➝Universal Typography
The web is universal and, in this renewed talk, Tim Brown shows how to practice typography in a way that is equally universal.
Check it out ➝On Web Typography
Through an understanding of our design tools and how they relate to the web as a medium, we can empower ourselves to use type in meaningful and powerful ways.
Check it out ➝Kerntype—a Kerning Game
Train your eyes to become a pro at kerning with this fun kerning game.
Check it out ➝Font Tools
SkyFonts
Install fonts from participating sites with a single click. Fonts are installed from the cloud on your computer in seconds.
Check it out ➝FontBase
FontBase is a free, beautifully crafted font utility for designers, that gives you all the possibilities of Fontcase.
Check it out ➝RightFont
Sparking font manager to preview, sync, install and organize fonts, with flawless integration into any design software.
Check it out ➝BirdFont
Birdfont is a free font editor which lets you create vector graphics and export TTF, EOT and SVG fonts.
Check it out ➝FontForge
FontForge is a free and open source font editor brought to you by a community of fellow type lovers.
Check it out ➝Fontown
Fontown is a beautiful typefaces library ready-to-use with a powerful application to organize and share your fonts.
Check it out ➝Typeface Anatomy
Recognizing & Choosing Fonts
FontFace Ninja
Fontface Ninja is a browser extension that let you inspect, try, bookmark and buy fonts on any websites.
Check it out ➝Web Font Specimen
Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web.
Check it out ➝Web Font Previewer
This extension allows you to test webfonts out on any website and target which elements the fonts should be applied to.
Check it out ➝TypeWonder
This extension helps you to test webfonts on active chrome tab via typewonder.com.
Check it out ➝Google Font Previewer for Chrome
Lets you choose a font from the Google Font directory with a few text styling options, and preview them on the current tab.
Check it out ➝Combining Fonts
Typespiration
Free inspirational web font combinations with color palettes and ready-to-use HTML/CSS code.
Check it out ➝FontPair
An awesome collection of font combinations from real websites. Inspiring stuff.
Check it out ➝Variable Fonts
OpenType
Normalize OpenType
Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
Check it out ➝Typeset.js
A typographic pre-processor for your html which uses zero client-side JavaScript and gives you advanced typographic features.
Check it out ➝Syntax for OpenType features in CSS
Individual OpenType features and how to use them in CSS.
Check it out ➝Vertical Rhythm
Visual Hierarchy
Typographic Scale
This plugin generates a typographic scale from selected text layers.
Check it out ➝Modular Scale
The Modular Scale calculator multiplies your scale’s base with a ratio to produce a scale of numbers that are proportionally related.
Check it out ➝