August 15, 2013

Content Delivery – Part 2: Typography and Visual Hierarchy

Posted by Simon Paul

The foundation of delivering content in a meaningful way is the arrangement of words and sentences. How those words are presented has a direct impact on the readability, meaning, and organization of the content on your website. The arrangement of type is called Typography; which has various characteristics such as typefaces, leading, tracking, etc. Until recently, internet standards have limited websites to a certain set of typefaces. However control over many other typographical elements (like font size, weight, line-height, etc.) has been available for years, and has a large impact on the effectiveness of content delivery.

In this second post of the series on content delivery, I will be focusing on common practices in typography and how they are implemented on the web.

Commonly referred to as font or font family in the digital world, typefaces are the families of type that share common design attributes. There are two general distinctions in typefaces: serif and sans-serif. Serif typefaces are characterized by having elements of decoration at the end of the letter strokes, whereas sans-serif typefaces do not. Legibility for either group depends on the specific font family, not whether or not it is serif or sans-serif. Select your typeface based on how well the typeface personality connects with the content it will be presenting. For example, a car website may want to use a slim, clean sans-serif, where a bakery website might want to use a soft, friendly serif typeface. Additionally, specific lines of text may need to use different typefaces to help portray the meaning of that text.

Type Faces » Font Family

Implementing typefaces are relatively simple with CSS using the “font-family” declaration property. Within this property you can declare any number of web standard fonts or use a custom @font-face font for modern browsers. It’s always good practice to provide multiple font-family values as fallbacks if the primary font declared is not available.

Leading » Line Height

Leading (or line height) determines the space between each line of type. The amount of space between each line has a large impact on readability for any lengthy block of text. Too little space, and the characters interfere with each other, too much space, and it becomes hard to track to the next line. It’s very important to have the appropriate line height on body copy. While the optimal line height depends on the font-family, the general consensus is around 1.5. This number comes from dividing the line height by the font size (usually in pixels or points). For other bodies of text, such as a heading, a tighter line height may be appropriate based on the scale of the font.

The line height is easily controlled by the “line-height” CSS property. It’s good practice to set a default line height relative to font size for the entire website. This can be accomplished by setting a line-height of 1.5em in the “body” selector of your CSS. As you develop various content blocks, you can specify custom line-heights in your CSS based on that class or ID.

Scale » Font Size

The proportion of type relative to adjacent type is by far the most important factor in typography on the internet. This scale variation of type has a large impact on the viewer’s ability to skim the text and visually organize sections of content. It can also be used to highlight specific content and helps aesthetically by providing visual interest with in the layout. While scale is used on just about every website, the proportions are not always optimal. Small steps in proportions can be barely noticeable at quick glance. Use significant steps in scale to help provide a visual hierarchy of importance and reading order. A good rule of thumb is about 1.6 to 1.9 times greater than the previous font size. I find the Fibonacci sequence to be an excellent influence for font sizes (16, 24, 40, 64…).

Typographical scale is controlled by the “font-size” property in CSS and can be noted using pixels or em. Body copy is usually comfortable to read on websites at around 14 to 16 pixels. Heading sizes should range from 21 pixels to around 50 pixels depending on your layout.

Justify » Text Alignment

Regardless of type, alignment is important for the integrity of the entire website. It provides a sense of organization and cleanliness. Modern day responsive grid systems such as Skeleton, help keep blocks of content aligned. Starting with a grid system will greatly ease the process of aligning content. Text alignment or justification refers the edge which the body of text lines up with. Left alignment is the easiest to read (for western cultures). There is a tendency to center align text because it may feel more balanced. However, center aligned text is the hardest to read because there is no hard edge for the eye to follow.

In CSS, the “text-align” property allows you to align the text by the left, right, center, or justified. Justified stretches the lines of text (adds spacing) such that there is a hard edge on both the left and right. Justified may create greater visual alignment, but can create awkward or unnatural word spacing. Left alignment is the safest option for readability, so be sure any deviation from it serves a specific aesthetic purpose.

Columns & Character Count

In reading bodies of text, your eye must follow a line of text and then trace back to the beginning of the next line. As a result, an extremely wide (large character count) body of text can become difficult to read if the eye has a long distance to trace back. It is therefore important to control the length of each line to ensure maximum readability. Most magazines and newspapers use columns to control their content’s width.

This can be done on the web through grid systems. You can use an existing system such as Skeleton or Profound Grid. The average character length should be between 70 and 80 characters. This may not always be achievable in your layout, but be sure to keep it in mind as you develop the layout for your content.

Conclusion

Presenting your content in the most effective manner involves a number of factors. Typography is a key element that influences how your content is absorbed by your viewers. Although typography is a very in depth art (or science), you can take advantage of its most basic principles. Alignment and scale greatly impact the organization of copy and are easily managed through grid systems. Use CSS to define standards and how type is displayed on your website. Make sure your website reads well and your visitors will be happy to keep reading.