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.
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.
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.
Type Meets Mobile
Mobile is the future of the web. There are already more mobile Internet devices than PC’s. With billions of mobile devices worldwide, your content needs to be optimized for mobile. (Editor's Note: see Mobile Internet Era: Planning Your Mobile Strategy)
The hard truth is that on mobile, web design is clutter. It gets in the way of the content and results in awkward “pinch and zoom” browsing experiences.
What counts on mobile is type. Crisp text, properly sized, with comfortable line-height and measure will deliver more value for your mobile content than any graphic design.
When focusing on mobile typography there are a number of considerations. The first issue to tackle is what fonts are available on the device. What makes mobile different from the desktop Internet is that content is often cached for offline reading. If you use a font that is embedded on the device you can ensure a good reading experience.
You can get a good list of fonts for Apple iPhone and iPad. Android is a bit more challenging, not only because of the fragmentation of devices, but also the limited font libraries.
Because a phone has a small screen it is critically important to choose a readable font. If you choose a Serif font you will need to bump up the size to maintain clarity more so than with a San Serif. Also, because people generally read from a phone at arm’s length keep the line-height larger than you normally set it.
Once you select a font, you need to make sure that your layout is optimized for mobile. Using standard viewport or @media settings in your CSS you can optimize your content for a mobile layout. However, there is much more that you can do.
Phones and tablets are different than PC’s in that people change the orientation between portrait and landscape while they are reading. You can account for both these orientations and provide an optimized reading experience for each. Also, mobile users often access web content in low light or high glare environments. By providing an inverse reading option (dark background, white text) you can make content much easier to read in these conditions.
As we enter the mobile Internet era, the web is shifting from “browsing” to “reading” experiences. This is a sea change. It fundamentally changes not only how we, the user, consume content, but how publishers manage content and develop websites.
With the new focus on reading and typography, some of the most exciting advances on the web are happening in the type-arena. The opportunity is huge. 95% of the web is text. Changing the reading experience can do more to advance the Internet than any new technology.
When planning your next website, or simply updating your existing styles, think about type strategically and design for readability. Just the right mix of reading and display fonts with a well planned layout can enliven your content and engage your audiences, resulting in a far more effective website and user experience.
Editor's Note: Follow all of our experts views on Web Engagement, including:
- Why Quality Web Engagement Takes More Than 140 Characters
- Mobile Content: More Than Just a Bit of CSS Reformatting
- WEM: Corporate and Mobile Websites Still Falling Short of Consumer Expectations