Essential Typography Tutorials and Resources

As content creators, it's our job to ensure that anyone who looks at our work understands it both on an informational and also emotional level. When you communicate using written words, clarity and context can get lost in translation - whoever reads your words ends up interpreting them for themselves, no matter how concisely you write.

In the modern age, we use computers to create beautiful presentations of information, and we use the web to share it. Since the web is mainly made of type information (around 95% typography, actually), it is critical to understand how to use the web to your advantage to better present your information.

Essential Typography Tutorials and Resources

Taking this into consideration, we have taken great care to find you only the best instructional tutorials and articles to help you learn about typography.

Essential Typography Tutorials and Resources

Typography Tutorials

WebMonkey's Web Typography Tutorial Series
WebMonkey's Web Typography Tutorial Series

This series offers an extremely detailed and robust course in the art of making your letters and words visually appealing. Lesson 1 covers typographical topics like associating meaning with type, letters as pictures, typographical terms, historical and stylistic categories, the secrets of legibility, letter spacing, line height and line length, X-height, weight and serifs, and also has a great list of suggested reads. Lesson 2 covers the application of typography on the web, covering topics like pixels, HTML and CSS, points and measurements, GIF images, Flash, SVG, Acrobat, and offers another list of additional resources both on the web and in print.

Webexpedition18's CSS3 Text Effect Tutorials
Webexpeditioon18's CSS3 Text Effect Tutorials

WebExpedition's tutorials aren't necessarily focused on typography itself - rather, they focus on the cutting edge stylization and decoration of text (still a huge part of typography) using CSS3. WebExpedition's list of tutorials include lessons on choosing fallback fonts, using CSS3 instead of Photoshop for text effects, anaglyphic effects, 3D, blur, CSS3 typography, font sizing, letterpress effects, CSS3's @Font-Face tag, using CSS3 with Javascript for typography, masking, shadows, and more.

This is a very thorough resource for teaching yourself how to create those dazzling typography effects that normally just leave you drooling.

WebExpedition also recently posted a Showcase of Designs with Delicious Typography.

TopDesignMag's Typography Design Tutorials
TopDesignMag's Typography Design Tutorials

These tutorials explore the graphical element of typography - using programs like Photoshop and Illustrator to achieve great looking text. The article includes lessons on creating poster designs using only type , 3D type illustration, and other eye dazzling lessons like making a splash with type, watercolor typography, smooth glass type, exploding type, flaming meteor type, milky type, steam powered type, flaming type, grassy type, and even lessons on using real 3D illustration programs like Cinema 4D to create beautiful typography.

IDesignow's 10 Best Web Typography Tutorials
IDesignow's 10 Best Web Typography Tutorials

These tutorials include a good helping of CSS type tutorials and examples, lessons on improving typography in your designs, making the perfect paragraph, scale and rhythm, analysis of type on the web.

InstantShift's Ultimate Guide of Web Typography Tutorials, Tips, and Best Practices
InstantShift's Ultimate Guide of Web Typography Tutorials, Tips, and Best Practices

This compilation includes many great lessons to help you understand and efficiently implement typography when working with the web. Lessons include typographic contrast flow, CSS font stacks, gradients, pull quotes, curly quotes, how to style block quotes, the grid system, white space, proportion, alignment, and many others. InstantShift also includes many additional resources and great examples in their article, including a comprehensive list of typography tools and apps.

Smashing Magazine's Guide to Technical Web Typography
Smashing Magazine's Guide to Technical Web Typography

This comprehensive guide covers technical coding issues like how to choose a font face, size, use a grid, measure, vertical rhythm and baseline grids, typographic scale, how to use proper quotes, dashes and ellipses, how to hang punctuation, and dealing with images in grids.

RGBAgent's HTML5 Typography Tutorial
RGBAgent's HTML5 Typography Tutorial

This tutorial is a good beginning resource for designers who want to develop their skills in typographical design for modern web applications using HTML5. Topics covered include using HTML5s Canvas element to draw and color text with gradients and effects, and create interactive typography effects.

