facebook google plus twitter
Webucator's Free Typography Tutorial

Lesson: Typeface vs. Font

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

The differences between typefaces and fonts are subtle but distinct.

Lesson Goals

  • To define typeface.
  • To define font.
  • The purpose of each.
  • About and understand the font license system.
  • About open type fonts and the benefits of using them.

Define Typeface

What Is a Typeface?

A typeface is a set of characters that share the same design. Typefaces predate computers and have been used with many technologies to provide a consistent way to create text flows that would be easy for readers of content to digest.Typeface Example

Define Font

What Is a Font?

A font is a very specific size and style of a typeface. They are used to add clarity and visual interest to layout.Font Samples

Purpose of Each

Subtitles

Typefaces set the stage for the tone and feel of a project.Typeface Samples

Look at the sample above and imagine the type of project each font could be used for. You will have ideas and preconceived notions of what each shape makes you think of that are different from others' ideas.

Fonts set the hierarchy of text importance. See the sample below; it has the same size formatting for all aspects of the document. This makes it difficult to easily gravitate to the main ideas.Text with a Single Font

Now look below, using different sizes and typefaces makes the structure of the document easier to follow.Text with Multiple Fonts

Font License Rules

Basic Rules

Some Typefaces are ones that you purchase and you must follow the rules of how you may use them. Others are bundled with software and computer operating systems. Certain technologies, such as Adobe Acrobat and Illustrator, will not embed a font that has special licensing.

Adobe Font Packages for PurchaseThe example above shows several font packages that you may purchase. Source: http://www.adobe.com

Adobe Illustrator Dialog Box Conveying Licensing RestrictionsThe example above is from a project in Illustrator in which the font will not allow for embedded fonts.

Creating Outlines vs. Embedding Fonts

When you are designing a logo or other artistic text, you may find many benefits in the process of creating outlines of the fonts instead of embedding the fonts into the file for further editing. When we send a logo file to a vendor to use, they must also have the same fonts that the file uses, or fonts will be replaced. This would endanger the design and use the wrong font. The process of creating outlines will reduce this risk.

Creating Outlines in Adobe Illustrator

If you do not have Adobe Illustrator, a PDF copy of the completed logo is available for future use in the course. See screen images below for details of the process. type-face-vs-font\Demos\logo_edge_outlines.pdf

  1. Open the type-face-vs-font\Demos\logo_edge.ai in Adobe Illustrator.Logo Demo in Adobe Illustrator
  2. Select the text using the Selection ToolSelection tool.Selected Text
  3. Click Type > Create Outlines. Create Outlines in Type Drop-Down
  4. The text is now a series of shapes and is no longer editable. This process ensures that the logo will always be the exact match of our vision even if the vendor does not have the exact font that we used.Uneditable Logo Text

Open Type

Characteristics of Open Type Fonts

Open Type is a scalable, cross-platform file format that is used for computer based typefaces. Adobe and Microsoft worked together to create a file format that has many benefits.

The two main benefits are:

  • Cross-platform (font files will work on both Windows and Macintosh OS).
  • Expanded character sets (advanced typographic control of rich linguistic and many features to choose from).

Open type fonts have one of two file extensions (.otf, .ttf). Both work equally fine and you may search for Open Type fonts on many sites.

  • Fonts that were based on PostScript data use .otf extension.
  • Fonts that were based on TrueType use a .ttf extension.

Key Features of an Open Type Font:Open Type Font ExampleAdobe Caslon Pro 18 pt Uppercase A. (Artwork below was captured from InDesign Glyph panel for display purposes only.)

  • Alternates: Stylistic Alternates to Standard Glyphs.Alternates to Standard Glyphs Drop-Down
  • Capitols: Small caps, provides better spacing.Small Caps Example
  • Ligatures: Contextual (enhance readability), Discretionary (ornamental), Historical, Standard.Standard Ligatures Drop-Down
  • Numerical: Fractions, Slashed Zero.Numeral Fractions Drop-Down
  • Swashes: Alternate decorative glyphs.Swashes Drop-Down
  • Variants: Superscript, Subscript.Variants Drop-Down

Use Fonts to Create a Logo Mockup

Duration: 15 to 25 minutes.

In this exercise, you will use any text editor (InDesign or Word) to create a beginning mockup for a new logo. Your job is to take the company name and use various typefaces and fonts to create a list of options that may become the official standard for the company. Below you will see a brief writeup about the company and the image that they want to convey to their audience of teenage students.

Round Rings Inc. (startup company specializing in high school class rings and merchandise) will need a logo to represent the "fun" aspect of their company and appeal to a youth market.

  1. Open a text editor of your choice.
  2. Create a new document and type the words "Round Rings Inc."
  3. Format the words to be 72 pt in size and explore fonts until you find the one that embodies your vision.
  4. Save your file and make note of your font as it will be used to make a logo later on.

Solution:

  1. Open Microsoft Word.Blank Microsoft Word Page
  2. Click File > New... to create a new document.New Document
  3. Type the words "Round Rings Inc." Round Rings Inc. Typed on Page
  4. Select the text and format the words to be 72 pt.Text in 72 Point
  5. Explore fonts until you find the one that embodies your vision.Font Drop-Down
  6. Save your file as "type-face-vs-font\Exercises\fontChoice.docx" and make note of your font as it will be used to make a logo later on.Text with Formatted Font and Size