LESSON 3.2
INTRODUCTION TO TYPOGRAPHY
DURATION 2-3 LESSONS
Pre-homework:
Watch this video about typefaces, fonts and the anatomy of type. There are a number of concepts introduced here. (We will discuss them in further detail in class)
Once you have viewed the video go and take 10 photos of different type treatments. Consider the way type is used on food labels, in novels, or on signs. Pay particular attention to the way in which different fonts are used together. Upload your 10 photos to your blog.
Typography is everywhere. Good typography, like good design, should be almost invisible, used to convey and organize information. In this series of lessons, we look at what typography is, and why it matters. We talk about legibility, how we process words, and look at some popular typefaces. We address typography in logo design and follow this up with an activity that focuses our attention on the nuances of various typefaces.
Blog Entry 3.2: The Categories of Fonts
Typography is an important part of branding and logo design. We will be exploring the impact that typography has on a brand based on a number of factors including legibility, style, and the anatomy of type. The first task in this assignment is to learn about the different categories of fonts and explore examples of each. The typography video you watched for pre-homework outlines a number of font types. The following activity will help you remember the important elements from the video.
Create a new blog entry called Intro to Type. Organize it using the typography category.
-
List the common types of fonts listed in the video (hint: An example could be serif). Explain what makes each category of font unique. (Use your own words. E.g. Serif fonts have little feet. These are helpful for making words easier to read.)
-
Explain (in your own words) what wordshape is and what it has to do with how we read paragraphs. Explain why typography matters, within this context.
-
List and define the 4 terms that were explained in the video (hint: one term was hierarchy).
-
Upload your 10 photos.
-
Review the 10 photos you took, noticing the varieties you found. Select one of your photos (the one you like the most) and describe the font in detail. Explain what you like about this font.
TYPEFACES AND FONTS
Topics Covered
-
Anatomy of type
-
Classifications of type
-
Reading shapes
-
typeface / font
-
serif / sans serif
-
ligatures / glyphs
-
kerning, tracking, leading
Lessons & Activities
-
Logo of letters / iM logo
-
Word play trials
-
Word play final
-
Self portrait / playing card
-
Negative space activity
Documents / Links / Activities
-
Game: Shape Type
-
Game: K ern Me
-
Fun: Comic Sans Criminal
-
Fun fact: ‘Cmabrigde Uinervtisy‘
-
link to typography video
-
another type video
-
link to typography Prezi
-
All about Arial
Although the terms font and typeface are often used interchangeably, there is a difference.
Typeface refers to the family of fonts, which all share the same name. Caslon, Arial, Helvetica are all examples of typefaces.
Font refers to the specific cut of that typeface. Arial Regular, Arial Black, bold, or italic are all examples of fonts within the Arial typeface.
CATEGORIES
Ff
This is a serif font. Or actually...
this is a serif font. The difference is the little lines or feet at the ends of some of the strokes. These small decorations make it easier to read words.
Novels, magazines and most paragraphs in print are set in a serif font for that reason. Serif fonts are considered more traditional.
f
Ff
Slab serif
There is some variety in this category. Serif, slab serif, semi-serif are sub-categories with their own unique style. Note the lack of a thick-to-thin transition on slab serifs.
Ff
Semi-serif
Semi-serifs are somewhere in the middle. They have a touch of tradition with a modern aesthetic.
Ff
Some fonts do not have these decorations. Sans, the French word for without is used to differentiate these two distinct categories of font. Sans serif fonts are usually considered more modern. Websites, and digital media tend to use sans-serif typefaces, because they are easier to read on-screen.
f
Ff
Display fonts. Oh, you fancy huh?
Display fonts come in all shapes and sizes and have lots of personality. They're great as titles and headers, but not for more than a few words.
Ff
Handwritten, or script fonts are meant to look like hand-written lettering. This can include calligraphy and graffiti style typefaces, too.
word shape
In addition to reading words, humans read wordshape and your ability to effectively distinguish words by their shape affects legibility. #tracking #kerning #speedreading #leading
poor kerning
Tracking and kerning affect the space between characters.
Tracking affects all the letters
Kerning affects the space between single characters
Line spacing, called leading allows breathing room between lines so that ascenders and descenders do not interfere with each other. This allows for easier reading.
Tight leading (i.e. ascenders interfering with descenders) can affect how well we can pre-read words by their shape, slowing down our processing speed.
a a a a a a a
A character is the smallest part of language that has its own meaning. How many a's are in the word Canada? Three. It doesn't matter how you draw them. There are always three of them. We represent these abstract ideas (letters, like the letter a) by drawing a character.
Pretty much all letters are characters, but not all characters are letters. Numbers and punctutation are characters too. In the image on the left, the letter is a. In the image we see 7 characters, all them a lower case a. They are, however, drawn differently. Some are two-storey letters. Some are one-story. Some are thicker, rounder, etc. We refer to these different sets of drawing instructions as glyphs.
ff fi fl ffl
Sometimes certain character combinations get changed out for a different glyph because of the way the letters interact. The new character is called a ligature and is a combination of the two original glyphs.
FONT ANATOMY
