Typography communicates your brand perhaps more than any other design feature. The New York Film Academy writes, “Just as psychological studies confirm the correlation between colors and emotional responses, thus it being a huge determinant in how a brand is viewed, the style in which words and letters are formed works in the same way.” If content is king, perhaps typography is its throne. Typography tools can help you treat your content like royalty.
Whether on your website or in print materials, typography can catch the eye, convey a tone and style, elicit associations with other brands, and even control the speed of reading your text.
Choosing the right font is critical. But typography refers also to size, arrangement, color, and effects. Your content deserves just the right combination. Typography tools abound on the web, and you may already have some favorites. Here are several that can help you design effective content to convey your company’s uniqueness.
Tools for Choosing the Right Font
Whether you’re working on the web or in print, you need to choose the right font. Maybe a vision lurks in your mind’s eye. Or, maybe you lack any clue about what you want.
Typewolf is basically a curated design showcase which allows you to identify the best font to be used in your web design. Launched in June 2013, Typewolf is a must-have tool for every web designing expert.
Dive into thousands of options with Typekit, an Adobe subscription service. If the options overwhelm you, filter by broad classification (serif, script, etc.), properties, or language compatibility. If you kinda-sorta know what you want, you can even browse lists with names like “Alternatives to Helvetica.” You can sync any fonts you choose across the Adobe Creative Cloud, so they show up on your font menu on any device you use.
Once you narrow the field, you will want to see how different fonts look on your site. TypeWonder is a browser extension that allows you to do that. Just enter your URL to preview fonts.
Wordmark.it is a similar tool. Type in your text, then preview it in all the fonts on your computer, side by side.
Tools for Identifying a Font
So let’s say you’ve seen a font somewhere that you want to use or emulate. How do you figure out what it is? These tools can assist.
FontFace Ninja is a plugin for Chrome. All you do is hover over text on a website, and it will tell you the font family, weight, and size.
If you’re curious to know what fonts are commonly used within a certain industry head over to Fonts in Use. You can search by industry to see different fonts in situ, in other words, on the actual packaging or advertising where they are used. Conversely, if you know the name of a font and want to know who is using it, you can search by name.
Tools for Pairing Fonts
Usually, you will choose at least two different fonts for your web page. You might pick your two favorites, but that doesn’t mean they go together. The combo should be visually appealing while drawing the user’s eye across the content in the way you intend.
Font Flame lets you quickly page through font options to see them side-by-side.
Font Pair offers suggestions for combining Google Fonts into pairs.
Tools for Browser Compatibility
You’ve settled on your perfect fonts. They’re gorgeous together and perfectly convey your brand. But, wait! If a user opens a different browser than yours all of that decision-making could be for naught.
The State of Web Type is a website that allows you to browse or search for specific font attributes. It will tell you the compatibility for all versions of Chrome, Firefox, Explorer, Edge, Opera, Safari, iOS, and Android Webkit.
Tools for Sizing and Spacing
FlowType works with JavaScript to dynamically adjust the font size to a designated space. It can also help you figure out the ideal character count to fit into a container.
Hatchshow, another plugin measures your container’s width, length of font characters and the does the math for you. It then expands the size of your font to the width of the container.
Tools for Design
Using dropcaps can give your design a distinctive look, but it can be awkward to get the spacing just right. DropcapJS makes it much easier.
Typeplate, described as a “typographic starter kit,” includes basic typographic styles and recommendations for formatting them. It can assist with colors, scaling, dropcap, small capital, hyphenation, code block, blockquote, scaling and much more.
If you need each line in a paragraph to be styled differently, rely on LiningJS. This Java Script library allows you to individually style each line.
A Tool to Build Your Own Fonts
Fontstruct allows you to build fonts out of geometric shapes. Download or share your creations.
Tools that Turn Text into Graphics
Word clouds come in handy when sometimes when you just can’t find the right image for a page. Wordle takes any text and generates a word cloud as an image file. Use it for digital or print media. Customize the font, layout and colors to find the right look.
Pinwords, Someecards, and Keep-calm-omatic are all easy-to-use tools for the casual blogger or social media user who wants to turn their thoughts into a shareable image.
Bonus: Turn Text into a Star Wars Logo
Okay, so this is just for fun. Go to Flaming Text to put any text you want into a Star Wars logo.
This should be enough typography tools to keep you going, or at least get you started on the road to beautiful typography fit for royalty. Keep calm and type on.
IMAGE: Prawny / CC0 Public Domain