IAT-102: 03 Type History

IAT-102: 03 Type History — A slide deck

Type History

Lecture outline

In this week's lecture

  • Type history
  • Type fundamentals

Lecture slides will be available the morning of the lecture.

Close All Laptops Please

Only the back row may use their laptops.

IAT-102: P01 Process
Gestalt sketches
Why is it often the case that ambiguous figure-ground relationships have a lot 'going on' visually?
Gestalt sketches
Which Gestalt relationship is being shown? and where does it lead our attention?
Gestalt sketches
Why is this an example of similarity?
Gestalt sketches
How is this an example of similarity?
An old weathered typewriter
Type History

The Printing Press

Let there be type!

An illustration of an old printing press

Type Measurement

Physical measurements:

  • 12 points (p12) is equal to 1 pica (1p).
  • 6 picas (6p) is equal to 1 inch (1").

Why are we working in inches?

Measurements lie

While these fonts have been set to the same size, they don't appear to be the same size:
why,why, why, why, why, why

Elements of Type

In this sketch:

  • Baseline
  • X-height
  • Cap-height
  • Serif
  • Ascender/descender

Serif and Sans

They're best friends

serif & sans

Identifying Type

The serif edition


A humanist, serif typeface

(Times New Roman)

A transitional, serif typeface


A modern, serif typeface

Identifying Type

The sans edition

(Gill Sans)

A humanist, sans-serif typeface


A transitional, sans-serif typeface


A geometric, sans-serif typeface

Identifying Type

The other edition

Slab serif

A slab-serif typeface

(Brush Script)

A script typeface

(Comic Sans)

A graphic typeface

Identifying Type

The meaning(s)

If you had to characterize each of these typefaces, how would you describe them?

I am a typeface that needs characters. Please give me some characters to work with that are clear and define who I am.

I am a typeface that needs characters. Please give me some characters to work with that are clear and define who I am.

I am a typeface that needs characters. Please give me some characters to work with that are clear and define who I am.

Identifying Type

By case, weight, and posture

By case:

  • lowercase
  • small caps

By weight:

  • Normal
  • Bold

By posture:

  • Normal
  • Italics

Any questions?

Typographic Concerns

Legibility vs Readability

In legible type we are looking to be able clearly interpret the type from a distance.

Brisket hamburger leberkas capicola boudin bresaola jerky.

Legibility vs Readability

With readable type we want to be able to comfortably read it for a while.

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish


This is when we adjust the spacing between letters to achieve an optimal balance within a word. Let's take a a look at a kerning game, to demonstrate the practice.

Word Spacing

Why paying attention to spacing matters.

Signage for today's hit music, where the 's' and the 'hit' are very close to one another


What Does It Say?

Why might you identify one of these as the latest news?




Finding Type

Font resources

IAT-102: P02 Layout

How Big in Inches is...

Knowing that the typical printer will print at a resolution of 300 pixels-per-inch, how large could we print a:

  1. A nice, fresh, 3000 pixel wide photo?
  2. A heavily JPG compressed, 3000 pixel wide photo?
  3. An image that was 300 pixels wide, but I scaled up to 3000 pixels in Photoshop?

Digital Measurements Lie (x2)

A high-resolution photo of a porcupine
A low-resolution photo of a porcupine


A spread is a pair of facing pages that occurs when you bind a magazine together. You are making 2 spreads for P02.

An example of a magazine spread

Placeholder Text

You must use the placeholder body text we provide you with. Any important text — such as titles, subtitles, captions, pull-quotes, and folio — should be real and made by you.

A sample magazine page for P02 using the required placeholder text

P02 Don'ts

Please do not:

  • Make ads
  • Use your own body text


It is ultimately up to you how many photos you include in P02.

A number of reindeer napping on a grassy field

Citation Sheet

All materials that are not your own must be cited accordingly as part of your submission.

The citation sheet for P02

Use the Font Luke...

Please remember to show and name the fonts you use in the hierarchy you intend.

MAJOR Headline
(Museo 300)

Subtitle of Awesome

Body copy lorem ipsum dolor set imagine the type possibilities as this continues to flow into the next line... so exciting!

Critique Process

When we are critiquing a visual work, we typically step through the following process:

  1. Describe: What do you see? First impressions?
  2. Analyze: Are the elements as specified by the question/rubric evident?
  3. Evaluate: Is the question or rubric criteria being successfully demonsrated in the work? Why or why not?

Characteristics of Effective Feedback

  • Purposeful
  • Specific
  • Language appropriate
  • Practical & action oriented
  • Timely

Properties of a Sketch

A recap

Sketching Exercise

Find five examples of typography in your day-to-day life (i.e. in ads, signage, websites, etc, that you see). For each example of typography you will sketch out a medium-fidelity sketch to try and re-create the type in your sketchbook. A reminder that medium-fidelity should have more refined and clearer-to-read lines, as we are not sketching to generate lots of ideas. For each sketch, write down next to it:

  • Where the type is from.
  • How you would classify the type; give it your best educated classification.
  • What the type makes you think of or feel.


Your first quiz is to be completed by 10:20am before next week's lecture (May. 31). It will be available on Canvas as of 12:30pm today. Please note:

  • You will have 30 minutes
  • There will be 10 multiple-choice-style questions
  • You have one attempt per question
  • It is to be completed individually
  • It covers all materials upto and including this week

Next up we will discuss composing layouts... er, or laying out compositions?

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Mondays from 8:30-9:30am and Thursdays from 8:30-9:30am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna