Top 10 Handy Web Typography Tools

written by aext on September 24, 2010 in Fonts and Tools with 9 comments

While we all know the importance of the content of any webpage, what we often ignore is the first impression that the visitor forms when visiting any webpage. It is of paramount importance to know that the first thing that any visitor looks at is the look of the page. If the look is appealing enough only then does the reader move on to read the content. Graphic designers today are laying a huge importance on typography to make a webpage look attractive. When creating items like E-Books, brochures and pamphlets, it is important that the design and layout of the font is managed well so as to make any webpage look attractive.

At earlier times, typesetters used manual modes to perform this action but with the advancement in technology, it is now possible to design fonts on the computer. There are some fantastic typography tools that are available for use now that enable the webpage creator to create some fantastic font styles to attract the readers.

Until a few years ago, web designers had limitations when it came to using fonts for creating a webpage. They could only use the font styles that were available as part of the system. But with the typography tools available now, it is very much possible to not only create some fantastic looking font styles but also change their layout, space and glyph.

Listed below are 10 typography tools that you must have as a web graphic designer.

1. Fontstruct


FontStruct is a very useful tool that helps you create new font styles. You get in this tool a grid pattern that is arranged like tiles or bricks. You can use this grid to draw geometric patterns and create new fonts. This is a very simple to use tool that anyone with a basic knowledge of computers can use. What you need is an artistic bend of mind to create those newer looking fonts.

2. @font-face Generator


Font Squirrel offers you an excellent tool to generate font kits for @font-face feature. The generated @font-face kit will includes all requirement files for each browsers.

3. Type Navigator

Type Navigator

This is a fantastic tool that you can use to create some fantastic fonts even without having any knowledge of fonts. There is a pane on the left and you simply need to choose a font style that looks appealing to you. Once you choose a particular style, you then get multiple options that can include serif, width, angle, weight, contrast, axis etc. After you have made all your choices, you need to click on search and you will get multiple fonts that match the various options that you have chosen.

4. Font Tester


Font Tester is probably a better version of Type Navigator. It works in the same way as Type Navigator but the only difference is you don’t have to type any search. The moment you choose an option it gets updated in the right pane so that you can see the difference in real time. You can choose the font style, color of the font and the background and various other myriad options and create some fantastic font styles. And the best part is that you can have three difference comparisons that you can see side by side as you make changes. You also get to have the CSS code for what you created.

5. Flipping Typical


This is another valuable typographic tool that helps you choose from different font styles by looking at them in real time. As you visit the website, you have a large textbox right at the top of the page the text of which you can edit. As you enter any text, it gets displayed in various styles and you can see multiple styles at the same time.

6. STC Font Browser


You can go to the Control Panel of your computer and check out the fonts available. There are separate files for all the fonts and you can open them one by one and check them out. But STC Font Browser gives you an immense advantage because it lists all the font styles available in your system. The listing is on the left pane and the result is displayed on the right pane as you click on one of the font styles. Instead of looking up the fonts by opening the files one by one, you can do it through this tool all at a time.

7. PXtoEM


PXtoEM is a great typography tool that helps you select the font size for your webpage. There are three panels in the website – the one on the extreme left lest you choose the font size in pixels and the center pane converts the pixels, percentage, point and em. You also get the relevant CSS code for the style you chose.

8. WhatTheFont


If you like a font in any webpage and want to use it, WhatTheFont helps you in this regard. Simply upload a picture of the font or enter the URL of the webpage and WhatTheFont will find a font that is exactly identical or matches your font to the closest.

9. Identifont


Identifont helps you search for a font using the search option or helps you identify a font when you answer some very basic questions. This is ideal for people with limited knowledge of fonts.

10. CSS Type Set


This tool helps you create CSS styles that you can see in real time. You enter the text, choose the style and can see the font style you created. You simply need to copy the generated CSS to your stylesheet.

Besides these 10, there are some other fantastic typography tools that help you create magic with fonts and their styles. Spend some time online and you will come across some of these great tools and change the way your webpage looks.