IAT-102: 03 Type History

IAT-102: 03 Type History — A slide deck

PSA: Hile'kw

Close All Laptops Please

Only the back two rows may use their laptops.

IAT-102: P01 Icons
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

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

Humanist
(Centaur)

A humanist, serif typeface

Transitional
(Times New Roman)

A transitional, serif typeface

Modern
(Bodoni)

A modern, serif typeface

Identifying Type

The sans edition

Humanist
(Gill Sans)

A humanist, sans-serif typeface

Transitional
(Helvetica)

A transitional, sans-serif typeface

Geometric
(Futura)

A geometric, sans-serif typeface

Identifying Type

The other edition

Slab serif
(Rockwell)

A slab-serif typeface

Script
(Brush Script)

A script typeface

Graphic
(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:

  • ALL CAPS
  • 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.

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

Kerntype

Word Spacing

Why paying attention to spacing matters.

Signage for a 'kids exchange' where the spacing between words makes it look like 'kidsexchange'

Contrast
Contrast
Contrast
Contrast
Contrast
Contrast
Contrast

What Does It Say?

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

Latest
News

LATEST
NEWS

Latest
News

Finding Type

Font resources

IAT-102: P02 Layout

How Big in Inches is...

  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

Spreads

A spread is a pair of facing pages that occurs when you bind a magazine together. You are making 3 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

Photos

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
(Bosque)

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

Properties of a Sketch

A recap

Quiz

Your first quiz is to be completed by 10:20am before next week's lecture (Sept. 26). 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 — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
1/1