30+ Useful Typography Tools and Resources for Designers

Typography is one of the most vital parts of web design. It involves a proper selection of typefaces, line height, spacing, point size and more. The proper combination of color, composition of type and transformation ensures effective and breathtaking design.

Dealing with typography on the web is quite freakish, because each browser has their own methods to render fonts which could lead to unexpected deviations. The good news is there are lots of resources that you can use to make your design more attractive, eye-catching and full of impact. The list includes typography tools, frameworks, libraries and other helpful resources, both free and paid. We hope you’ll find the list handy.

32. DropcapJS

DropcapJS

Though you can create a dropcap with present CSS standards, the outcome is not always perfect. DropcapJS is developed by Adobe Web Platform to allow web designers to apply ultimate dropcap easily.

31. UnderlineJS

UnderlineJS

Underlining a text is not a big deal but a JavaScript library named UnderlineJS makes the text underline way much better than usual. Check out a quick demo to see what I mean.

Read: 26 Modern jQuery Plugins To Make Your Website Better

30. Typography Cheatsheet

Typography Cheatsheet

This is a comprehensive guide that shows how to use proper typographic characters, including correct grammatical usage. Here you’ll learn about apostrophes, dashes, hyphens, accented and non-English characters.

29. WhatFont

WhatFont

WhatFont is the easiest way to find out the fonts used on any webpage, within a click. The tool detects the service used for serving the font. It comes in the form of Bookmarklet, Chrome extension and Safari extension.

28. Gridlover

Gridlover

Gridlover is a typography system with modular scale and vertical rhythm. It allows you to adjust CSS for font size, margins and line heights. All the elements are kept aligned to a pixel perfect grid line and the line heights are fitted to the font size.

27. I Love Typography

I Love Typography

I Love Typography is an online blog that aims to bring the study of typography to the masses. It covers all type news, latest fonts, reviews, showcases of typographic design and related subjects. The blog is really interesting for those who are interested in crafting their own typefaces.

26. KerningJS

KerningJS

The web has been around for over two decades, yet designers don’t get complete control over their typography. KerningJS is a JavaScript library with some new properties for better kerning control, for example: -word-color. 

25. Beautiful Type

Beautiful Type

Beautiful Type is a blog (started in 2010 by 2 web designers) that showcases incredible typography illustration, extraordinary design, type related books and inspiring videos from all around the web.

24. Incredible Types

Incredible Types

Yet another showcase of outstanding typography and design from all around the world. The site has more than 400 pieces on inspiration design from over 430 creative and studios.

23. Typekit

Typekit

Adobe Typekit brings thousands of fonts into one library for quick browsing. You can use these on websites, applications, and countless typography inspiration.

22. Modular Scale

Modular Scale

Modular Scale is an online tool that can be used to generate ideal font scaling for heading and body text. You can see the result/code in Saas and JavaScript.

21. Flipping Typical

Flipping Typical

Flipping Typical is a way to explore the popular typefaces. Just enter a piece of text and it will be displayed in various formats on a single webpage, making it easy to compare different typefaces.

20. Font Picker

Font Picker

Font Picker lets you browse through the installed fonts (on your machine) and narrow down selection to select the one that’s perfect for your project. The tool is available for both Mac and Windows.

19. FFFFallback

FFFFallback

FFFFallback is a simple tool for bulletproof web typography that allows you to find the perfect fallback fonts, so that your designs degrade gracefully. It comes in the form of a bookmarklet, which will scan the CSS of the page and suggest a set of fonts to use a fallback.

18. PXtoEM

PXtoEM

PXtoEM is a simple web tool that shows matrix for em, pixel, percentage and point units based on body font size. There is a custom calculator where you can convert pixel to em or em to pixel.

17. HatchShow

hatchshow

HatchShow is a jQuery typesetting plugin that expands or reduces the size of a font to properly fill the width of its container. It is designed to work with all themes and templates. You need to insert a JavaScript code into your HTML or JS file, and wrap each line of your text with <span class=’HSJS’>.

16. TypeWonder

TypeWonder

