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