25 Font-tastic Type Resources for Web Designers

WRITTEN BY

Zach Dunn

Zach is the Co-Founder and Director of Front End Development at One Mighty Roar in Cambridge, Massachusetts.

Short URL

25 Font-tastic Type Resources for Web Designers

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!

Wordpress.com stats not installed! Posted Sunday, February 8th, 2009 / Back to Top

I this post. Tweet

More in Resources »

SPONSOR

23 Comments 16 Mentions

Patternhead Author Editor
Wow, thanks for taking the time to build this list. Great job :)

February 9, 2009 · Reply
Kel Author Editor
Good post, but the images must have hotlinking blocked somehow (htaccess) so no images come across on the RSS feed preview. Doh. As intented? I doubt it.

February 9, 2009 · Reply
- Zach Dunn Author Editor
  @Kel Argh! You’ve got me shamefaced now. Thanks for the tip! I had turned on hotlink protection recently because of some scraping problems, but I’ve disabled it until I find a workable alternative with the RSS feed.
  
  February 9, 2009 · Reply
Ethan Dunham Author Editor
I just added a @font-face “filter” to the font categories on http://www.fontsquirrel.com. It shows almost 200 @font-face compatible free fonts. Seems like a worthwhile addition to your list above. Thanks!

Ethan Dunham’s last blog post..Resonance

May 19, 2009 · Reply
joão ramos Author Editor
amazing article! faving this :)
.-= joão ramos´s last blog ..tom waits revisited =-.

August 1, 2009 · Reply
Arun M Author Editor
Nice collections. Thanks for sharing.

August 31, 2009 · Reply
Giochi Author Editor
Very nice font collection. Thanks for sharing

September 10, 2009 · Reply
Cucina Author Editor
Great fonts! thank you very much for the blog post…it is what I was looking for!

September 30, 2009 · Reply
Lotus Author Editor
Very innovative set of fonts. One of these font was readily accepted for a logo. Thanks for sharing.

August 7, 2010 · Reply
Neil Hess @ Cheap web designer Author Editor
This is very amazing collection of fonts.These are really great help for web industry.I like i

August 21, 2010 · Reply
Saurabh Author Editor
a nice list of website.. i would like to add on more .. check out http://dafonts.com . its provides a huge list of fonts with custom text testing also.

March 10, 2011 · Reply
Chanell Felderman Author Editor
Hiya, I am really glad I’ve found this info. Today bloggers publish only about gossips and web and this is actually irritating. A good website with interesting content, that’s what I need. Thank you for keeping this web-site, I’ll be visiting it. Do you do newsletters? Can not find it.

May 20, 2011 · Reply
طراحی وب سایت Author Editor
Very nice font collection.

August 1, 2011 · Reply
Beats by dr dre cheap Author Editor
I dicovered this is a helpful and funny posting, so I think it is very helpful and knowledgeable. Many thanks for the efforts you have made in writing this script. I am wishing the analogous wonderful work from you in the future as well. Really your creative writing ability has inspired me.

March 23, 2012 · Reply
Jude Ridlon Author Editor
Attractive component of content. I simply stumbled upon your blog and in accession capital Maxim London Escorts, 47A Winchester Street, London, SW1V 4NY, 07727 933772, 07779 229659 to say that I get actually enjoyed account your weblog posts. Any way I’ll be subscribing for your augment and even I success you get entry to consistently quickly.

March 23, 2012 · Reply
moncler jackets Author Editor
It is a very informative and useful post thanks it is good material to read this post increases my knowledge.linmei/comment201203

March 24, 2012 · Reply
manhattan new york cleaning service Author Editor
My coder is trying to convince me to move to .net from PHP. I have always disliked the idea because of the expenses. But he’s tryiong none the less. I’ve been using WordPress on a number of websites for about a year and am worried about switching to another platform. I have heard fantastic things about blogengine.net. Is there a way I can transfer all my wordpress content into it? Any kind of help would be greatly appreciated!

March 25, 2012 · Reply
Cheap Louis Vuitton Monogram Vernis Zippy Coin Vert Bronze M93052 Author Editor
Hey There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll definitely return.

March 26, 2012 · Reply
code de reduction webdistrib Author Editor
You actually make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of it!

March 26, 2012 · Reply
prada bags saks fifth avenue Author Editor
Definitely, what a splendid website and enlightening posts, I will bookmark your site.Best Regards!

March 26, 2012 · Reply
Louis Vuitton Monogram Canvas Cabas Piano Brown M51148 Sale Author Editor
I simply wanted to compose a quick note so as to express gratitude to you for the fantastic strategies you are placing at this website. My prolonged internet investigation has at the end been rewarded with useful insight to share with my visitors. I ‘d repeat that most of us readers are definitely endowed to be in a magnificent network with so many lovely individuals with good concepts. I feel rather privileged to have come across the weblog and look forward to some more exciting minutes reading here. Thanks once more for all the details.

March 27, 2012 · Reply
Monster – Beats by Dr Dre Studio – Pink Sale Author Editor
Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

March 27, 2012 · Reply
online games Author Editor
Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

March 28, 2012 · Reply