So you’re working on a web project and you just can’t quite nail-down the right font.
You want just the right look and feel, but between bumping back and forth between your CSS code and refreshing your previewing browser, it’s difficult to really compare. That’s not even considering the @font-face options!
I’ve got three great font testers to help streamline your font selection and tweakage.
Font Tester
This is the ugliest, but the most functional of the three.
You can manipulate and tweak all the individual CSS properties and get the preview in real-time. Very nice, indeed!
You can compare different fonts side by side with different CSS properties applied to them. The option to add your own text to test, rather than the default “Lorem ipsum” is really key. Sometimes you need to see the real words! Especially if you’re dealing with a main heading.
There is a real-time color picker (supports direct editing of the HSV and RGB values) for both the fonts and background, which is really helpful if you’re playing with fonts that will be light on a dark background. My favorite option on Font Tester is the character map, complete with the corresponding HTML character code.
Once you’ve found the CSS settings you like, grab your selected CSS code with just a simple click!
Bookmarked? Yes.
Typetester
This is the most middle-of-the-road, but the best creative tool of the three.
Typetester compares the fonts for the screen, generating Bold, Italics, Uppercase, etc … all to be compared. You can replace the default “Jumping Fox” text with your own, and get a really robust look at how your selected font operates. You can tweak the CSS size, alignment, color, background and some other basic settings, but the nature of this tool is to see the flexibility and function of a font in action.
My most favorite option with Typetester, is you can test a font that resides on your local machine. If you like it, you can convert it to @font-face later, but this is really handy when it comes to design. You design a logo or layout based on your system fonts, so it’s nice to see how that would translate into a main-text browser display.
Bookmarked? Yes.
Typechart
This site is the prettiest, but least creative of the three.
Please, don’t get me wrong, Typechart is a great tool. That’s why I’m writing about it. It is unique, in that it’s more about the fonts on users computers, than tweaking, creating and fleshing out font selections.
Browse the styles and grab the CSS style with ease!
You can compare Windows and Apple rendering with a simple mouse click (very slick), and get the style ID which allows you to annotate prototypes and retrieve the CSS while coding.
Typechart‘s tag line really says it all:
Browse web type, grab CSS.
Bookmarked? Yes.
I hope these typography tools will make your next project go faster and turn out better!
🙂
Speak your mind...