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

by Matej Latin

Quiz

Web typography is a bit tricky. Take this web typography quiz and test your typography knowledge.

Check it out ➝

Font Memory Game

by Matej Latin

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

by Matej Latin

Game

A learning game that teaches players how to shape typographically perfect paragraphs.

Check it out ➝

Better Web Typography for a Better Web

by Matej Latin

Book

A comprehensive web typography book for web designers and web developers.

Check it out ➝

A Guide to Combining Fonts

by Matej Latin

Guide

Five guidelines for making awesome font combinations.

Check it out ➝

Rhythm in Web Typography

by Matej Latin

Article

Vertical and horizontal rhythm in web typography.

Check it out ➝

Basics


Better Web Type

by Matej Latin

Course Frontend

A free web typography course for web designers & web developers.

Check it out ➝

Typography Inspector

by Bram Stein

Plugin Chrome

Typography Inspector analyses the typography on your site and helps you improve it.

Check it out ➝

Measure

by Rowan Cavanagh Stein

Plugin Chrome

Measure typographic line lengths right from the page.

Check it out ➝

45to75

by Adam Becker Stein

Plugin Chrome

Character counter for helping to optimize line length (measure) between 45 and 75 characters.

Check it out ➝

More Perfect Typography

by Tim Brown

Talk Video

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

by Tim Brown

Talk Video

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 ➝

Typography Handbook

by Kenneth Wang

Guide

A concise, referential guide on best web typographic practices.

Check it out ➝

On Web Typography

by Jason Santa Maria

Talk Video

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

by Mark MacKay and María Munuera

Game

Train your eyes to become a pro at kerning with this fun kerning game.

Check it out ➝

Typograph

by Dmitry Gerasimov

Plugin Sketch

Better typography for Sketch.

Check it out ➝

Font Tools


FontBuddy for Sketch

by Anima App

Plugin Sketch

Never deal with missing fonts again.

Check it out ➝

SkyFonts

by Monotype

App

Install fonts from participating sites with a single click. Fonts are installed from the cloud on your computer in seconds.

Check it out ➝

FontBase

by Dominik Levitsky Studio

App

FontBase is a free, beautifully crafted font utility for designers, that gives you all the possibilities of Fontcase.

Check it out ➝

RightFont

by RightFont Team

App

Sparking font manager to preview, sync, install and organize fonts, with flawless integration into any design software.

Check it out ➝

BirdFont

by Johan Mattsson and Marko Jovanovac

App

Birdfont is a free font editor which lets you create vector graphics and export TTF, EOT and SVG fonts.

Check it out ➝

FontForge

by FontForge Team

App

FontForge is a free and open source font editor brought to you by a community of fellow type lovers.

Check it out ➝

Fontown

by Fontown Team

App

Fontown is a beautiful typefaces library ready-to-use with a powerful application to organize and share your fonts.

Check it out ➝

“A web typography book for web developers and designers”

5-star rating

Incredibly informative, wonderfully written.

Check it out

Typeface Anatomy


Typography Glossary

by FontShop

Glossary

A glossary of common type terminology.

Check it out ➝

Type Terms

by Supremo

Glossary

The animated typographic cheat sheet.

Check it out ➝

Anatomy of a Typeface

by Typedia

Glossary

Learn about the anatomy of typefaces.

Check it out ➝

Recognizing & Choosing Fonts


FontFace Ninja

by fontface.ninja

Plugin Chrome

Fontface Ninja is a browser extension that let you inspect, try, bookmark and buy fonts on any websites.

Check it out ➝

Web Font Specimen

by Tim Brown

Tool Frontend

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 ➝

Type Classifications

by Allan Haley

Tool

An overview of type classifications.

Check it out ➝

WhatFont

by Chengyin Liu

Plugin Chrome

The easiest way to identify fonts on web pages.

Check it out ➝

WhatFont iPhone App

by Chengyin Liu

App iPhone

The easiest way to identify fonts on web pages for iPhone.

Check it out ➝

Web Font Previewer

by JustinTheClouds

Plugin Chrome

This extension allows you to test webfonts out on any website and target which elements the fonts should be applied to.

Check it out ➝

TypeKit Tweaker

by kylefox.ca

Plugin Chrome