TypeWonder is used for testing a website with different fonts in real-time. It’s super easy to use; just enter the URL of the webpage and select the font from the list and the webpage will be displayed with the font you chose.

15. The Elements of Typographic Style (Book)

The Elements of Typographic Style

This is beautifully designed guide for everyone interested in extensive text, design of books and the history of type. The author (Robert Bringhurst) looks at typography functionally and philosophically, knowing well how each perspective intertwines in type.

14. FontStruct

FontStruct

FontStruct is a free font-building tool that allows you to make fonts out of geometrical shapes, which are arranged in grid pattern. Once you are done creating, the tool generates ready-to-use, high-quality TrueType fonts.

13. Typeplate

typerplate

Typeplate is a complete starter kit that includes a handful of basic typographic styles addressing colors, scale, dropcap, hyphenation, code block, indenting, blockquote, word-wrap and more.

12. Fontli

Fontli

Fontli is a “social network for typoholics” that allows you to upload photos of typefaces and browse other images to gain inspiration for your own original typefaces.

11. Birdfont

birdfont

Birdfont is a free font editor tool to create vector graphics and export SVG, TTF and EOT fonts. It features object rotating, curve orientation, kerning strings, contextual ligature substitution and more.

10. YourFonts

YourFonts

An online tool to turn your handwriting into your very own font. It allows you to create fonts with more than 200 characters and even include your signature. This will cost you around $10.

9. Kern Type

Kern Type

This is kind of typography game or you can say a teaching tool that trains your eye to look for the kerning errors and discrepancies. The objective is to position the letters on the correct place so that the word is perfectly kerned.

8. Lettering.js

lettering js

Lettering is a jQuery plugin for radical web typography. It allows you to target specific character and line within an element by wrapping it in span. Though it should not be applied to every element, you can use it for extra control.

7. Type Rendering Mix

TYPE RENDERING MIX

Type Rendering Mix (library) detects browser’s textrasterizer and antialiasing method and then adds 2 classes to HTML element. The first class describes the text rasterizer and the other tells the antialiasing method it is using.

6. PicLab

PicLab

PicLab allows you to add beautiful typography and artwork to your photos. It offers a lot of fonts with full control over size, positioning, color, rotation and opacity. You can also add multiple text layer and drop shadows to your text.

5. Font Pair

Font Pair

Google font is currently the most popular web font library with over 600 font families, used in millions of websites. Font Pair helps designers to pair Google Fonts to make the overall web-design look good. Here you can find a big collection of a various combination between font families and type faces.

Read: Amazing CSS3 Effects To Give Your Website a Modern Look

4. Glyphr

Glyphr

Glyphr is free font design software that comes with a big bucket of components, design and editing tools. This HTML based font editor allows you to build complex shapes, copy and paste, flip around or lock them down, drag and resize to your heart’s content. You can edit path with cubic Bezier curves and make changes to the linked shapes. Just create the shape once (like ‘o’) and you can reuse it across many characters (like ‘pqbd’).

3. FontDoctor

FontDoctor

FontDoctor is not only capable of comparing and managing fonts, it can also locate, diagnose and repair corrupt and malformed font files, generating a detailed report about bad fonts. The application is available for both Mac and Windows and it’ll cost you around $70.

2. FlowType.JS

flowtype

FlowType is responsive web typography that dynamically adjusts font size based on a specific wrapper width. All you need to do is just set a maximum and minimum width threshold. You can even alter the font size, font ratio and apply a fixed number of characters per line at any screen width.

1. Typecast

Typecast

Recommended: 50+ Beautiful Typography Examples for your Inspiration

Typecast is a platform where you can quickly style type in the browser and check readability and rendering as you work. It is packed with over 23,000 web fonts and you can edit CSS and compare fonts side by side. It also offers you the facility to download HTML/CSS file or generate a transparent PNG of the project you are creating.

 

Written by
Varun Kumar

Varun Kumar is a professional science and technology journalist and a big fan of AI, machines, and space exploration. He received a Master's degree in computer science from Indraprastha University. To find out about his latest projects, feel free to directly email him at [email protected] 

View all articles
Leave a reply