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 25 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.
Unlimited Downloads : 600,000+ Typefaces, Fonts & Design Assets Ad
Bw Modelica
Sans-Serif
Amithen
Script And HandwrittenBuffalo
Script And HandwrittenAdvio
DecorativeOsgard Pro
SerifStephen & Gillion
Signature ScriptBetter font finder
A tool to easily filter and compare Google Fonts based on their visual characteristics.
FontSpark
This is a simple tool to help designers quickly find the best fonts for their projects. By randomly generating fonts from a curated list of popular web fonts, designers are sure to break out of the habit of using the same 3 or 4 fonts in nearly every project and discover the perfect fit for their next website or design.
Font Generator
Font generator uses a human-guided approach where it chooses from a number of hand-picked contrast vectors.
Google Font Previewer for Chrome
Lets you choose a font from the Google Font API directory, and apply that font to the entire page or a specified CSS selector to see how it looks. Useful when you’re designing a website and want to quickly find a font that will look good. If you always use the same fonts, you can star them for quick access.
Typewolf
Typewolf helps designers choose the perfect font combination for their next design project.
WhatTheFont
WhatTheFont uses deep learning to search our collection of over 133,000 font styles and find the best match for the fonts in your photo. It even works with connected scripts and when there’s more than one font in an image. Just upload an image, click the font you want to identify, then check out the results.
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.
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.
Typefont
It is a library that detects the font of a text in a image.
Fontjoy
It helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
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!
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.
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.
Fonty
Fonty is simple and usefull tool for testing web fonts on live site.
FontPlop
It is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, ttf/otf.
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.
RFS
This is an algorithm which automatically calculates the appropriate font size based on the dimensions of the monitor or device.
ShevyJS
Perfect vertical rhythm for typography in CSS-in-JS.
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.
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.
Calligraphr
Creating your own font has never been easier. With your own font you can create genuine personal designs and calligraphic artwork.
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.
Font Packer
A Sketch plugin to collect font files you used in your sketch file.
Lorem 2
It is a modern, minimalist, no-nonsense lorem impsum generator.
Thanks for the great list man! This is really helpful. It was so easy to compare and select the best.
These are very helpful web typography tools. Thank you for sharing this!!