Anyone who's ever tried designing a web site or any sort of screen-based presentation knows how difficult it is to come up with good-looking text styling that works cross-browser and cross-platform.

Web designer/designgeek Marko Dugonjic came up with a neat web application that will save you hours of time. TypeTester (free) lets you compare how various sizes and styles of "web-safe" fonts (Arial, Times, Georgia, etc.), OS standard fonts, and any additional fonts active in your system will look on screen:

TypeTester
http://typetester.maratz.com/

In each of three side-by-side columns, you use convenient drop-down menus to choose a typeface and its CSS attributes such as size, leading, decoration, color, and background. Your choices are immediately applied to sample placeholder text below the settings area.

Interestingly, two separate drop-down menus per column divvy up just the typefaces. One typeface menu contains a list of common screen fonts in three categories: "Safe" (the ones installed on both Mac and Windows such as Verdana, Georgia, Arial, etc.); Windows OS default and Mac OS X default fonts.

The other typeface menu lists *all the fonts you have installed on your system.* This is great if you'd like to see how your web page might look in Futura Light, for example. I have no idea how it knows about your active fonts … a little creepy if you ask me. ;-) Must be some JavaScript magic.

Comments (Subscribe to Comments RSS)