13 Lucky Typography And Text Web Design Tools

By Karol K | 6 comments | Web Development | Tags: text tools, typography, typography tools, web design tools, Web Designer Tools, web typography

Tweet

Why not 130? Or 1013? You might ask.

I’m a bit tired of all those massive list posts that are just impossible to go through. You forget about them as soon as push the retweet button anyway. So what I have today is a short list of just 13 lucky typography tools that may actually come handy to you. Featured in the order you’d probably use them.

Searching for the right font

There are times when you stumble upon a font, it’s cool and you want it in your new design (!) but you simply don’t know its name. Here’s how to get out of the situation.

1. TypeNavigator

As the creators say themselves – TypeNaigator is the world’s first visual font search engine. In plain English here’s what it does: First, you select the form of the font you’re looking for. Next, you can give some more details about the font; details like: serif’s size, width, angle, weight, contrast, axis, and contour. When you’re done just hit the search button and let the magic happen.

2. WhatTheFont

(http://new.myfonts.com/WhatTheFont/)

When you’re searching for a font this tool is the first one that comes to mind. You can use this tool whenever you have a picture or a screenshot of a piece of text written with the font you’re looking for. Just upload the image and WhatTheFont will try to provide you with an answer.

Comparing fonts

Every once in a while you just can’t decide. You’re thinking about a number of different fonts and they all seem equally appropriate. There are three tools that can help you to make up your mind.

3. flipping typical

(http://flippingtypical.com/)

That thing at the top is an input field. Just input whatever text you like, and you will be treated with a really big comparison of various fonts.

4. Typetester

(http://www.typetester.org/)

First step – input some text into the text area at the top. Second step – select up to three different fonts, along with the styling of each. Third step – compare the results. Fourth step – get the CSS for either one of the columns. Easy to grasp, very useful.

5. CSS Type Set

(http://csstypeset.com/)

Really cool tool for fine-tuning. You can use the sliders, the input fields and all the other stuff to adjust the smallest detail about your font. Things like: size, spacing, color, background color, line height, word spacing, weight, etc.

Predefined font configurations

The following tools are great if you just want to get some predefined font configurations (pairings) that work with each other. Coming up with such pairings on your own is not always easy. Typography is one of these tasks which really put your creative sense to test.

6. Cool Font Pairings

(http://fontfuse.webink.com/)

Straightforward name and straightforward site as well. Browse through many predefined pairings and choose whatever catches your eye. Really nice project.

7. Typechart

(http://www.typechart.com/)

No pairings this time, but a gallery of predefined font styles. Just “flip through, preview and compare web typography while retrieving the CSS” – as the authors say. Not much more to add here.

8. Font Burner

(http://www.fontburner.com/)

Not only it helps you to choose a font that’s clearly NOT web-friendly, but it also MAKES it web-friendly. You can browse fonts by category. Once you find something interesting Font Burner provides you with the font itself and a piece of code that makes using this font possible.

“Ipsum” tools

A.k.a. providers of a handy dummy-text. But wait! There’s more (tool #11)!

9. HTML-Ipsum

(http://html-ipsum.com/)

This thing is really useful. It provides you with many different kinds of dummy-text. Paragraphs, unordered lists, ordered lists, single sentences, definition lists, forms, tables, even the kitchen sink (no joke).

10. Lorem Ipsum

(http://www.lipsum.com/)

It’s an all-time classic. Just press the “Generate Lorem Ipsum” button and you will get a piece of dummy-text. Plus, it gives you a couple of dummy-images as well.

The biggest advantage of this tool is the fact that it provides dummy-text in many languages not only in English.

11. TypeIt

(http://www.typeit.org/)

In a sentence – it lets you type accent marks, diacritics and other language-specific characters without a fancy keyboard. Just select a language and you will be provided with a nice and easy to use onscreen keyboard.

Building your very own font

You don’t have to stick with what’s out there. You can create your own font if – for some reason – you find the number of fonts that are already available too small.

12. FontStruct

(http://fontstruct.com/)

A canvas for font builders. You can use various geometrical shapes to create your own font. After you’re done working FontStruct will generate a TrueType font file. That means you can use your new font in Word, Photoshop, or other software. If you feel confident enough you can even share your font with the community and maybe get some recognition.

One more lucky tool – converting PX to EM

13. PXtoEM.com

(http://pxtoem.com/)

The tool is easy to use, but provides some useful functionality. Once you select a base size you will be presented with a table containing the conversions. As it turns out you not only get EMs, but percentages and points as well.

That’s all for the 13 lucky typography tools every designer will appreciate. Is there any tool you’d like to add? Making it a list of 14 lucky tools?

About the Author

Karol K. (@carlosinho) is a 20-something year old web 2.0 entrepreneur from Poland who shares his thoughts at newInternetOrder.com. Tune in to get his web design tips and other online business related stuff.