“Typography exists to honor content.”
—Robert Bringhurst

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”

—Jeffery Veen, The Art and Science of Web Design

Introduction

Getting text to work effectively in your designs is challenging as you have to balance readability with design aesthetics. Between sizing, colors, fonts and spacing, typography is one of the more challenging elements of design. We are going to talk about some tips and tricks on how to properly use type in your designs to get your message across.

What is typography?

Typography is the art, design, and arrangement of text (referred to as type). No matter how many bells and whistles you’ve built into a website, it is the text that users rely on to accomplish whatever they’re visiting the site to do. That’s why it’s so important to know the ins and outs of web typography.

And unfortunately, web typography is a lot different than print with a lot more variables to consider when designing.

Limitations of web typography include:

• No hyphenation, making full justification look ugly when a column of text gets narrow
• Poor control over kerning (ie, the spacing between the letters)
• Designers must account for a wide variety of screen sizes, resolutions and environments

The Anatomy of a Typeface

The anatomy of a typeface involves many tiny, intricate details that differentiates each one from the next.

You especially need to know about these.

Baseline: The horizontal line where text rests, excluding descenders. In many traditional typefaces, every capital and lowercase letter will line up along a common baseline.

Leading: The space between two lines of text is called leading (line-height in CSS). The measure is from baseline to baseline. Often text applications will default to leading that is equal to the point size; designers often change this measure to best fit their typographic style.

Cool fact: The name comes from the physical piece of lead that used to be used in mechanical printing process to separate lines of text.

The longer the line length, the more line spacing is needed between each line of text. By reducing line length or increasing light height, we help keep the reader from getting lost.

Same goes for the text color. The heavier the text color, the more line height spacing that will be necessary for easy reading.

Kerning: The space between any two given characters and the adjustment of that space. (Some may confuse this with tracking, which adjusts the space between all characters, not just letter pairs.) Certain combinations of letters often require kerning to achieve a certain look – think of the space combinations between “AV” and “We.”

Fonts that are properly kerned appear evenly spaced without large open gaps of white space between characters. You might enjoy 11 Photos Made Raunch with Bad Kerning

 

X-Height: The height of the lowercase letters, typically exemplified by the letter x.

Visual Heirarchy in Web Design

The concept of a visual hierarchy is where the elements you want your reader to see and percept first are the most prominent, whether that is made through color, size, font type or something completely different. Typography can play it’s part in the overall hierarchy of your site.

Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed.

The easiest example to explain this is looking at text on a blog, and notice how the title is generally the bigger example of text.

By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

 

 

You can use several different factors to help create your hierarchy:

Size

Objects that are bigger demand more attention. Using size as a hierarchal tool is an effective way of guiding a viewer’s eye to a particular portion of the page. Because size is one of the most powerful forms of organization, it’s important to correlate size with importance in a design. The biggest elements should be the most important in most cases; the smallest elements should be the least important.

Make it easy to read

The term readability doesn’t mean “can you read it?” It asks “Do you want to read it?” Would you pick up a newspaper that was written in calligraphy? Uhhh, no. Because that would be terribly annoying to try to read an article that way. And the same thing goes for on screen. Display faces, for logos or headers are allowed to be more artsy and interesting because they are just a few words or letters. But for your typeface but anything you are reading, should be a clean, legible font like the text faces below.

When it comes to laying out text on a screen, sans serif fonts are almost always the best bet, especially if you chose a font like Verdana that was designed for display on a computer screen. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated.

It’s not possible to entirely avoid serifs, of course. But for large blocks of text especially, using a font without serifs can offer an extra level of guarantee that visitors will be able to easily read a site’s text. When you’re choosing fonts for a project, look through your sans serif options first.

When it comes to reading for the web, too big is better than too small.

Smashing Magazine makes a good argument that 16pt is the ideal point size of body copy for websites.

16 Pixels: For Body Copy. Anything Less Is A Costly Mistake 

It looks big at first, but by golly that is easy to read!

Color

The use of color is one of the most powerful visual elements. It immediately draws attention, and is often times the primary practice to bring attention to the top ranking hierarchical element.

Contrast

Contrast tells you when something is different (more or less important). Thus, everything is defined by its opposite. The big defines the small. The content defines the white space.

Here we can see a good example of contrast using color, size and shapes. The big and colorful typography gets your attention and so does the menu.

Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different and requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.

Proximity

Proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart to emphasize their lack of relationship. Within a page there might be widgets, photos or ads that are separated from each other by space; within those widgets there is a new hierarchy of title, subtitle, and content.

Proximity is also the quickest way to associate similar content.

The Grid helps with proximity.

• The 960 grid system  is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
• There are two variants: 12 (Drupal example below) and 16 columns (Sony example below)

Density & Whitespace

Densely packing elements into a space makes it feel “heavy” and cluttered; When elements are spaced out too much, they may lose the relationships to one another. When a page is designed “just right”, the eye will easily recognize when elements are related and when they aren’t.

Use white space to isolate and highlight areas.

An Exercise to Test Visual Hierarchy

To conclude, I’d like to end with a very simple exercise. As the example, we’ll use a website that you frequent, or a project that you’ve worked on recently; The exercise goes like this:

1. List the key information points that visitors are likely seeking.
2. Assign values (1-10) according to their importance to the average visitor.
3. Now, look at the actual design again.
4. Assign values (1-10) according to the actual visual importance as you see it in the live design.
5. Consider: Does the expected importance match up with the actual designed importance?

In most cases, the answer will include shades of “no”. There are lots of reasons for this – client demands, inexperienced designers, design-by-committee – or a hundred other reasons that you’ve probably read. Understanding visual hierarchy and trying to interpret it is a way to improve the way that you see web design in a whole new light. Hopefully it’ll help inform your own work as well!