Understanding Typography: 10 Helpful Tools and Resources

By . Filed in Web Design

In my last article on Understanding Typography, I wrote about what goes into the design of typography and how to manipulate it to improve on your website’s layout and to enhance user experience. In this article, I’m listing 10 of my favorite tools for typography on the Web.

These can help with building HTML grids and content areas, creating CSS styles, generating font names, and a bunch of other cool stuff. Check out some of the links below and be sure to let us know your thoughts in the post discussion area.

Recommended Reading: Understanding Typography: Writing For the Web

Font Matrix

This online guide was posted by the 24ways design blog. It features a matrix table of all the standard web fonts you’ll find by default from various software vendors. Popular titles include Windows, Mac OS X, Microsoft Office, and Adobe Creative Suite programs.

Web Font Matrix Grid

Colour Contrast Check

Color contrast is often a problem when you venture outside of the standard black-and-white model. 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 small web tool can help you pick out a set of colors to match each other for any style layout.

Colour Contrast Chart online tool

HTML-Ipsum

Are you in need of a Lorem Ipsum tool that can do more than just output text? 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 plenty of other solutions.

HTML Lorem Ipsum generator charts

Typechart

Typechart is one of my favorite tools as a CSS developer. I am frequently looking to match a specific font on my system to a web project, but I just don’t have the time to flip through my entire collection. This awesome tool lets you sift through popular choices of font families and even download the proper CSS code!

Typechart online tool for web print

PX-to-EM.com

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. It’s a very simple tool for sure, but it offers a handy guide with really simple functionality – and you can’t beat the free price tag.

Pixels to ems converter

CSS Type Set

I don’t recommend sticking with CSS Type Set for too long as it’s truly a beginner’s tool. It allows you to generate CSS code based on specific font properties you select. While very useful at first, over time it becomes a crutch to lean on. And you won’t be able motivated to master the CSS properties by yourself. But if you need to save time on a project, this tool cannot be overlooked.

CSS Type Set

flipping typical

Here is one really unique example of a font preview library. flipping typical includes a handful of fonts which are native to your Operating System. It auto-scans your font directory to pick up the most web-safe solutions. You can compare them side-by-side and easily choose between your favorite options. This is another great time saver you bookmark and don’t think about until the last minute.

flipping typical font comparison tool

Typographic Grid

There is a lot of talk about designing around the grid in HTML and CSS. You likely understand the concept of how grids work, and measuring a website in pixels is no different. This grid tutorial by CSS-Tricks is more like a guided effort to introduce the basics of typography for the digital era. It’s a much more advanced topic in the realm of web design. But if you have some patience I recommend going through the details to see how these grid properties can actually affect your page layout.

Typographic Grid tutorial design

WhatTheFont!

We’ve all found a logo or image with some really cool unidentifiable font. WhatTheFont has made rounds on the Internet for a few years and it’s still a favorite of mine. 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.

WhatTheFont? Recognition Tool

Baseline/Line-Height Calculator

Finally a really powerful tool for generating line height and rhythm properties. Simply input values for the base font size and line-height, or include your own custom CSS code off to the side. The app will generate previews in a few different styles so that you can get an idea of how these properties would look on your own website.

Baseline calculator tool for CSS development

Author:

Jake is a user experience designer for both web and mobile platforms. Having over 4 years of freelance projects under his belt, he frequently writes articles on topics of modern design trends and social media. You can check out some of his work on Dribbble or follow his tweets @jakerocheleau.

Tags:

Advertisement