Style and readability
We all know that getting typography right is one of the most important part of any stylish website. Suitable fonts make a webpage not just more beautiful, but more readable and accessible for your visitors. Formerly, quality typography used to be a separate profession, today it is possible even for a beginner web architect to pick up and customize its fonts. In our previous articles we have recommended you some free fonts, examples for classy and creative typography design, and some tutorials for cool photoshop font effects. Now we present a set of tools which can ease the work of any web designer finding the perfect fonts.
1. Google Fonts
Google has built an extensive, open source collection of web fonts. So they are not just free for private or commercial use, but you can further share them with your colleagues, and even customize them if it is needed. Their API makes it easy to add them to your website. You can even use these fonts in your printed stuff. These are the reasons why Google Fonts is a great starting point for any web designer.
2. Typecast
Typecast is a great web fonts app to experiment with over 23,000 fonts for the web. You can use the fonts of Fonts.com, WebType, Typekit, Fontdeck and even Google Fonts. You can inspect their style, readability or rendering. It is possible to share your production via HTML and CSS or by a URL. The downside is that, above its free, scaled back version, it is priced from $ 19+VAT per month.
3. Google font & Typecast
We want to further emphasize that, you can use the lightweight version of Typecast with all the fonts in the Google Fonts directory for free! So in the first step, you can select the base font from Google’s open source collection and then modify it with the easy to use visual controls of Typecast.
4. Typetester
Typetester may be the best web application to compare your candidate fonts with each other. Paste the text into the field at the top of the page, then choose your potentially attractive fonts and their options. You can change the font size, the background color, the word space, etc. Then you can see the changes on the fly, at the bottom part of the columns.
5. Fount
Fount is a small web app to identify the fonts on your favorite websites. You only need to add a bookmarklet into your bookmarks bar. Pressing this button while browsing the web, you can choose the desired font. It gives you not only the name of the font, but also its size, weight and style. We don’t need to say how much time you can save by using this app instead of examining the code of the website.
6. Typekit
Typekit is and other easy to use typography design tool. It is part of Adobe’s Creative Cloud, so with a Creative Cloud subscription you can use Typekit and all the other Adobe tools. They have a free trial plan, where you are limited to a trial font library, a single website, two fonts per site and 25,000 pageviews per month. You also have to use a Typekit badge at your website.
7. Tiff
Tiff only does one simple thing: it visually shows the differences between two fonts of your choice. It supports the Google Fonts directory, but you can compare any system fonts as well. As you can see in the picture below, the first font got a blue and the second font got red tint so it is easy to see the differences between them.
8. TypeWonder
TypeWonder makes it possible to test fonts at any website on the fly. You can enter the url of your website (or the url of any other site) and preview it with the font of your choice. Is there any easier way to find the font that fits your website? Lets change the fonts at WeDesignPixel.com:
9. TypeWolf
And finally, TypeWolf is a nice site with clean and minimal design which features the latest trends in web fonts. Their main goal is to serve as a source of inspiration for typographers of the modern web. TypeWolf also identifies the fonts used at the websites and they even have a top list of open source web fonts.
