Font Type Resources for Web Designers

HTML Ipsum

http://html-ipsum.com/
font-type-resources-for-web-designers

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-type-resources-for-web-designers
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-font-type-resources-for-web-designers

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-type-resources-for-web-designers
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-type-font-type-resources-for-web-designers
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-skins-font-type-resources-for-web-designers
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-font-type-resources-for-web-designers
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
elegant-web-type-font-type-resources-for-web-designers
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
wdw-type-contrast-flow-font-type-resources-for-web-designers
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/
dc-10-type-mistakes-font-type-resources-for-web-designers
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
the-paragraph-in-web-type-font-type-resources-for-web-designers 
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-type-style-font-type-resources-for-web-designers 
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-font-families-font-type-resources-for-web-designers
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-font-type-resources-for-web-designers
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-font-type-resources-for-web-designers

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-font-type-resources-for-web-designers

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-font-type-resources-for-web-designers

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-font-type-resources-for-web-designers

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/
csstypeset-font-type-resources-for-web-designers

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
raster-wars-font-type-resources-for-web-designers

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/
simple-steps-better-type-font-type-resources-for-web-designers

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-type-rythm-font-type-resources-for-web-designers

A tutorial on building a web copy that flows vertically.

Fawnt

http://www.fawnt.com/
fawnt-type-font-type-resources-for-web-designers
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-hybrid-font-type-resources-for-web-designers

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.