9 Typography Apps and Tools for Web Designers

Typography is the visualization of a written object, in most cases – it’s the words we write. You can use typography to express yourself, your mood, your nature or the type of a business you’re running. Practically, everything that conveys words, can be expressed through good typography.

Now, the thing we want to clear up right from the beginning is that typography isn’t just the font types we’re using for certain parts of our projects. It’s a lot more than that. Good typography will always emphasize readability and usability, in other words – a good user experience.

I’m probably not the best person to ask for advice on typography, and the many elements that go alongside the development of a typographically acceptable design. I’d like for you to check out the ‘butterick’s practical typography‘ website — it’s one of the best (free) resources you’ll ever find on what is typography, and how it works.

I will be focusing on applications and tools that can help us overcome some of the difficulties and time consuming tasks in web design, and even in web development. I hope that many of these will be new to you, while additional tools can be suggested in the comments.

Font Squirrel

Create Your Own  font face Kits   Font Squirrel

Give yourself a break from having to manually create your own @font-face kits, and use this tool provided that will take care of everything. All you have to do is select the specific font you’d like to use, and select the appropriate checkboxes – it’s done! I just keep it bookmarked in my design tools folder, does come in useful from time to time.

Typography Calculator

Pearsonified’s Golden Ratio Typography Calculator

Unsure of the settings to use for your typography in order to offer the best readability experience? Try out this tool, because I think you’ll fall in love with it. It’s a simple web tool that can help you decide on the optimum settings to use for a particular content page.

You can enter the font-size you’re using, the width of the content page, and additionally the CPL (which is optimal, and is generated afterwards anyway). There is a live example of how the content would look, and you get to choose from several font types to get a better understanding.

CSSWARP

CSSWARP   CSS Text to Path Generator

For all those creative projects! Heh. It’s a really old tool now, but still serves great purpose for more specific/personal projects. The script parses the DOM for nodes that should be warped. It then will transform every letter with CSS3 transforms, giving the illusion of text following an imaginary path. Try it out!

WordMark

wordmark.it   helps you choose fonts

Have you ever wondered what is the best way of looking at multiple font styles for one single word, at the same time? Sure, Google Fonts and a few others might come in handy, but they’re usually bloated with all the unnecessary HTML elements, while WordMark is as plain as it gets.

WordMark will use a tiny flash script in order to check your own personal library of fonts on your computer, then give you an output using HTML/JavaScript. It’s less technical than it sounds, and can prove to be a great time saver when you’re looking to find the perfect typeface for a new project/website design.

You can then manipulate the looks of the fonts from within the header navigation bar on the site, really useful.

FFFFALLBACK

FFFFALLBACK   A simple tool for bulletproof web typography.

You want your site to looks spotless, with good overall design flow, and good typography to accompany those extra hours of work you’ve put into something special. You can grab the FFFFALLBACK bookmarklet, and from there on – click on the bookmarklet on any given webpage to see what fonts it is using.

After that, you can manipulate the font options and change fonts up to see which ones look the best on the given page.

WhatFont Tool

WhatFont Tool   The easiest way to inspect fonts in webpages « Chengyin Liu

I wrote about a similar tool in my post about web apps for web designers, but this one has a Chrome extension and also a bookmarklet, which makes it incredibly flexible and easy to use. You just point at the direction and click ‘whatfont’ to analyze the specific combination of letters. It’s obviously very easy to understand how it works, but those little things often save us the most time.

Readability

Bookmarklets — Readability

Take any of these bookmarklets and give yourself some time to immerse in the best possible reading experience on the web, or at least – the one that’s cut off from all the bullshit and clutter. How many ‘educational’ websites out there have a header the size of a 5,000 word article? Quite a few, right?

I’m a simple guy, or I like to think I am, and I tend to build websites that focus upon the most necessary aspects of the given page/context. I guess it’s one of the reasons so many people return to my blog to read more stuff!

You can use the bookmarklet on any webpage to strip down all the clutter and be redirected to a Readability page that will have only the content present. You can still support your favorites blogs and magazines directly, if you so desire.

Font­Friend

FontFriend – Soma Design

Quite a few bookmarklets in this collection, I’m glad that they’re the best kind! Basically, similar to the tools above – take the bookmarklet and load it into a page, you’ll get an output of all the fonts used on a page, and that will further reduce the amount of time it takes to build font stacks for your own projects.

Type-a-file

Type a file

Need some specific pre-defined elements to use on your content pages? Well, Type-a-file has got you covered. Try out their website and click on any of the elements to view the source, that will give you clear directions on how to integrate such styles into your own pages. I think it’s quite handy, and you can change things up a little as well.

Typography Apps and Tools for Web Designers

I’m quite happy with many of these apps and tools, not gonna lie – many of them are new to myself, and I’ll be checking them out further to perhaps integrate into some of my own projects, while others I’ve used for a little while and I’m more familiar with.

Any of these that you yourself use on daily basis? I’d love to hear feedback and additional tips and tricks.