5 PRINCIPLES
AND IDEAS
OF SETTING TYPE
ON THE
WEB

DESIGNING FOR PLEASURE

We are pleasure-seeking creatures and appreciate fine things: beautiful colors, textures and shapes; contrasts in rhythm; layers of complexity. But fine things cannot compensate for an unpleasant reading experience.

Instead of asking “What can I do with this space?” ask, “WHAT DOES A READER NEED FROM THE TEXT”

Instead of asking “What new font am I dying to use?” ask, WHAT DOES THE TEXT NEED FROM ME?”

Instead of starting with visual inspiration, read the text you’ll be working with.

Design a pleasurable reading experience, and the other fine things will follow.

Steve Jobs: “PEOPLE DON'T READY ANMORE."

Amazon’s Kindle e-book reader will fail, Steve Jobs says, because Americans simply don’t read. From The New York Times:

“It doesn’t matter how good or bad the product is, the fact is that people don’t read anymore,” he said. “Forty percent of the people in the U.S. read one book or less last year. The whole conception is flawed at the top because people don’t read anymore.”

Google’s Android platform gets a similar drubbing. Also, there were 100 prototype MacBook Air designs prior to the final model.

"Some of the competitors’ machines are so flimsy, [Jobs] said, they require a fifth or even sixth [rubber] pad to keep from sagging."

5 PRINCIPLES AND IDEAS OF TYPSETTING ON THE WEB

By : Sean Hodge

There are some basic approaches, guidelines and goals to consider when working with type on the Web. Overall, the medium of Web typography involves readability, accessibility, usability, and brandability. On the Web, these aspects function together to accomplish design’s goals of communication and user interaction. There are many ways to approach Web typography in order to create effective and expressive results. Let’s take a closer look at some principles, rules and ideas for approaching Web typography decisions — you can use them as a starting point for learning how to achieve effective type setting on the Web.

1. Approach Web Typography Decisions Systematically

In web design every typographic decision needs to simultaneously accomplish a variety of results. Each headline you create should be set in text that is legible and search engine friendly, while the typeface should fit within the guidelines of the company’s brand. Furthermore, typography should fit to the graphic style of the site and meet user expectations of being able to copy and paste text. As you can see, that’s a wide array of needs for a headline to accomplish. In some cases, this poses a problem. For instance, styling and branding guidelines may require from the designer to use specific typefaces which can’t be used online direcly. So a decision needs to be made: deviate from the brand guidelines to maintain optimal search engine friendliness or use an image replacement solution which embeddes the required font in an image (statically or dynamically) or consider using sIFR, a rich Flash-based dynamic font embedding technique which allows not only for embedding fonts into content presentation but also interacting with them (almost) as you would do with plain text.

2. Utilize Information Hierarchy

There is more than one way to define precedence through the use of typography. First of all, the type size, color, weight, case, and whether the type is set normal or in italics will give the font greater or smaller importance. We also can’t ignore where the type is placed within our website layout.

Mark Boulton has a great 5 part series on Typography called Five simple steps to better typography. In the 5th part of this series, he discusses weight. He gives a historical perspective on how weight works with typeface in creating a hierarchical order. The article explains what text types users expect for different parts of a page. Below is a diagram of how one would hierarchically select type style based on historical perspective. Click on the image below to read Mark’s description of it.

Users will react to type differently depending on where it is placed on the page. Type placed in the main body copy will have greater importance than type placed in a sidebar, with all other factors being equal. Large type in the sidebar will still call attention to itself and could move itself up in the pecking order. One needs to carefully balance type in the main body and sidebar area based on how you want the user to digest the information you present.

Consider the following screenshot from the article A Guide to Web Typography below. The image shows how type characteristics effect hierarchy. Also, notice how strongly the sidebar stands out. Although it’s clearly separate from the main content, and therefore appears to be less important, it’s hard not to be drawn to all the fonts which are presented on the black background. This design decision is effective as it makes you want to acutally click on the fonts.

3. Design for Optimal Flow

Hierarchy is important in page flow as well. It helps users to recognize the most important elements of the page as they scroll down through it. There are other typographic issues to look at regarding the flow. Spacing is a big part of the flow. White space, tracking, leading, indentation, as well as the padding and margins on elements — all these elements form the flow of the page.

Nick La has written an article on Typographic Contrast and Flow. It uses the Web Designer Wall site as an example of good flow. The explanation given of flow is concise, “Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.”

Ultimately, it’s up to the designer to create good flow. Concentrate on each element of spacing and hierarchy. Then review how they work together as a whole. Take a closer look at the image above to get an idea of how elements work together to create a good flow.

4. Maintain Legibility Within the Presence of Branding

In order for a website to stand out the visual design of the site needs to be of high quality. In some cases, this takes the form of an elaborate design. With the growing popularity of illustrative and heavily textured sites, the need to make sure that typography is optimally chosen remains particularly important. Let’s review a few sites that use grunge design and texture elements. We’ve looked at these sites before in the article The Secrets Of Grunge Design, but not in this way.

In the website Pain is Good, the company’s brand is dominating the page (see example below). Most of the text on the page has been replaced with images. This allows the designer to take advantage of brand identity fully.