A toolbar that lets you adjust Typekit font previews.

Check it out ➝

TypeWonder

by typewonder.com

Plugin Chrome

This extension helps you to test webfonts on active chrome tab via typewonder.com.

Check it out ➝

Google Font Previewer for Chrome

by Pamela Fox

Plugin 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 ➝

FontStand

by FontStand Team

Font provider

Try fonts for free or rent them.

Check it out ➝

Combining Fonts


Combining Typefaces

by Tim Brown

Book

Free book on combining typefaces.

Check it out ➝

Typespiration

by Rafal Tomal

Gallery Frontend

Free inspirational web font combinations with color palettes and ready-to-use HTML/CSS code.

Check it out ➝

A Guide to Font Pairing

by Martin Olliviere

Guide

A quick and basic guide to font pairing.

Check it out ➝

Font combinations

by Canva

Gallery Tool

Find a font combination for your design needs.

Check it out ➝

Typ.io

by Typio

Gallery Tool

Find inspiration for combining fonts.

Check it out ➝

Beautiful Web Type

by Chad Mazzola

Gallery Tool

A showcase of the best typefaces from Google Fonts.

Check it out ➝

FontPair

by FontPair

Gallery

An awesome collection of font combinations from real websites. Inspiring stuff.

Check it out ➝

Discover.typography

by H&Co.

Gallery

An inspiring collection of fonts and font combinations by H&Co.

Check it out ➝

Variable Fonts


Font Playground

by Wenting Zhang

Tool Frontend

Play around with variable fonts.

Check it out ➝

Variable Fonts

by Nick Sherman

Gallery

A simple resource for finding and trying variable fonts.

Check it out ➝

One File, Many Options

by Ollie Williams

Guide

Using Variable Fonts on the Web

Check it out ➝

AxisPraxis

by Laurence Penney

Tool Frontend

A website for playing with OpenType variable fonts.

Check it out ➝

OpenType


OpenType Features in Web Fonts

by Alex Muñoz

Cheat sheet

A list of all OpenType features with examples.

Check it out ➝

Normalize OpenType

by Kenneth Ormandy

Tool Frontend

Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

Check it out ➝

Typeset.js

by David Merfield

Tool Frontend

A ty­po­graphic pre-proces­sor for your html which uses zero client-side JavaScript and gives you advanced typographic features.

Check it out ➝

Syntax for OpenType features in CSS

by Adobe

Glossary Frontend

Individual OpenType features and how to use them in CSS.

Check it out ➝

Vertical Rhythm


Syncope

by Aleksander Nowodzinski

Tool Frontend

Syncope is a WYSIWYG tool for establishing vertical rhythm on websites.

Check it out ➝

Archetype

by Martin Olliviere & Jamie Gilman

Tool Frontend Sketch

Create beautiful web typography designs, in the browser.

Check it out ➝

Grid Lover

by Tuomas Jomppanen & Ville V. Vanninen

Tool Frontend

Establish a typographic system with modular scale & vertical rhythm.

Check it out ➝

Gutenberg Web Typography Starter Kit

by Matej Latin

Tool Frontend

A meaningful web typography starter kit.

Check it out ➝

Visual Hierarchy


Modular Scale (Sass)

by Scott Kellum

Tool Frontend

Modular scale calculator built into your Sass.

Check it out ➝

Typographic Scale

by Henryk Wollik

Tool Sketch

This plugin generates a typographic scale from selected text layers.

Check it out ➝

Perfecter

by Oleg Frolov

Tool Sketch

Base your designs in Sketch on Modular scales.

Check it out ➝

Modular Scale

by Scott Kellum and Tim Brown

Tool Frontend

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 ➝

HuulaTypesetter

by Hu2la

Tool Frontend

A Bot that Suggests Font Size for Web Pages.

Check it out ➝

Archetype

by Martin Olliviere & Jamie Gilman

Tool Frontend Sketch

Create beautiful web typography designs, in the browser.

Check it out ➝

Grid Lover

by Tuomas Jomppanen & Ville V. Vanninen

Tool Frontend

Establish a typographic system with modular scale & vertical rhythm.

Check it out ➝

Gutenberg Web Typography Starter Kit

by Matej Latin

Tool Frontend

A meaningful web typography starter kit.

Check it out ➝