15 Online Typography Tools All Designers Should Know

Typography is the foundation of any design, because reading is one of the most basic things we do on the web. The typography you choose have an impact on multiple aspects of a website, including readability, mood, and the overall user experience. It’s essential for designers and developers to know the basic principles of typography to create readable pleasing designs.

We have been talking about font pairing tools before, and today we’re going to share with you type tools that can you achieve a better reading experience in the websites you build and/or design.

Here are the plugins, online tools, and scripts which will help you to create awesome headlines and clean readable text.

Typeplate

It will not make design choices for you, but will define the right markup with styling for common typographic templates. It can also give you tips on how to style text copy properly.

Check out: Demo | Documentation

typeplate

Gutenberg

Gutenberg is a flexible and easy-to-use typography starter kit for developers and designers. It will help you to set base type size, line-height and max width. Gutenberg is an open-source project, so feel free to contribute, adapt and modify it.

Check out: Demo | Documentation

gutenberg

Lettering.js

Lettering.js is a jQuery plugin which gives you control over kerning type. It allows you to get editorial design with ease and manage code. The website features amazing examples of typography made with this plugin for inspiration.

Check out: Demo | Documentation

lettering-js

Typebase.css

Typebase.css is a customizable typography stylesheet. It contains both saas and less versions and is easily modified into modern web projects.

Check out: Demo | Documentation

typebase-css

FitText

FitText is a plugin which will make your website font-sizes flexible. It will help you achieve scalable headlines for various screen resolutions; in other words, make your typography responsive. It’s made for displaying huge text only.

Check out: Demo | Documentation

fittextjs

Kerning.js

Kerning.js helps you to automatically transform, scale, and modify your typography with CSS. It’s easy to get started with Kerning.js.

Check out: Demo | Documentation

kerning-js

Typesettings.css

Typesettings.css is your playground for creating minimalistic web projects or blogs. All typography styles used here are inspired by graphic design basics.

Check out: Demo | Documentation

typesettings

Rucksack

With Rucksack you can produce amazing fluid typography thanks to a new, responsive property on the font size. Creating responsive typography is made exceptionally easy.

Check out: Demo | Documentation

rucksack

FlowType.JS

The most readable typography contains between 45 and 75 characters per line but to find that balance is a challenging task for developers. FlowType.JS changes the font size and subsequently the line-height based on a specific element’s width.

Check out: Demo | Documentation

flowtype

Blast.js

Blast.js will help you to separate texts to make it easier to manipulate the typography. It contains 4 in-built delimiters: character, word, sentence, and element. It can also match custom expressions and phrases.

Check out: Demo | Documentation

blast

slabText

slabText is a simple script which splits headlines into rows to perfectly fill in the available horizontal space. The script calculates an ideal number of characters to set in each row by dividing available width by pixel font size.

Check out: Demo | Documentation

slabtext

Type Scale

With Type Scale you’re able to preview and choose the right type scale for your project. There are no rules – just play around with font size, scale and different web fonts.

Check out: Demo | Documentation

type-scale

Typographic

Typographic helps you to make typography responsive. All you need to do is just select a few fonts, set a few settings and you’ll get nice responsive typography.

Check out: Demo | Documentation

typographic

Typi

Typi is a saas mix you can use to make responsive typography with ease. It creates font size and line heights for HTML and other elements. Also, Typi has a vertical rhythm function to calculate line heights.

Check out: Documentation

Lining.js

With the Lining.js plugin, you’ll get complete control over web typography. It’s supported on most popular browsers like Safari, Google Chrome, Opera, and Mozilla Firefox.

Check out: Demo | Documentation

lining

Bonus: 2 More Tools!

State of Web Type

State of the Web Type is a website that offers up-to-date data about the support for type and features around the web. You can use search or categories, such as kerning, capital spacing, CSS font loading, and more to find exactly what you need.

stateofwebtype

Typograph

Typograph is an awesome web and sketch plugin which allows you to put non-breaking spaces after one-letter words, connect the number and the unit. It also removes double spaces, enters, dots and other typos, so you can achieve clean beautiful typography that is easy to read.

Check out: Documentation

typograph
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmail