Web Typography Quiz

Web Typography Quiz

by Matej Latin

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

A Guide to Rhythm in Web Typography

A Guide to Rhythm in Web Typography

by Matej Latin

Vertical and horizontal rhythm in web typography.

Font Memory Game

Font Memory Game

by Matej Latin

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.

Equilateral Triangle of a Perfect Paragraph

Equilateral Triangle of a Perfect Paragraph

by Matej Latin

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

A Guide to Combining Fonts

A Guide to Combining Fonts

by Matej Latin

Five guidelines for making awesome font combinations.

Better Web Typography for a Better Web

Better Web Typography for a Better Web

by Matej Latin

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

Basics


Universal Typography

by Tim Brown

The web is universal and, in this renewed talk, Tim Brown shows how to practice typography in a way that is equally universal.

Typography Inspector

by Bram Stein

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

Typography Handbook

by Kenneth Wang

A concise, referential guide on best web typographic practices.

Typograph

by Dmitry Gerasimov

Better typography for Sketch.

On Web Typography

by Jason Santa Maria

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.

More Perfect Typography

by Tim Brown

At long last, designers can use real fonts on the web. But what now? Where do we go from here?

Measure

by Rowan Cavanagh Stein

Measure typographic line lengths right from the page.

Kerntype—a Kerning Game

by Mark MacKay and María Munuera

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

Better Web Type

by Matej Latin

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

45to75

by Adam Becker Stein

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

Font Tools


Modern Fluid Typography Editor

by Adrian Bece

A tool that makes it easy to use the CSS’ clamp function for fluid typography.

Fallback Font Generator

by Brian Louis Ramirez

Reduce Cumulative Layout Shift by adjusting web fonts and system font fallbacks using special @font-face descriptors.

Modern Font Stack

by Dan Klammer, Coling Gourlay, Troy J. Farrell, Pete Cooper

The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

fonttools

by FontTools

A library to manipulate font files from Python.

Wakamai Fondue

by Pixel Ambacht

See what features your font supports

Transfonter

by OddLabs

Modern and simple css @font-face generator

RightFont

by RightFont Team

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

Fontown

by Fontown Team

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

FontForge

by FontForge Team

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

SkyFonts

by Monotype

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

FontBase

by Dominik Levitsky Studio

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

FontBuddy for Sketch

by Anima App

Never deal with missing fonts again.

BirdFont

by Johan Mattsson and Marko Jovanovac

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

Typeface Anatomy


Typography Glossary

by FontShop

A glossary of common type terminology.

Type Terms

by Supremo

The animated typographic cheat sheet.

Anatomy of a Typeface

by Typedia

Learn about the anatomy of typefaces.

Recognizing & Choosing Fonts


WhatTheFont

by myfonts.com

Instant font identification powered by the world’s largest collection of fonts

WhatFont

by Chengyin Liu

The easiest way to identify fonts on web pages.

WhatFont iPhone App

by Chengyin Liu

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

Web Font Previewer

by JustinTheClouds

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

TypeWonder

by typewonder.com

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

TypeKit Tweaker

by kylefox.ca

A toolbar that lets you adjust Typekit font previews.

Web Font Specimen

by Tim Brown

Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web.

Type Classifications

by Allan Haley

An overview of type classifications.

Google Font Previewer for Chrome

by Pamela Fox

Lets you choose a font from the Google Font directory with a few text styling options, and preview them on the current tab.

FontStand

by FontStand Team

Try fonts for free or rent them.

FontFace Ninja

by fontface.ninja

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

Combining Fonts


Typ.io

by Typio

Find inspiration for combining fonts.

Typespiration

by Rafal Tomal

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

FontPair

by FontPair

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

Font Combinations

by Canva

Find a font combination for your design needs.

Discover.typography

by H&Co.

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

Combining Typefaces

by Tim Brown

Free book on combining typefaces.

Beautiful Web Type

by Chad Mazzola

A showcase of the best typefaces from Google Fonts.

A Guide to Font Pairing

by Martin Olliviere

A quick and basic guide to font pairing.

Variable Fonts


Variable Fonts

by Nick Sherman

A simple resource for finding and trying variable fonts.

One File, Many Options

by Ollie Williams

Using Variable Fonts on the Web.

Font Playground

by Wenting Zhang

Play around with variable fonts.

AxisPraxis

by Laurence Penney

A website for playing with OpenType variable fonts.

OpenType


Typeset.js

by David Merfield

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

Normalize OpenType

by Kenneth Ormandy

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

OpenType Features in Web Fonts

by Alex Muñoz

A list of all OpenType features with examples.

Syntax for OpenType Features in CSS

by Adobe

Individual OpenType features and how to use them in CSS.

Vertical Rhythm


Syncope

by Aleksander Nowodzinski

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

Gutenberg Web Typography Starter Kit

by Matej Latin

A meaningful web typography starter kit.

Gridlover

by Tuomas Jomppanen & Ville V. Vanninen

Establish a typographic system with modular scale & vertical rhythm.

Archetype

by Martin Olliviere & Jamie Gilman

Create beautiful web typography designs, in the browser.

Visual Hierarchy


Typographic Scale

by Henryk Wollik

This plugin generates a typographic scale from selected text layers.

Perfecter

by Oleg Frolov

Base your designs in Sketch on Modular scales.

Modular Scale

by Scott Kellum and Tim Brown

The Modular Scale calculator multiplies your scale’s base with a ratio to produce a scale of numbers that are proportionally related.

Modular Scale (Sass)

by Scott Kellum

Modular scale calculator built into your Sass.

HuulaTypesetter

by Hu2la

A Bot that suggests font sizes for web pages.

Gutenberg Web Typography Starter Kit

by Matej Latin

A meaningful web typography starter kit.

Gridlover

by Tuomas Jomppanen & Ville V. Vanninen

Establish a typographic system with modular scale & vertical rhythm.

Archetype

by Martin Olliviere & Jamie Gilman

Create beautiful web typography designs, in the browser.