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

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
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/
What the Font

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 Font Previews
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 Web Type Guide
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/
typeography-sins-sm
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/
ampersands-attitude-screen
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
Blue Flavor - Elegant Web Type
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
Web Designer Wall
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/
The Design Cubicle
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
Joe Tangerine
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/
Elements of Type on the Web
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
Intro to Font Families
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 Gallery
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

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/
Better Font Stacks in CSS

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
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
Contrast Checker

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/
CSS Typset

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
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/
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
Vertical Rythmn

A tutorial on building a web copy that flows vertically.

Fawnt

http://www.fawnt.com/
Fawnt Font Downloads
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
Smoothing Type

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 Hybrid

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!

Posted Sunday, February 8th, 2009 · Back to Top

SPONSOR

Add Comment

25 Comments 16 Mentions

  1. Patternhead Author Editor

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

    ·

  2. 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.

    ·

    • 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.

      ·

  3. 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

    ·

  4. joão ramos Author Editor

    amazing article! faving this :)
    .-= joão ramos´s last blog ..tom waits revisited =-.

    ·

  5. Arun M Author Editor

    Nice collections. Thanks for sharing.

    ·

  6. Giochi Author Editor

    Very nice font collection. Thanks for sharing

    ·

  7. Cucina Author Editor

    Great fonts! thank you very much for the blog post…it is what I was looking for!

    ·

  8. Lotus Author Editor

    Very innovative set of fonts. One of these font was readily accepted for a logo. Thanks for sharing.

    ·

  9. 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

    ·

  10. 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.

    ·

  11. 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.

    ·

  12. طراحی وب سایت Author Editor

    Very nice font collection.

    ·

  13. 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.

    ·

  14. 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.

    ·

  15. 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

    ·

  16. 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!

    ·

  17. 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.

    ·

  18. 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!

    ·

  19. prada bags saks fifth avenue Author Editor

    Definitely, what a splendid website and enlightening posts, I will bookmark your site.Best Regards!

    ·

  20. 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.

    ·

  21. 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.

    ·

  22. 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.

    ·

  23. Outil de Scan Automobile Author Editor

    Many people Outil de Scan Automobile around the world suffer from obesity which is a condition whereby the human body

    ·

  24. sonny Author Editor

    Great list of resources for web typography you have here Zach. Personally, I like the instant results of Typetester.Org. Thanks for sharing!

    ·

 

Build Internet by One Mighty Roar. Since 2008.