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.

Typetester

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deanclatworthy.com Dean C

    Quite a nice tool :) Thanks for the heads up Alex

  • http://www.crystalcleardesigns.com ccdesigns

    Great tool. I have relayed this on my blog as well and saved in my favorites. Thanks for the recommendation ;)

  • Chimere Okoro

    Beautiful tool am sold, this is one tool i’d pay for even it the final product is opensource.