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.
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.
This is a feature test to check if browsers support one of the four color font formats when loaded as webfonts through @font-face.
It is a library that detects the font of a text in a image.
It helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
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!
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.
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 is simple and usefull tool for testing web fonts on live site.
It is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, ttf/otf.
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.
This is an algorithm which automatically calculates the appropriate font size based on the dimensions of the monitor or device.
Perfect vertical rhythm for typography in CSS-in-JS.
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.
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.
Creating your own font has never been easier. With your own font you can create genuine personal designs and calligraphic artwork.
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.
A Sketch plugin to collect font files you used in your sketch file.
It is a modern, minimalist, no-nonsense lorem impsum generator.