Typography Tools and Resources You Will Ever Need

Typography is a crucial component of a design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

Whether you're creating a resume, flyer, or web page, you might need some tools and resources to put things together. So to help you improve and learn more about typography, we have compiled some useful tools and resources to help you get started.

SEE ALSO:  15 Tools to Help You Create Your Next Infographic
                     10 Amazing Word Cloud Generators


Typography Tools


1.  TypeTester

TypeTester is an application for comparing fonts for the screen, providing quick previews of selected typefaces and their common parameters, such as leading and tracking. It also generates CSS on the fly. You can specify the baseline font size, typeface, size, leading, tracking, alignment, word spacing, decoration, color and background color to get a very accurate picture of what your fonts will look like on your website.

2.  TypeKit

Typekit is a web-hosted subscription based library of fonts that you can pick and use on your website. Typekit offers fonts from a variety of type sellers and foundries, including The League of Movable Type, FontFont, and Veer (you can view the entire list of fonts without having to sign up for an account).
The kit editor lets you apply your fonts to CSS classes, IDs or any HTML tag in your markup. You can also add font names directly to the font stacks in your stylesheet, with advanced control over how fonts are loaded on the page and updated in real time.

3.  TypeChart

Typechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse typographic styles, download the CSS, compare Windows (ClearType) rendering with Mac font rendering. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding.

4.  Typecast

Typecast provide you with over 23,000 web fonts you can easily choose from, meaning you can easily create a web-ready type system with real content. You can access web fonts from Typekit, Fontdeck, Google Web Fonts and Monotype's Fonts. This eliminates the need to self-code CSS into your page to get the font you desire. The application does all the work for you.

5.  CSS Typeset

CSSTypeset is a great tool for beginners. You can select your preferred font (from a range of web-safe fonts), font color, size, letter-spacing, word and text-transform, alignment and line-height, and it will generate the necessary CSS markup.

6.  HTML Ipsum

This online HTML generator will create code blocks for the most common page elements. Some examples include unordered lists, definition lists, web forms, tables, and lots more. Clicking on any of the blocks automatically copies the text to your clipboard.

7.  WhatTheFont

WhatTheFont is a great tool for identifying virtually any font used in an image. You choose an image to upload and their script will analyze text within the picture to match up any similar typefaces. The app will even link you to external products where you can purchase each font at your convenience.

8.  What Font

Just like WhatTheFont, it identify fonts also. But these tool doesn't deal with images. It identifies all the fonts used on a webpage and gives in-depth details, such as the font family, font size, along with the color, weight and line height.
Using Firebug or the Webkit Inspector to find out the name of a particular font used on a webpage can be too complicated and time-consuming. WhatFont solves this with a simple bookmarklet.

9.  Flipping Typical

Flipping typical explore the popular typefaces you have on your computer. If You want to see another font that’s not included in the interface – just edit font name from the black top bar. It will be save automatically for future purpose.

10.  PX to Em

Unless you reset the default browser text size you’ll likely have issues matching up ems with pixels. This in-browser app provides both a conversion table and user interface for px to em.

11.  FFFFALLBACK

Ffffallback makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully. Drag the bookmarklet to your browser toolbar. Go to the page you want to test and click the bookmarklet. The bookmarklet will scan the CSS of the page in order to identify existing web fonts. Then, using magical unicorns and JavaScript rainbows, FFFFALLBACK clones the page and provides a tool where you can test and analyze different fallback fonts.

12.  Font Deck

Font Deck is another web-based application with thousands of professionally designed fonts, all enhanced for on-screen use. As Fontdeck hosts the font files, visitors will always see the latest and best versions of the fonts.
Fontdeck is standards compliant, accessible and uses a pure CSS @font-face solution. No JavaScript required. With just a few lines of CSS, you can link to a font in order to display text in the typeface you require.

13.  Lettering.js

Lettering.js is a jQuery plugin for radical web typography, as CSS doesn't currently offer complete down-to-the-letter control. Lettering.js is created in other to give you that control.

14.  Font Matrix

This is an online guide by 24ways. It features a matrix table of all the standard web fonts you’ll find by default from various software vendors, such as Mac, Windows operating systems, Microsoft Office and Adobe Creative Suite.

15.  Baseline Rhythm Calculator

This is a very powerful tool for generating line height and rhythm properties. Just type in base font size and base line height, hit the calculate button and the whole page will change according to your input. When you are satisfied, grab the generated CSS file.

16.  FontStruct

FontStruct is a free font-building tool developed by FontShop. With FontStruct, you can quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

17.  Web Font Generator

Web Font Generator is an online application that allow you to easily convert regular fonts into @font-face web fonts. Upload TrueType (.ttf) or OpenType (.otf) fonts as well as Windows Postscript files (.pfb). The Mac (.dfont) format is supported, but because they can't contain multiple fonts, the generator will only use the first one it finds in the file.

18.  Fontifier

Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.

19.  TypeFont

Instead of offering a library of web-friendly fonts, TypeFont offers something a bit different. You are allowed to upload your own fonts that carry a web-friendly license.
This is a great option if the fonts you want to use aren’t currently offered by any of the other web font services. There’s a free plan for low-traffic sites, as well as paid plans.

20.  Colour Contrast Check

The Colour Contrast Check tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast - when viewed by someone having color deficits or when viewed on a black and white screen.
When you find a match it feels like design perfection. Yet a poor color combo choice looks very bad and will negatively influence the overall design. This web tool can help you pick out a set of colors to match each other for any style layout.

Typography Resources

1. Advanced Typography Techniques Using CSS
2. Typographic Contrast and Flow
3. The Elements of Typographic Style Applied to the Web
4. The Taxonomy of Type
5. Typeface Anatomy and Glossary
6. 12 Examples of Paragraph Typography
7. Revised Font Stack
8. Periodic Table of Typefaces
9. Rendering Complex Type - Who’s got the Love?
10. Elegant Web Typography
11. The Non-Typographer’s Guide to Practical Typeface Selection
12. On Web Typography
13. The Principles of Beautiful Typography
14. 10 Common Typography Mistakes
15. On Choosing Type
16. The 100% Easy-2-Read Standard
17. Thinking with Type
18. Typography Checklists

Blogs to Read

1. Typography Deconstructed
2. Typedaily
3. I Love Typography
4. Typography Served
5. Type Inspire
6. Type For You
7. Font In Use
8. Incredible Types
9. Friends of Type 
10. Type Everything
11. Lettering vs Calligraphy
12. Ministry of Type

Have we missed your favorite typography tool or resource? If so, please share your recommendations with other readers in the comments.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz