facebook twitter
Webucator's Free Typography Tutorial

Lesson: Types of Typography

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

Typefaces are categorized into basic families. These families are then broken out into individual, unique typefaces that are mostly used for onscreen and print display.

Lesson Goals

  • To determine the types: serif, sans serif, and decorative.
  • To determine the roles of each type.



Serif Typeface

Serif typefaces are very traditional. They are similar to one another as they each have an extra decorative element on the ends of each character ("feet"). Serif typefaces work well in print in text heavy layouts which have many body paragraphs. When used in text heavy documents, the reader will respond favorably and better retain the information.

Sans Serif

Sans Serif Typeface

Sans-serif typefaces are similar to one another in that they are smooth (no "feet") and work best for print titles and on screen body paragraphs. On screen design benefit from sans-serif typefaces as they appear to be "smoother" and are the preferred typeface for readability on websites.


Decorative Typeface

Decorative typefaces are varied and range in readability. Some are appropriate for body paragraphs, while others should be restricted to use in logos and artistic text elements.

Roles of Each

Serif: Serif fonts are used mostly for body paragraphs.

Sans serif: San-serif fonts are displayed nicely on screen and are great for titles.

Decorative: Decorative fonts are best for short text and often the basis of a logo.Serif, Sans Serif, and Decorative Fonts types-of-typography/Demos/Ad.ai

Creating an Ad Layout Using Different Types of Typography

Duration: 15 to 25 minutes.

In this exercise, you will create an ad layout for Round Rings Inc. using different typography. Open types-of-typography/Solutions/MyAd_import.ai if you wish to see a completed ad. Be as creative as you like, but do try to include a logo, title, and body text. Images are your choice if you wish to add them; some have been included in extra-files.

Note: The solution files use Adobe Illustrator.

  1. Open a layout program (Illustrator, Photoshop, InDesign are a few examples), but you may use any that you like.
  2. Create a new document.
  3. You may create a logo, art object, and body text on your own or choose to import the finished objects ready to place (see below).
  4. Open/import the various elements extra-files (artistic_ring.ai, logo_edge.ai, logo_fun.ai, or bodyContent.docx).
  5. Place them using your best judgment to develop an ad for a magazine or online ad (you choose the media type).
  6. Make sure to use the proper types of fonts when formatting the body text and creating an artistic text/logo. For example, use one of each (serif, sans serif, decorative).
  7. Save the ad "types-of-typography/Exercises/MyAd" (file type will differ based on the software you are using).


Possible solution using Illustrator.

  1. Open Adobe Illustrator and create a new document. Click File > New.New File in Adobe Illustrator
  2. You choose the size. I am using a 43p6 by 31p6. Click OK.New Document Box
  3. You may create a logo, art object, and body text on your own or choose to import the finished objects ready to place.
  4. To create on your own:
    1. Draw an art object (such as a graduation cap). There is a sample for you to use if you choose not to draw one on your own: extra-files/GradCap.ai. Type the company name "Round Rings Inc." Select the text.Graduation Cap with Round Rings Inc. Text
    2. Choose a decorative font to use as the logo text. Click Type > Font and choose a font. Try several until you match your idea of what the logo should be. Choose a larger size. Click Type > Size > 72 pt. Adjust as needed until it fits well in the ad layout.Type Size in Drop-Down
    3. Yours may look similar to the following.Graduation Cap with Stylized Text
    4. You may need to break the text into outlines based on its font license. When you save the file, a message box will appear if the font cannot be embedded. To create text outlines, select the text object using the Selection Tool and click Type > Create Outlines.Create Outlines in Drop-Down
    5. Place the ring image the client has asked you to use: extra-files/artistic_ring.ai.
      1. Click File > Place.Place in File Drop-Down
      2. Choose the file extra-files/artistic_ring.ai and click Place.Place Box
      3. Click OK.Place PDF Box
      4. Position and format to suit you. Graduation Cap Logo with New Image
    6. Create text and format using a serif and a sans-serif type font. You choose the fonts and sizes to fit you style of ad.
      1. Click the Type Tool.Type Tool
      2. Left-click and drag to create a text box for your text.Text Box
      3. Type and format your content.Logo with Typed Content
  5. To import:
    1. Click File > Place.Place from File Drop-Down
    2. Choose the file extra-files/artistic_ring.ai and click Place.Place Box
    3. Click OK.Place PDF Box
    4. Repeat steps 1-3 above until you have added all parts you wish to use.
    5. Position and format to suit you.Finalized Ad Layout
  6. Save the file. See finished files in types-of-typography/Solutions/MyAd_import.ai)