Typography Tutorials

Typography is more than just some text on a page, although modern web design has evolved to use sophisticated HTML and JavaScript elements, the web wouldn’t be what it is today without the help of good typography. You can have the nicest looking webpage with the state of the art widgets, but if the typography isn’t up to par, it will be clearly evident, and off-putting at the same time.

Great typography (as you will see in the examples below) can easily replace great animation and imagery skills, because typography is an art in itself and can be used to portray emotions just as easily as an image would. Learning typography takes some time, definitely, there are the easy concepts, and then come the harder concepts, like how to scale good typography choices for a full-scale website project.

If you’re an avid typography enthusiast, we have written about this subject in the past on our blog, please check out the reader-favorite typography tools and apps post, as well as one of the recent posts that discussed the most popular tools on the market for creating your own style fonts!

The following roundup is a list of tutorials, books and resourceful articles that discuss the very essentials of typography and how to use it in your every day life. I have specifically tailored these to reflect uniqueness and ease of use, whilst keep quality intact. You’re welcome to recommend your own tutorials in the comments and we will consider adding them to this list.

Typography for Non-Designers
Web Typography for non designers   Presslabs
Not everyone knows and understands typography by default, and neither is everyone a designer, which is why I feel this is the most appropriate resource to list as first one on our roundup. It’s an introductory tutorial on what is typography and what exactly it does, how it works and how you can use it to your own advantage. Very pleased with the tutorial, so I know you’ll find it easy to consume and understand.

I Love Typography

Fonts  typefaces and all things typographical — I love Typography  ILT
These guys frequently share new fonts and typefaces, but above all — they’re keen typography experts who love to share their knowledge with the community. Apart from all the available fonts and typefaces that you can download, there are interesting articles and tutorials to explore, which will leave you hungry for firing up some typography action yourself.

Typography for Blogs

Interactive Guide to Blog Typography
Blogging is everywhere, each blog carries a little bit of personality of the person who is maintaining it, and each blog has different design and style choices, pretty much every time you visit a new blog, it has new colors and font choices already waiting for you. But, how can we improve our typography choices for our blogs in order to stand out? This interactive guide gives you the ability to work with blog typography through many different content areas and types. Definitely give it a whirl and let us know what you think!

Professional Web Typography

Home   Professional Web Typography by Donny Truong

Presenting beautiful type on your website nowadays could not be easier. With popular web font services such as Adobe Typekit, Google Fonts, and Hoefler & Co.’s Cloud.typography, getting web-ready typefaces to display on a site is as simple as adding one line of markup. Unlike the old days of web design when all you had to work with were a handful of default system fonts (Arial, Verdana, Helvetica, Georgia, and Times New Roman), now you have thousands of fonts to choose from. However, with too many choices at your disposal, the process of selecting and combining typefaces can be time-consuming, overwhelming, and intimidating.

That’s an excerpt from the introduction chapter of this remarkable book. It’s available for purchase, but you can also read it online completely free of charge, which I think is a gesture significant enough to be appreciated and rewarded. You will love this book and it will keep inspiring you every time you work on a new project.

Pratical Typography

Butterick’s Practical Typography
From professional to practical, that’s the way to go! This is another amazing online book that discusses the practicality of typography and how it reflects our every day use. Composition and formatting are amongst the top two most discussed subjects in this book, and they’ve been highly acclaimed elsewhere on design sites.

Advanced Web Typography

Advanced Web Typography
Here we have a series of blog posts from Elliot Jay Stocks, it seems that he’s still working hard on getting his book out there to the public, but nonetheless his content is great and insightful, and will complement whatever you already know of typography today.

Explorations in Typography

Explorations in Typography   Mastering the Art of Fine Typesetting
This is an interactive sandbox that you can use to play around with text and see how it changes in a live setting. This is the perfect tool to use in order to reflect the many things you’re going to be learning from all the other tutorials and resources in this roundup. We’re looking to make a roundup of such tools, so if you know of more, leave us a comment and we will look into it.


The Best Typography Resources for 2015 → Typewolf
Our last resource in this roundup is a bit of a meta, it’s another, more concise, list of typography resources that go way out of the boundaries that we have seen in the list here. Typewolf have been maintaining their resource list for many years now and it has grown to be one of the best on the web.