The Web Typographers Essential Toolkit – 22 Tutorials, Tools, and Resources
February 12th, 2010
This collection is for those of you who have already gulped down the typesetters Kool-Aid. You know who you are; the crowd who grimaces at badly kerned movie credits, who get misty-eyed about old motel signs, and who think comic-sans was created by fascists hell-bent on making your Chinese food menu look festive. It goes without saying, in any discipline you have to know the rules before you can break them, yet among young designers there is a perpetual debate revolving around the use of grids and scales. The bottom line is if you’re serious about your craft, these are fundamental tools. As a designer they are as crucial as internalizing the gestalt principles of perception or the basic tenants of color psychology.
The biggest hurdle to overcome for developing designers exploring the analytical and strategic design approach is to create or use a system that is appropriate and robust enough to fulfill the project’s needs. To aid you in your journey, here are some of my favorite resources for both advancing your knowledge of the technical ins and outs of web typography and honing your skills in the art itself.
These three tutorials will give you a solid understanding of what typography is and how to design using established principles.
- 20-dos-and-donts-of-effective-web-typography – This is the most elementary of all the tutorials. It covers the basics, but doesn’t provide a strong contextual background to understanding why one should follow the do’s and don’ts.
- six-ways-to-improve-your-web-typography – This should familiarize you with both the vocabulary and technologies used for great web typography. It’s a good introduction, but really only scratches the surface.
- five-simple-steps-to-better-typography – This is the first of a series of tutorials that provide in-depth coverage of the fundamentals of good typography with a focus on how it is applied to the Web. Reading all five will give you a solid understanding of the craft and the foundation to start creating on your own.
These tutorials will give you a deeper understanding of some of the principles mentioned above. When you internalize these concepts, you’ll have the resources at your disposal to create elegant pages. There’s still much to learn, but at this stage you’ll have a roadmap.
- typographicscale – This is a great article on working with a typographic scale. It is a good companion piece to the 24 ways vertical rhythm article below.
- compose-to-a-vertical-rhythm – One of the most overlooked subjects in design, setting the vertical rhythm of a page can make or break a layout. This article covers both concepts and technical execution.
- 10-examples-of-beautiful-css-typography-and-how-they-did-it – Here’s a little head start. This tutorial shows a small collection of very specific examples of good typography from excellent sites, and shows how they were coded. It’s a good jumping off point for those of you who need a little help establishing the tone of a document, or need help with more advanced CSS typography.
- how-to-use-headings-in-html – Headings and page hierarchy can be a confusing subject at first. This concise tutorial illustrates appropriate usage of heading tags when constructing an html document.
I’ve saved these two tutorials for more advanced typographers not because they are more involved, but because the concepts are distracting from the fundamental tenants of typography. These tutorials are more about experimentation and embellishment than the others. Think of these as seasoning on top of the basics.
- x24d.com/blog – This tutorial takes into consideration some of the more abstract aspects of typesetting. It is more useful for styling or creating effects than developing a systemic approach.
- typographic-contrast-flow – This post deals with some of the other design elements beyond size and typeface that will affect how your audience views the composition.
- webtypography.net – This is the one reference I come back to time and time again. It’s an adaptation of Robert Bringhurst’s quintessential book The Elements of Typographic Style. The site applies and explains many of the more nuanced aspects of traditional typography applied to the Web.
- elegant-web-typography-presentation – Jeff Croft Has published the deck from his excellent presentation on Web typography. In it he dispels many of the myths and outdated ideas about setting type for the screen, and establishes a good collection of best practices and standards.
- alistapart-typography – A List Apart is the all-encompassing web geek’s library for doing it right. I’ve linked to their ever-growing section dedicated to typography, which covers a broad cross-section of topics both aesthetic and technical.
- typophile – An online community dedicated to the typographic arts. It has a strong print focus, but is full of great inspiration.
- typographic-design-survey-best-practices-from-the-best-blogs – This is a synopsis of a survey conducted by Smashing Magazine comparing how many web professionals are approaching various aspects of web typography. It’s a good resource if you’re interested in how designers are approaching the grey areas within best practices.
- complete-guide-to-css-font-stacks – This is a guide for using CSS font stacks to give the designer more choices in typefaces and an elegant way to degrade them to the core web faces.
Tools and Utilities
- typograph – This is one of my favorite web based typographic tools. It’s somewhat counterintuitive at first, but it allows the designer to quickly concept a scale and rhythm of a fixed block of text and various headings to get a feel for how it will appear contextually.
- mikeindustries/blog – One of the better known and documented font replacement technologies.
- neocracy – A different approach to custom fonts for web.
- typotheque – The third major contender for font substitution.
- typekit – A service-based approach to expanding web fonts. They have a huge library of prepared fonts, which can be navigated by style or tags.
- typetester – A great tool for comparing how different web-safe fonts will appear on screen. It also compares faces loaded locally on your system.
- csstypeset – Users can manipulates sliders to get text looking perfect for their application and the site will generate the appropriate CSS.
I hope you find these tools and resources useful. And, it’s okay to admit that you love typography. I do.
Tags: Design, Technology, User Experience