25 Font-tastic Type Resources for Web Designers

Zach Dunn on February 8th, 2009 Posted in Resources

There have been quite a few good typography roundups posted around recently with varying levels of design focus. This roundup of resources and articles directly useful to the everyday web designer.

Here’s a list of some interesting, eye-opening, and downright useful type resources for the web design world.

HTML Ipsum

http://html-ipsum.com/

HTML Ipsum is the brainchild of Chris Coyier of CSS Tricks. It’s a simple, yet extremely useful tool for web designers. Instead of generating and breaking apart paragraphs from the Lorem Ipsum site for every project, simply copy the prefabbed piece you need. It’s already formatted in HTML and ready to go.

Typetester

http://www.typetester.org/

Typetester is an extremely comprehensive tool for determining how different typefaces will appear on the screen, and for the web. The controls let you compare up to three fonts side by side to help guarantee the perfect choice.

What the Font

http://new.myfonts.com/whatthefont/

In addition to having a great acronym, What The Font is perfect for identifying fonts. Upload an image of the typeface in question, verify the letters, and you’ll get a list of possibilities. I’ve linked to the newly overhauled beta design above.

Flipping Typical

http://flippingtypical.com/

Flipping Typical lets you browse through some of most popular typefaces installed on your computer, and then demo them with custom input text. It’s an interesting way of font selection using what you already own.

A Guide to Web Typography

http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

I Love Typography takes a great look at some of the key elements that make up web typography. If you’re baffled about good and bad typographic practices — start here.

Top Ten Web Typography Sins

http://www.smashingmagazine.com/2008/08/11/top-ten-web-typography-sins/

Many of these web typography sins are the result of laziness, but there are some fresh ideas and pointers that will help neaten up your own website’s copy.

Ampersands with Attitude

http://www.smashingmagazine.com/2008/08/15/ampersands-with-attitude/

This article showcases some alternative fonts with great ampersands. Just because you’re using one typeface, doesn’t mean you can’t mix and match ampersands.

Elegant Web Typography Presentation

http://www.slideshare.net/jeff_croft/elegant-web-typography-presentation

Excellent slide show cooked up by Jeff Croft of Blue Flavor. He takes a look at the basics of web typography, and then outlines some definitions for quality uses.

Typographic Contrast and Flow

http://www.webdesignerwall.com/tutorials/typographic-contrast-flow

A demonstration of how good use of type size and color can make a page much more scan-able and “flow” for readers.

10 Common Typography Mistakes

http://www.thedesigncubicle.com/2008/12/10-common-typography-mistakes/

Brian Hoff outlines some common pitfalls for typography. Interesting read if you’re new to typography especially.

The Paragraph in Web Typography & Design

http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design

There is an art and history to the paragraph. This articles explores some background, and puts in into the context of web typography.

The Elements of Typographic Style Applied to the Web

http://www.webtypography.net/toc/

What makes good typography? How do I make sure my type is arranged properly? This site is a bible for web typography pointers and basics.

Introduction to Font Families, Font Choices, and HTML punctuation

http://www.yourhtmlsource.com/text/webtypography.html

Did you know the family “slab serif” existed? I didn’t. This is a great, no shame, introduction to font families in web typography.

Typesites Blog

http://typesites.com/archives/

Typesites is a design blog dedicated to showcases websites with great use of typography. If you’re ever in need of inspiration, give this a look through.

Typechart

http://www.typechart.com/

Typechart is more or less a showcase for a variety of typefaces and settings. CSS for each is offered if you plan on using it yourself.

Better CSS Font Stacks

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

Don’t just write off the second and third members of your font families. This article outline effective ways of picking great CSS font families.

Increase Your Font Stacks with Font Matrix

http://24ways.org/2007/increase-your-font-stacks-with-font-matrix

Help plan effective CSS stacks with this matrix of  pre-installed fonts on a variety of systems.

Color Contrast Check

http://www.snook.ca/technical/colour_contrast/colour.html

Very simple tool to help determine if a pair of colors will work together in contrast or not.

CSS Type Set

http://www.csstypeset.com/

Flipping between the CSS and live HTML can become a hassle when tweaking the type on a page. Save yourself the guesswork. CSS Type Set allows you to make live changes and see the corresponding CSS. I found this especially useful for finding usable kerning.

Display Type and the Raster Wars

http://jontangerine.com/log/2008/11/display-type-and-the-raster-wars

On the web, browsers don’t just render type. With the invention of anti-aliasing engines like ClearType, fonts get smoothed and polished in a variety of ways depending on the browser and operating system. This article helps demonstrate the distinctions.

Five Simple Steps to Better Typography

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/

Incredibly useful five step article for drastically improving your typography. Many of the points directly related to web design and CSS.

Compose to a Vertical Rhythm

http://24ways.org/2006/compose-to-a-vertical-rhythm

A tutorial on building a web copy that flows vertically.

Fawnt

http://www.fawnt.com/

Here’s one free font site you actually should take notice of. Fawnt has a great appreciation of higher quality fonts. Take a look at the top 50 typefaces on the front page and you’ll see the difference.

Font smoothing, anti-aliasing, and sub-pixel rendering

http://www.joelonsoftware.com/items/2007/06/12.html

Windows displays text differently from the Mac. This article outlines the differences and the design vs. readability background.

Lucida Hybrid: The ‘Grande’ Alternative

http://www.brownbatterystudios.com/sixthings/2007/03/14/lucida-hybrid-the-grande-alternative/

Lucida Grande is a great font for many website designs. Unfortunately not everyone has this font available to their system. This article explores possible alternatives to this font family problem.

Wrapping Up

These are 25 resources that I’ve found incredibly useful. Have any of your own that would help out your fellow web designers? Share them in the comments and lay the groundwork for a second roundup!