Getting a feel for type with Typetester

I always like to think you can pick the web designer from print design backgrounds. They usually adore type — in fact, everything about it — and often still bear the scars of near madness brought on from being denied the control and subtlety they used to have in their print work.

There’s not too much doubt that getting the type right is one of the most fundamental elements of almost any design work, web or otherwise. It permeatates all levels of a site design from logo to footer and print designers generally have a better feel than most for the language of it’s ems, points, kernings, leading and whitespaces.

Enter a great little tool – Typetester. If you’re looking to develop more of a sense for the natural flow, proportion and balance of well-set type, TypeTester is a really nice way to play different text treatments off against each other.

It’s operation is fairly straight-forward.

• Use the provided ‘lorem’ text or, if you like, inject your own test copy.
• Select from a list of common system fonts (PC and Mac) or choose from ANY font on your home system — useful if you’re considering sIFRizing a font.
• Size it, color it, stretch it, compress it, underline it and generally mash up the place.
• View live variations on your settings further down the page in bold, italics, bold italics, uppercase, small caps and more.
• Transfer any combination that you like between columns, for even finer tuning of similar designs.
• When you’re happy, go to the ‘tools’ tabs at the top right and choose to download the CSS for any of the columns.

It’s a great idea that’s been really nicely implemented. We often collaborate with print-centric design companies that don’t have a deep appreciation for the difficulties and limitations of web type — this gives them a hands-on but relatively non-technical method of working with the type. Similarly, we can imagine sending fussy clients to Typetester to give us usable advice on how they would like their text to appear.

Hats off to Maratz.com.

Related posts:

1. Five Photoshop Type Speed Tips Jennifer shows you five tips and tricks that can help...
2. Elements of Design: Type In the final part of her series on Elements of...
3. Typography: Concordant, Contrasting & Conflicting! Jennifer looks at how the relationship between typefaces can improve...
4. How To Style Your Type With CSS Jennifer demonstrates how to use CSS to style type and...
5. Create Type Within A Shape In Photoshop Jennifer shows a quick and easy method to create various...

This entry was posted on Sunday, September 18th, 2005 at 10:56 pm, contains 411 words, 7 images, and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed. The views and opinions in this blog post are those of its author.