Marko has released a great new tool for checking typefaces for the web that is very useful. It is called, Typetester. When designing a website and you get to putting content into the page, you must make sure the typeface, or font, that you use will work with the site and will be readable. You need to ask yourself about the font, color, spacing, decoration, and other attributes that you can set. This is where Typetester comes in. It sets out to make this as easy as possible for you by giving you a simple interface and three columns to work with that have different font styles depending on your selections. The columns are to make it easy for you to get an idea of what the font will look like when you put it on your site.

Above is what you will see upon entering the site. First is the “Sample Text” area. In this area, you can either leave the Lorem gibberish that is in there already, or you can replace it with your own content to get an even better idea of what it is to look like. Next, lets start of with the first column that you see. You can see that when selecting a font, you are given two choices. You can choose a typeface from the preset list or make a selection through the typefaces that are on your system. The preset selection is very useful in that it splits up Windows and Macintosh default fonts and gives you a “Safe List” on the top that exist in both of the Operating Systems. That is great because I can never remember what fonts are safe to use or not!

After selecting the font, you now choose other attributes for it. You can choose size, leading, tracking, text decoration, color, background, and more. You will notice that as you change these, the content below the column will be changing as well with the styles that you set. Now you can very easily see what the font is to look like on your design. Also, if you notice as you look down the column of content, it has different styles automatically to look at. You can see regular, bold, italic, bold italic, uppercase and small capital characters along with bold and italic for them as well.

Now just repeat that on the other columns! You can now easily figure out what typeface will work best on your website. Very useful and I will be using this for completing my redesign of Solution Watch (sshh).

Marko, excellent work on this. Congrats on making such a useful tool.

View Typetester – Compare fonts for the screen.

Update: Forgot to mention, when you are done with styling your content. You can then go to the top right and select the “Tools” tab. Then you will see links next to, “Get CSS for,” that allows you to get the actual CSS for the columns you made. Enjoy.

One Comment on “Typetester – Compare fonts for the screen”

  1. anon says:

    That is totally cool. thanks.