Web Design

Typography is the study of typefaces/fonts and how typefaces are used to create a visually-appealing design and communicate meaning ("What is typography," n.d.). Typography is a design aspect that the casual observer/viewer may not thoughtfully consider, but it is one aspect that truly affects the design of a web page and a user's reactive response to the page.

Typography and Readability?

Typography in web design is used, first and foremost, to ensure the readability of the text displayed. The effective use of typography creates a readable design of the text as it is displayed on the screen. When considering the type of font to use in your web page it is important to be able to differentiate between the most common font typefaces:

Serif fonts are fonts that have "feet" or "hooks" ("Purdue OWL," n.d., para. 2). You may be asking yourself: "There are fonts that have feet and hooks?" Indeed. Consider the Times New Roman font - a serif font with feet and hooks - in the image below. Note: Not all of the feet and hooks have been highlighted in the image.

The term "sans" means without; so a sans-serif font is a font without feet or hooks. Note the absence of feet and hooks in the Arial font image below.

Monospace fonts are also known as fixed-width fonts - meaning each character in the font occupies the same space width-wise. Look at the Arial font image above. Look at the "r" and the "a". Notice how the "a" is much wider than the "r". Now look at the Courier New font image below. Notice how each of the lower case letters have the same width. As an aside, Courier and Courier New are perhaps the most common monospace fonts.

In regard to readability: serif fonts are considered to be the easiest to read, whereas sans-serif fonts are considered to be cleaner. A general rule regarding the use of serif and sans-serif font is to use Serif fonts for paragraph text - like the text in an article - and sans-serif fonts for heading information, bullets, and text-based navigation.

Using Typography to Create a Mood

Typography not only aids in the readability of text on your page, but it can also be used to create the mood of your web page. In fact, the appropriate use of color and typography really help to create a mood for and communicate meaning in your web page.

Reflect a moment...when discussing color schemes you were asked to consider the mood you wanted to create in your web page design as well as the meaning you wanted to convey to visitors. Think now about the typography that you could use to support the mood and meaning of your page. For instance, is the mood of your page fun and entertaining? If so, consider using a rounder/bubblier font for the header image or header text. Is the mood of your page to be minimalistic or futuristic? If so, consider using a straight, thin font for the header image or header text.

One caveat in regard to using typeface to create a mood is that not all fonts are web browser compatible - meaning visitors to your web site will not be able to read the font on the screen. There are several ways to deal with this issue that will be discussed next in the Typography Considerations section.

References:
Purdue OWL: Using fonts with purpose. (n.d.). Retrieved from: https://owl.english.purdue.edu/owl/resource/705/02/
What is typography? definition and meaning. (n.d.). Retrieved from: http://www.businessdictionary.com/
definition/typography.html

What is Typography?

Typography and Readability?

Using Typography to Create a Mood