facebook google plus twitter
Webucator's Free Typography Tutorial

Lesson: Anatomy

Welcome to our free Typography tutorial. This tutorial is based on Webucator's Typography course.

The study of typography is deeper than one would think. It is more than just picking a nice font for a project. The more you learn and understand the fundamentals and history of typography, the better you will be able to apply it to today's projects.

Lesson Goals

  • To define the anatomy of typography.
  • To understand the many purposes of typography.

Defining the Anatomy of Typography

Anatomy of Typography

Typography is the use of the proper typeface at the proper time. Understanding the different parts of a typeface character can help you better understand the way that it will flow when placed together into written word. Whether the project is going to be printed or on screen, for business or advertising, the message must be clear.

Labelled Typography Graphic

Ascender Line: Stroke of a lowercase character that extends above the x-height.

X-Height: The height of a lowercase X. This will vary among typefaces. The x-height is one of determining factors of readability in paragraphs.

Baseline: Line onto which all characters align.

Descender Line: Stroke of a lowercase character the dips below the baseline.

Serif: Corners, or "feet," that exist on the end of the strokes. Serif typefaces are great for written paragraphs, and the "feet" improve reader comprehension.

Bracket: The connector between the serif and the stem/stroke. These tend to vary in degrees based on the contrast and angle of the strokes.

Terminal: Stroke end that does not have a serif.

Loop: Loops are found at the bottom of some lowercase characters.

Stem: A vertical or diagonal stroke.

Purpose of Typography

Typography is more than just artistic text that makes a design attractive. The main purpose of typography is to bring clarity and readability to the display of information. Whether we are developing a set of professional marketing materials, or a advertising campaign comprising multiple media outlets, typography is the key to the message getting through to the intended audience.

Use proper typography to:

  • Draw attention to text content.
  • Ensure readability and clarity of message.
  • Create consistency across various media types.

Look at the samples below:

The one on the left uses a sans-serif font with no discerning differences between titles or paragraph text.

The one on the right uses a sans-serif title that is a bit larger than the serif body text that has a break between the paragraphs.

Text Samples

The results are clear; the one on the right is easy at a glance to digest, whereas the one on the left is merged together and takes effort to dissect.

Regardless of the types of material you are building, treat each page/screen as an interface that should have much thought placed into the proper placement of each element.

Brief History

History of Typography

Vintage Typeset Blocks

Typography had its beginning as far back as the mid 15th century when the movable type was invented. Western printing has three major type families that originated from the calligraphers of the time. They were the Roman, Italic, and Black Letter (Gothic).

Since then the number of typefaces has grown and the technology used to create print publications has drastically changed. Typography today also incorporates on screen display of text.

Type Use Today

Today type can be found in print, on websites, and on many electronic screen devices. The following is a list of the types of fonts that work best in each sort of application. Whichever fonts you choose, make sure you are choosing the fonts that are universally available to all users of all operating system and web browsers. Special fonts can be sent to the printer to install and use when needed in the print world.

Print

  • Titles and main headings typically use a sans-serif font such as Helvetica.
  • Body paragraphs use a serif font such as Times.

Websites and Electronic Screens

  • Titles and main headings typically use a sans-serif font such as Helvetica.
  • Body paragraphs also use a sans-serif font such as Helvetica, Verdana, or Arial.

Google Fonts

Google offers hundreds of free open-source fonts that were optimized for the web experience. More details and an updated list of these fonts is available at the following link. http://www.google.com/fonts/

Improving Readability of a Text Block

Duration: 15 to 25 minutes.

In this exercise, you will explore a text sample and see how a few changes will increase the readability. You may use a design tool, such as Adobe InDesign, or a simple text editor, such as Microsoft Word.

  1. Open the file that matches your tool:
    1. If you are using InDesign, use anatomy/Exercises/textSample.indd.
    2. If you are using Word, use anatomy/Exercises/textSample.docx.
  2. Use the formatting tools to change the sample text so that it is easier to view and read.
  3. Save your file as anatomy/Exercises/my_textSample.indd or anatomy/Exercises/my_textSample.docx.

Solution:

Using Adobe InDesign:
  1. Open Adobe InDesign.Adobe InDesign
  2. Open the anatomy/Exercises/textSample.indd file.
    1. File > OpenOpen File
    2. Choose textSample.indd.Text Sample File Name
    3. The screen should look something like this.Opened File
  3. Use the various tools to change the text.
    1. Double-click on the text block to edit the text. Select "Title".Double-Clicked Text
    2. Format "Title" to be Bold and 18 pt size.Text Bar
    3. Select the two paragraphs.Selected Text
    4. Format to use Times New Roman (or any other serif font you wish to use).Text in Times New Roman
    5. Add 6 pt above and below the paragraphs.Text with Six-Point Spacing
  4. View the text now and see how much easier it is to digest.Altered Text
  5. Save the file as anatomy/Exercises/my_textSample.indd and close InDesign.
Using Microsoft Word:
  1. Open Word.
  2. Open anatomy/Exercises/textSample.docx.Text Sample
  3. Use the various tools to change the text.
    1. Select "Title". Selected Title
    2. Format "Title" to be bold and 18 pt.Format Bar
    3. Select the two paragraphs.Selected Paragraphs
    4. Format to use Times New Roman (or any other serif font you wish to use).Font Drop-Down
    5. Add 6 pt above and below the paragraphs.Paragraph Drop-Down
    6. View the text now and see how much easier it is to digest.Altered Text
    7. Save the file as anatomy/Exercises/my_textSample.indd and close InDesign.