10 Awesome Typography Tools for Designers

Typography is perhaps the most essential element of website designing. When using typography, the designer doesn’t just select the font, but styling of the page in terms of line height, line spacing, space between letters, colors, or composition. They might want to style every word of the page in a new manner and then define the color scheme. Designers are always on the lookout for tools and website to guide them and make the websites they design more attractive.

There are many typography tools available which help designers choose animation, font and style of the letters. These tools can also control fonts, font kerning, font smoothing, and creating drop caps or determine the font size. The tools we’ve assembled below can help designers attract readers by giving the websites a calm and crisp look.

1. Type.js

Type.js allows designers to write new CSS properties to take finer control over typographic style. It is very simple to use. Just upload type.js on the site and link to the HTML. Now add a style tag before the script and write the new CSS properties. It allows manual changes as well.

2. GridLover

It is a tool to establish a typographic system with modular scale and vertical rhythm. It gives you adjustable CSS for font sizes, line heights and margins.

3. Fount

It will help you identify any font which you are actually seeing. It can also tell the weight, size and style of the font. Drag the Fount button to your bookmark and then go to the desired site. When you will click the fount button it will give you the details.

4. Typewonder

This is a free to use web application to check various fonts. Enter the URL of the website and then select the list of the free fonts. Then click to check how the font will look on the website.

5. ModularScale

This is a simple tool to judge the size or font scaling on a web page. It can be used for the heading or the body of the content. It outputs in Sass which should be used in conjunction with Sass library.

6. TypePlate

TypePlate is a typographic starter kit that allows designers to determine the aesthetic design choices with proper markup and styling of the font.

7. FontFriend

Fontfriend is also a bookmarklet for designers to rapidly check the font and font sizes in the browser itself without editing codes and refreshing the page.

8. Web Font Specimen

This is a free resource for web designers to identify how typefaces will actually look on the webpage. It lets designers experiment with typography of any CSS-typeset page on the fly.

9. Font Picker

As the name suggests, Font Picker helps designers shortlist the font from their computer and narrow down the selection. It has different version of Windows and Mac.

10. Fontstruct

This is a simple tool for constructing fonts and sharing and downloading them for use.