Font is important, but you would be surprised at how many people don’t realize that. The style of text you use can change the entire look of a design, and when you have a project to complete you might not take that into account. That can be damaging to the overall effect of the finished project, regardless of the quality of the content.
I have put together a list of sites that can help you to select the perfect typeface for whatever it is you are working on.
One of the most important font issues for web designers is how it appears on different screens, through different browsers or operating systems. Slight differences can make a change in the look extreme enough to cause you to wish to change it. But knowing in which ways to adjust can be difficult without being able to to see it from all angles.
Typetester lets you select the view from Windows, Mac, Google and others to see how it effects the font. You can also play with the size, color and type, all while putting it against sample text that you place in the box. There is a rather large list of available font types, but you can also find a directory with others on the site.
Using fonts taken from Google’s directory and TypeKit, this site lets you compare fonts side by side to see how each one looks with the same sample text. This is handy because you can do a number at the same time and just skim over for all those little details that you wouldn’t normally see.
To get the font that you like most, all you have to do is skim over it with your cursor. You will see a Get Font link appear over it. From there you just have to take the CSS for your sites HTML coding box.
It is a simple to use tool, but very effective.
3. Font Tester
If you want something a little more advanced, this tool might be better for you. Keep in mind that it isn’t an attractive web application by a long shot, but it is very useful and has more features than most others. There is a three slot font comparison option, so you can see three at the same time maximum. They do have a default text available, but it is usually better to use your own. That will allow you to see what it will look like more exactly.
The CSS properties are more extensive than others, and you can change each character individually, which is pretty cool.
Just because you think it looks good doesn’t mean everyone else will. From color blindness to screen resolution, there are certain factors that have to be taken into account when looking at typeface. The World Wide Web Consortium (W3C) created a set of guidelines for this purpose. What is so great about Designer Plaything is that it gives you feedback on each sample text you play with on whether or not it meets these guidelines.
You can change color, contrast, brightness, size, font type and more. You can also play with the background color.
5. Font Dragr
HTML5 is still in the experimental phases, with demos being released every day to show the new and exciting things the format can do. This is one of those experiments, and so it is different than any others currently available for font comparison. The downside is you need Firefox 3.6 and above in order to run it, since they are compatible with the update.
It works as a drag and drop, which is an interesting concept. It is compatible with truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts . You select them from your desktop and drop them in the left hand side bar. This changes the text on the screen to that font. There are also fonts on a panel to the left of the screen for sampling.
Don’t Underestimate the Importance of Typeface
It might sound like a speech from the ultimate designer geek, but font is important – not only for logo design but overall website layouts. Size, shape, appearance, color, background, and even opacity all count when generating the right style. Even if you only spend a few minutes with one of these tools, it can make all the difference in how the final product appears to the average user.
What are some of your favorite websites for font comparison?