Principles of Design: Typography

Legibility and Readability

For the typeface designer, the concept of legibility  - or ensuring that each individual character is distinguishable from the rest - remains a primary concern. However, for most web designers employing already-assembled fonts, the typographic principle of readability becomes more important, itself branching into two distinct concerns: the ability to see the text on the screen and the ability to read the text on the screen. Both concerns are front-and-center in the designer’s rationale behind choosing their font. Additionally, the designer has the option of manually kerning the characters and adjusting the leading between lines, allowing for the most effective contrast between white space and characters. In our Multimedia course, this was accomplished using Fireworks and CSS: for example, in her execution of the “DHSI Design” header logo, Emilie manually kerned Helvetica to allow the weight of the font its maximal visual impact. In the choice of font for the blog’s main content, Verena chose Open Sans with both seeing the text and reading the text in mind. Open Sans employs more space between characters, allowing the reader to visually digest the posts and also to read across at a quicker pace.

 

 Combining Fonts

In most websites, the designer has to choose a combination of fonts to service the header, body, sidebars, and footer. While all of these spaces in the visual field don’t have to be different, often it helps to strategic choose how your fonts will work with, or against, each other. The three main options for this process are concord (high degree of similarity in adjacent fonts), contrast (high degree of difference), and conflict (neither, but not similar enough to be harmonious). The Typetester online tool is a great way of seeing how your various font choices will look alongside each other. Once we decided to operate within the sans-serif family of typefaces, our design template involved working within, and tweaking, the concord strategy. In the header, Helvetica achieves certain things on its own - for example, as a bold, big, bloggy, and yet minimalistic font, it coordinates with our image and color scheme, letting the color coordination stand out - however, it also works concordantly with Open Sans in the body.

 

Fonts for the Web

When selecting typeface for the web, you have to keep in mind that text will be displayed in a number of different contexts- mobile devices, different browsers, and different operating systems handle fonts in divergent ways. Increasingly, normalizing typeface is becoming automated, but there are still some good standard practices to follow for the web. One is to specify a font family rather than just one font for your blog. (Usually interfaces like Blogger and Wordpress do this for you). A font family is a collection of similar fonts in a list, usually found in your CSS. If the first font in the list can’t be displayed, the next one will automatically be displayed.

So, if you specify “Arial, Arial, Helvetica, sans-serif” as your font family, the browser will first display text in the Arial typeface. If no Arial fonts are available, it will move to Helvetica, and finally any sans-serif font if nothing else is available. This keeps your text looking relatively consistent across different devices. Here is a nice display of font families. Another great resource for fonts for the web is Google web fonts which hosts hundreds of free fonts on the web that you can link to with your CSS. This means you can use totally crazy, creative fonts and they will still work on other peoples’ displays.

We stuck with a simple, sans-serif collection of fonts for our website. In general, the textual content of a site like a blog is most easily read with a simple, appropriately sized font like Verdana or Arial. Elements of a site like headings, subheadings, and page titles can be more creatively typeset, as viewers will skim over them quickly and their primary purpose is to break up large chunks of homogeneous text.

 

Cultural Considerations of Typography for Web Design

The explosion of digital text has meant that fonts and word processing are now permanently interwoven with the texture of everyday aesthetics. This means that the use of fonts on the web throughout the Internet’s history has given certain typefaces cultural associations. It is important to watch what other designers are doing in order to catch aesthetic trends and adapt to them. For instance, you probably have recognized that Comic Sans is not popular with web designers- In fact, it’s anathema. Meanwhile, clean, minimalistic fonts like Helvetica have become a popular way to express forward-thinking design savvy. Some other considerations:

• Verdana is a very legible font, but it is also “invisible” because so many people use it. This makes it a great font for large blocks of textual content that must be read carefully.

• Times New Roman is also very legible, but because it was the default font in the “Netscape era,” it can make a page come across as out-of-date. It can make for nice headings, however.

• In general, serifed fonts can evoke more of a “period” look because they were used in pre-digital print for so long. This can be great if your webpage has a vintage or historical vibe, but probably isn’t appropriate for advertising cutting edge techie innovation.

For the total typography geek, I Love Typography has great font reviews that explain the historical background behind the creation of innovative and beloved fonts. They also have good articles on selecting fonts and typography for the web.