Topography is the art and process of arranging type (font, size, and readability) for a variety of media types and is composed of several parts. In this post, I will go over some typography basics that have been essential in my web design education.
Typography definitions
There are various definitions you should be aware of when studying typography. Below are some basis definitions to get familiar with:
- Type size (a.k.a. Cap height): overall height of letter
- Ascender: upward tail on letters such as h, l, t, b, d, k
- Descender: downward tail on letters such as p, g, q, y
- Counter: white space inside letters such as O and P
- X height: height of letter excluding ascender and descender
- Baseline: boundary the lowest part of the letter rest on
- Kerning: space between individual letters (affects readability)
- Leading: space between lines of text (affects readability)
Type alignment
Type alignment is an important consideration. The choice of type alignment can affect the message you try to convey.
- Left alignment is used for standard text to create easy to read text. Example include casual letters, unpublished manuscript and basic paragraph styles
- Right alignment: is used to convey clean, crisp professional look. Thus, it tends to be used for corporate business letters, business cards, and others that require a more formal style.
- Center alignment is used to draw attention, commonly used for headings and titles. Example include newspaper headers, book titles, report titles
- Justified alignment is used by newsletter print and body text of textbook. It’s difficult to use and could lead to problem known as tracking.
Font types
There are an abundance of font families to choose from and they fall into the following three categories:
- Serif fonts are fonts that have extensions or strokes on the end of the letter. They are easy to read for longer pieces, and therefore are good for body text. They tend to be more conservative. Examples: Times New Roman, Courier.
- San-Serif fonts do not have extensions or strokes on the end of the letter. They are good for labeling, headings and titles. They are easy to read with a more contemporary feel. Children’s books tend to be written in San-Serif because they are more identifiable to kids as they are learning the alphabet. Examples: Arial, Helvetica.
- Scripts, Symbol, Decorative fonts are used to create specific image or message (e.g. weddings and birthdays). Example: Pacifico.
In conclusion, typography is an essential component of web design and development. Your choice of font and alignment can impact the message you try to convey and the brand image you try to project.
