WEM: Type is the New Cool in Web Design

By David Hillis (@davidhillis) Apr 14, 2011

Typography is the single most import element of web design. Type has impact. It can make your content sing, or die. It delivers your message, embodies your brand and is the conduit for web experience.

Type is critical because the web is text. In fact, according to some experts, “95% of the information on the web is typography.” I was recently reminded of this by “CSS Wizard” Harry Roberts. At only 20 years of age and already on Smashing Magazine’s Expert Panel, Harry is one of the bright young minds in modern typography.

But Harry is not unique; he is part of a burgeoning movement focused on advancing typography. Type is the new cool. Some of the most groundbreaking advances on the web are happening in typography. As we enter a new mobile Internet era, with the advent of the iPad, Kindle, eBooks and mobile applications, typography has moved front and center. The web has become a reading medium. It’s time to revamp your website with better reading experiences.

Freedom from Helvetica

Websites used to be limited to a fairly restricted pallet of “web safe” fonts. These fonts served the needs of many early websites, but people soon ran into roadblocks.

Many of my customers had corporate style guides which were not supported by standard web fonts. The workaround we often used was sIFR. sIFR uses Flash to present text, but in a way that is accessibility and search engine friendly. Great in its day, sIFR is a now a non-starter because of Apple’s lack of support for Flash on mobile devices and tablets.

The good news is that there are now more typography options than ever before. The resurgence of typography on the web is in no small part due to TypeKit.

TypeKit is a San Francisco-based start-up that is changing the face of the web, literally. Boasting 250,000 customers, including publishers like the NY Times and Conde Nast and online services like Wordpress and Posterous, TypeKit has become the standard for web fonts. They offer a huge library of type foundries and make it easy to find a great font by viewing live “specimens” and browsing categories from retro to nouveau.

TypeKit delivers real fonts on the web using simple JavaScript. Your TypeKit text can be indexed by search engines, copied, translated and rendered in any browser.

One of the services using TypeKit is About.me. About.me is a personal one-page publishing system loaded with creative fonts and layouts. If you have not done so already, create an About.me profile. It’s a great way to experience a handful of TypeKit fonts while creating your unique profile on the web.

Technical Typography

Choosing a great font is only the first step in delivering a great reading experience. You also need to ensure text lays properly on the page.

Optimizing text layout requires strong CSS (cascading style sheet) skills. If you are not a CSS pro, it’s worth outsourcing this aspect of your website to someone who really understands technical typography. If you need to hire a web designer, you also need a typographer. Too often typography is not included in a web design process, or is not fully understood by web designers.

The technical typography approach I like the best uses grids. A grid is a way of visualizing how the text will lay out on the page. It makes it easy to see the measure (length of the line), leading (line-height or space between the lines) and how the text adheres to the baseline in each weight and style. The grid gives you full control of the CSS and will change the way you develop web pages. To learn more about the grid system, read this article on Technical Typography by Harry Roberts.