NavigationArts.com

our company

Contact Us

Navigation Arts Location Map

Connect

Find out more about our consulting services. McLean. Boston. New York.

What's New

jwa-rail

Site Launch!

Jewish Women’s Archive shares Jewish history with enhanced user experience.

Solutions

Thinking Big

Clark Construction

Digital Innovation

Reimagining how our clients can do business in the digital world.

Thinking Small

University Website Design

Mobile & Responsive

A responsive design approach engages users wherever they are. Web. Tablets. Mobile.

User Experience

Left Brain

PFC Energy

Critical Thinking

User-centered digital strategies help our clients surpass their competition.

Right Brain

National Aquarium

Immersive Design

Exciting and memorable visual experiences guide users through digital channels.

Technology

Sitecore

sitecore

Certified Partner

NavArts is one of only 7 Sitecore partners in the USA with 4 or more certifications.

Drupal

Drupal 7 Content Management

Open-Source

NavArts brings proven process and UX skills to the popular open-source platform.

our work

Case Study

Marriott

Marriott International

Multisite design creates seamless booking across more than 3,000 properties.

Design

Portfolio_Water

Portfolio

Cutting-edge design to revolutionize the world of user experience.

Insights

Content Guide

content migration whitepaper

Download

Give content as much attention as the design, code and testing of your site.

What is UX?

Nicole Dingess

Watch

UX should be in your digital vocabulary, but do you fully understand its significance?

Search

The Web Typographers Essential Toolkit – 22 Tutorials, Tools, and Resources by:


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.

Tutorials

Beginner:

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.

Intermediate:

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.

Advanced:

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.

Reference Materials

  • 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




2 Comments on “The Web Typographers Essential Toolkit – 22 Tutorials, Tools, and Resources”

  1. Ted says:

    Hey thanks for the feature! (x24d.com/blog)

    :)

  2. Frank D. says:

    I go back to the days of paper tape. Thanks for the guide. I’ve bookmarked it, and I’m looking forward to returning. It looks like a great (and needed) page of resources.

    I’m also looking for any past graduates of the now-defunct Philadelphia Printing School typography / typesetting program. It was located on Market Street, across from the Galleria. There is nothing at all on the web.

    – Frank D.

July 2014
M T W T F S S
« Jun    
 123456
78910111213
14151617181920
21222324252627
28293031