WebsiteTips's Typography Tutorials
WebsiteTips's Typography Tutorials

These tutorials cover a range of topics from general typography, web typography, font design and creation, and a recommended book list for those interested in reading (real books) about typography.

Typography Resources

Thinking with Type
Thinking with Type

Thinking with Type is an incredibly deep and insightful website and one of the seminal books on typography of our age. The site isn't just a purchase page for the book, either; it's also one of the most beautiful information repositories on the web about typography, covering topics like Letters, including anatomy, size, scale, type classification, type families, super-families, caps and small caps, mixing typefaces, numerals, punctuation, typeface design, & font formats. Text, including kerning, tracking, line spacing, alignment, vertical text, marking paragraphs, enlarged capitals and hierarchy.

Grids, including the Golden Section, single column grids, multi-column grids, and modular grids; also, a slew of extras including tools for teachers, type crimes, guides on editing, for both soft and hard copy, proof-reading, and of course a bio on the author of the site (and the book) , Ellen Lupton.

Smashing Magazine's 16 Pixels for Body Copy
Smashing Magazine's 16 Pixels for Body Copy

This essential and controversial read caused quite a commotion among the design community when it was published due to making some very bold statements about the size of type making or breaking your presentation.

Base Web Design's Quick Guide to CSS3s @Font-Face Rule
Base Web Design's Quick Guide to CSS3's @Font-Face Rule

This quick guide covers the ins and outs of the @font-face tag, including where to get font-face kits, how to upload it to your server, using font-face in your stylesheet, limitations, and some further reading.

A List Apart's More Meaningful Typography
A List Apart's More Meaningful Typography

This incredibly deep, technical, and eloquent article by Tim Brown, Type Manager for TypeKit (an Adobe service for web font management) dives into the math behind the golden ratios of typography and typographical design. The article mainly covers modular scales (pre-arranged proportions for scalable designs), including the math behind modular scales, challenges, formulas, and how to create your own.

Tim recommends The Elements of Typographic Style as a further read to learn about modular scales, and also recommends his own inspiring 30 minute video presentation on using typographic tools and perspectives video presentation on using typographic tools and perspectives for designing websites.

Hongkiat's Showcase of Web Designs with Beautiful Typography
Hongkiat's Showcase of Web Designs with Beautiful Typography

This showcase is meant to further inspire you to create progressive and beautiful typography. Hongkiat also hosts an amazing guide for better typography in modern websites - this guide specifically looks at the bleeding edge standards for web typography and design, like the differences in todays internet vs. yesterday, modern trends, like webpage headers, unique hyperlinks, styled lists, in-page quotes, and guides to using custom web fonts like Typekit and Google Web Fonts, in addition, there is included a great list of references and required reading materials.

WebTypography's Reference Guide
WebTypography's Reference Guide

This guide to all things type on the web is a great resource to refer back to quickly if you are in the middle of designing a website, due to its reference style format.

Additional Typography Resources

Once you dive into the world of web typography, there is a seemingly infinite wealth of information you can reference to learn this essential communication and design standard. Some of our favorite sites to keep up with and learn about the ever expanding world of typography are:

  • Type Daily: a typography aggregator about all things lettered on the web
  • I Love Typography: a frequently updated typography blog
  • Font Feed: a blog dedicated to all things fonts
  • TypoPhile: a very active forum about typography
  • Typographica: a site devoted to type reviews, books, and commentary
  • Type Directors Club: an international organization that supports excellence in all mediums for typography. The Type Directors Club hosts two yearly type competitions - one for the implementation of type in design, and the other for the design of type itself.

Conclusion

Presenting written information, especially on the internet, requires you to bridge the gap between what you mean and what people hear by making your presentation visually appealing. The stylized presentation of letters and words is called typography. Typography is essential for any written communication - it is the visual representation of emotion, tone, and character. Whether you are a designer or a writer, it is imperative for you to understand both how and why people respond to typography, allowing you to use typography to your advantage.

Typography can make or break the connection people feel when they are presented with your content for the first time. Typography is a serious business, but it's also extremely fun and rewarding.