20 Useful Free Web Typography Tools 2019

The typography of a website plays an integral role in the user experience of a site–just as much as other elements. A good typography is something lively for all websites as they are the communication medium. So here are 20 Useful Free Web Typography Tools that will hopefully make for a less stressful design process when it comes to creating, choosing, tweaking, organizing and identifying type.

Better font finder

A tool to easily filter and compare Google Fonts based on their visual characteristics.

better-font-finder


FontForge

This is a free (libre) font editor for Windows, Mac OS X and GNU+Linux. Use it to create, edit and convert fonts in OpenType, TrueType, UFO, CID-keyed, Multiple Master, and many other formats.

FontForge


ChromaCheck

This is a feature test to check if browsers support one of the four color font formats when loaded as webfonts through @font-face.

ChromaCheck


Typefont

It is a library that detects the font of a text in a image.

Typefont


Fontjoy

It helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.

Fontjoy


Fontdatabase

This is a designer’s best friend. We have all struggled, at one point or another, with choosing the perfect font for a project. We always have one in mind, but it doesn’t end up looking quite right. 100 Google searches and downloads later, we find one. Fontdatabase’s aim is to make it way easier to choose and find them. Simply choose the font you have in mind as a base for the search, and the attribute you’re looking for, and you’re set!

Fontdatabase


FontBase

With FontBase you can easily create and manage collections, change font styles, instantly apply font styles in Photoshop, compare fonts, use live search and live text preview. FontBase has a beautiful interface and fast font loading and displaying speed. It also supports automatic updates and easy to remember keyboard shortcuts. FontBase is a free font manager, developed for designers by designers.

FontBase


Font Spider

It is a compress tool for WebFont which can analyze your web-page intelligently to find the fonts out which have been used and then compress them.

Font Spider


Fonty

Fonty is simple and usefull tool for testing web fonts on live site.

Fonty


FontPlop

It is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, ttf/otf.

FontPlop


Subfont

A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page. Speed up your time to first meaningful paint by reducing the web font payload and critical path to the font files.

Subfont


RFS

This is an algorithm which automatically calculates the appropriate font size based on the dimensions of the monitor or device.

RFS


ShevyJS

Perfect vertical rhythm for typography in CSS-in-JS.

ShevyJS


Archetype

It lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser. These styles are all underpinned by established typographic best practices meaning less guesswork and more harmonious designs.

Archetype


Blotter.js

When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke something more playful. Precisely here, Blotter exists to provide an alternative.

Blotter.js


Calligraphr

Creating your own font has never been easier. With your own font you can create genuine personal designs and calligraphic artwork.

calligraphr


Fontdiff

This is a utility for testing fonts. When you modify a TrueType or OpenType font, fontdiff generates a PDF showing the typeset text both before and after the change. You can use this PDF to easily review the changes and spot any errors caused by a font switch.

fontdiff


Font Packer

A Sketch plugin to collect font files you used in your sketch file.

Font Packer


Lorem 2

It is a modern, minimalist, no-nonsense lorem impsum generator.

Lorem 2


1 Comments

  1. Thanks for the great list man! This is really helpful. It was so easy to compare and select the best.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.