This article was published 6 years ago, therefore the contents of this post may be out of date.

There was a time when web typography was simply a matter of putting a few fonts together. Nowadays, web design is almost 95% of typography. Typography includes the use of modern CSS techniques and web fonts.

A web designer that gets the best typography tools can increase the aesthetic appeal of a website. With the assistance of some outstanding frameworks and tools, you can achieve a number of exciting typography effects.

1. Type Rendering Mix

Type Rendering Mix is useful in many situations. Let’s say you are using Proxima Nova on your website. Below you can see how the “thin” weight will look in OS X and Windows 7. Due to the way the Core Text rasterizer works, fonts will look heavier on OS X and iOS than on other platforms.

2. FlowType.JS

Flowtype is a plugin which dynamically modifies the font size that’s based on the width of a particular wrapper. Also, it helps with implementing ideal numbers of characters every line with screen associated with any width.

3. FontFriend

FontFriend is a bookmarklet for typographically obsessed web designers. It enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks. 2.0’s killer feature is instant drag-and-drop font previewing right in the browser in any document you’re currently viewing.

4. Typesettings.css

Typesetting is a wonderful pack of CSS rules sets which define font scaling effectively, vertical rhythm & fair ratio of typography for you. This tool is accessible in Sass & Stylus that enables you easily meet your project needs.

5. Baffle

This plugin adds an interesting “obfuscate and reveal” effect to desired text. At first glance, text appears scrambled. An animated sequence then systematically reveals the text string.

6. Fitty

Fitty is a tiny script that adds this functionality to your website. It supports web fonts and multiline text. The script will also automatically adjust as the user’s viewport changes.

7. Textillate

Textillate.js combines two popular text animation libraries (animate.css and lettering.js) to create one super-powerful collection of text effects. Virtually any type of animation you’re after is possible in one easy-to-use jQuery plugin.

8. Font Pair

Font Pair is utilised by hundreds & thousands of individuals and hosts over 500 font families. It’s a collection of Google Font which is paired with different combinations of typefaces & font families quite easily.

9. Gutenberg

Gutenberg is a flexible and simple-to-use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).


Fontface Ninja is a browser extension that let you inspect, try and buy font on any websites.

11. Type Anything

Type Anything lets you customize the most necessary font settings for your next project. From font families and letter spacing to font weights. Our goal was to create a great user experience, whilst working on the perfect match.

12. Typeplate

Typeplate is a “typographic starter kit”.  Typeplate don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass or CSS library of your choosing primarily concerned with the appropriate technical implementation of design patterns—not how they look.


12 Useful Typography Frameworks and Tools