Web Design Tutorials and Tips

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.

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.

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.

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!

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.

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.

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.

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.

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.

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.