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.
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.
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.
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!
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.
You can then manipulate the looks of the fonts from within the header navigation bar on the site, really useful.
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.
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.
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.
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.
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.