Graphic Design - Typography 1

Graphic Design

March 24, 2023

Objective

• Introduce the concept of typography

• Discuss the importance of typography and its many uses in graphic design

• Demonstrate how to combine legibility with creativity when creating
  different designs

3/24

Introduction to
Typography

3/31

Good Typography VS.
Bad Typography

4/7

How to use Adobe
Illustrator

4/14

Typography Project 01

4/21

Project 01 Critique

What is Typography?

Typography is the art and technique of arranging type, type meaning letters and
characters.

Notice that it's about more than just the design of letters and characters; the
arrangement of those letters and characters is just as big a part of it all. That
refers to the selection of point size, line length, and spacing, both on a single
line and throughout an entire page or piece of work.

History of Typography

To understand where the importance of arrangement comes in, I like to think
back to Johannes Gutenberg's printing press. At one point in time, people
practiced typography using printed materials -- meaning they were literally
taking letters and characters and arranging them in physical space.

Today, thanks to computers, open source fonts, and scalable computer
typography, it's a lot easier to arrange letters and characters. But that physical
piece remains important, even in the digital sphere.

The Importance of Typography

Typography is absolutely everywhere. Just look at your phone, a billboard, your
coffee cup, or even the different styles used in this blog post. Every font, letter,
and character arrangement plays a part in determining how a message is
conveyed.

Sure, it might seem trivial at times, but even the smallest of type adjustments
can impact the look and feel of your work.

Typeface

You should use the word
“typeface” when describing the
creative work (i.e., what you see).
This is a more abstract design
term used when referring to the
way a specific collection looks or
feels. For example, Helvetica is a
typeface.

Font

If you’re describing the physical
embodiment of the collection of
letters and characters, you
should use the term “font." It
refers to what you use -- whether
that’s a file on your computer or a
case full of metal letters. This is
the tangible representation of
that collection of letters and
characters. For example,
Helvetica Bold and Helvetica
Light Oblique are fonts.

Anatomy of a
Typeface

Baseline: The line where the
letters sit.

Cap height: The distance from
the baseline to the top of the
capital letter.

X-height: Located in between the
baseline and the cap height, it's
the height of the body of the
lowercase letter. (In this case, it's
the letters ‘a,' ‘u,' and ‘y.')

Anatomy of a
Typeface

Bowl: The curved part of the
character that encloses the
circular or curved parts of some
letters, like 'd,' 'b,' 'o,' 'D,' and 'B.' (In
this case, it's that round shape
sticking off the letter ‘a.')

Serif: The slight projection
finishing off a stroke of a letter in
certain typefaces. (In this case,
it's that little foot sticking off the
letter ‘l.')

Anatomy of a
Typeface

Descender: The longest point on
a letter that falls beyond the
baseline.

Anatomy of a
Typeface

Ligature: The stroke that joins
adjacent letters. (In this case,
you'll notice the 'f' and the 'l'
smush together to form one
character.)

Stem: The base of a letter, similar
to the stem of a flower.

Anatomy of a
Typeface

Spine: The curvy body of the
letter 's' -- and only the letter 's.' It
gets its own term because the
spine can be almost vertical or
mostly horizontal, depending on
the typeface.

Ascender: The portion of a letter
that extends above the mean line
of a font -- i.e., is taller than the
font's x-height. (In this case,
you’ll also notice the letter ‘h’ is
actually taller than the x-height.)

Anatomy of a
Typeface

Cross bar: The bar that goes
across the inside of the letter and
connects one side to another. (In
this case, it's the bar inside the
capital letter 'B.')

Counter: The empty space in the
middle of letters such as ‘B’, ‘O’,
or ‘A.'

Anatomy of a
Typeface

Finial: The tapered end of letters
such as ‘e’ or ‘c.'

Terminal: A type of curve that
you see at the top of the letter ‘f’
or the end of the letter ‘j.'

Spacing of Fonts

Kerning is the modification of the
space between two letters.

Here, I used Franklin Gothic
Medium to showcase the natural
space you see between two letter
T’s. It looks a little too snug,
right? By customizing the
spacing between just these two
letters, you'll be able to increase
readability.

Spacing of Fonts

Tracking is an adjustment to the
spacing between all letters within
an entire word.

For this example, I chose to
make an extreme adjustment to
the tracking. Typically, you’d want
to apply tracking in small
increments to avoid causing
readability issues.

Spacing of Fonts

Remember in high school when
you had to double-space your
essays? Well, the terms
“single-space” and
“double-space” can also be
called leading, which is the
distance between the baselines.

Spacing of Fonts

As you read through this blog
post, you'll notice certain words
stand out more than others.
That's what designers would call
creating a hierarchy. You can use
different weights (bold, regular,
light), styles (italic), and sizes to
create a sense of order within
your text. Not only does this help
create a legible flow, but it helps
the reader see what the most
important points are.

Type Classification

Remember when I pointed out
the little foot in the word
“Faulty?” Typefaces with feet like
that are called serif. You can see
where I highlighted these little
feet.

Common serif typefaces include
Times New Roman. A serif is
much easier to read in long,
printed works due to the
distinctiveness between letters.

Type Classification

In French, the word “sans” means
“without.”, so sans serif literally
means “without serif.” In the
image below, you’ll notice the
words lack serifs.

Common sans serif typefaces
include Arial. Sans serifs are
used in blog posts and
documents on the web because
it feels more modern and looks
great even at lower screen
resolutions.

Type Classification

Blackletter typefaces are known
for its dramatic thick and thin
strokes and its elaborate swirls
on the serifs.

Blackletters are hard to read, so
they're not typically used for body
type. You'll usually see them in
headers, logos, posters, and
signs -- like on newspaper
nameplates, or on the headers of
certificates, diplomas, or
degrees.

Type Classification

Script typefaces are based upon
the varied and often fluid strokes
created by handwriting.

Formal scripts are often
reminiscent of the handwritten
letterforms common in the
seventeenth and eighteenth
centuries, and they’re used for
elegant designs like invitations
and diplomas, not for body copy.
Casual script is everyday
handwriting.

Type Families

The term “type family” or
“typeface family” is all the
variations of one basic typeface.
Sticking to a single type family
will help add variation to your
designs, while keeping it
consistent and uniform.

Designers might use various
fonts within one family to create
a sense of hierarchy.

How to Make Your Own Typeface

• Decide what type of font (or typeface) you’d like to make.

• You can be inspired by your favorite aesthetic to make a typeface that goes with it! Into sci fi movies? Try making a futuristic font. Love wearing vintage clothes? Go for something groovy!

How to Make Your Own Typeface

• Create your document and set up guides

• Adobe Illustrator is the best program to use for font creation because you need to work with vectors. Photoshop and InDesign store information in pixels, which means that any image has the opportunity to lose quality when scaled down or become pixelated when scaled up. Vectors, on the other hand, store information in a series of geometric shapes and points. You can resize a vector to any size and it will never lose quality

Create one artboard for every character you will need to
create. (This will be a long process!) You’ll need a lot if
you want to create accented letters, special characters,
or a full set of symbols; most typefaces you find on
Google Docs or Adobe Typekit have around 1,500
characters.

How to Make Your Own Typeface

• Draw the characters

• There are a lot of options for how to go about this! You can start by drawing rectangles and circles and using the pathfinder tool to create customized shapes for each letter. You can use the pen tool to draw complex letterforms. I like to use the brush tool to “draw” a letter in a handwriting style.

How to Make Your Own Typeface

• Export as .svg files.

• Finished your letterforms? The hardest part is over—this process sometimes takes font-makers months or even years. Go to File > Export for Screens. Make sure you have all of your artboards selected and choose “.svg” as the output file type. No need to resize the boards—this file type retains the vector form, so they can be enlarged or shrunk later without losing quality. Press “export artboards”.

How to Make Your Own Typeface

• Use your font creation software to compress it into a .ttf or .otf file.

• There are many different options for font creation software! Feel free to
  browse the web. Personally, I recommend one called Font Forge. The
  interface is a bit outdated and it’s not the most user-friendly, but its
  website has endless pages of thorough instructions online that will walk you through the process. In this way, it’s really easy for beginners to troubleshoot! (And, better yet, Font Forge is free to download and use.)

How to Make Your Own Typeface

• Export your typeface as a .ttf or .otf file—and then use it yourself!

• At the end of the process, export your typeface design in one of the two common file types—.ttf or .otf. Once this file is created, anyone can install your font you made on their computer.

• Need instructions for downloading? On a mac, double-click any typeface file to open Font Book. Simply click “install.” If you have Windows 10, you can do the same thing, but for more thorough instructions, click here for a full list of ways to install fonts on a PC.

Free Resources for Fonts

• "35 of the Best Free Fonts You Should Download": A HubSpot blog post
  curating 35 of the best free fonts on the internet.

• Google Fonts: Hundreds of free, open-source fonts from Google that are
  already optimized for the web.

• Behance: A great resource for finding beautiful design work, including
  unique fonts that are free to download

• HypeForType: Over 25,000 typography designs from top designers, many
  of which are available to download for free.

If you want to do some more informative reading on the history of typography and the different kinds of typefaces check out this website!

Draw

Draw a letter that has a descender.

Homework

Go to Quizizz and complete the following assignments:

1.Analyze the Typeface

2.Good Font/Bad Font

Homework

Play each of these games at least once to practice building an eye for design:

Kerntype gives you a series of increasingly challenging kerning situations, in which
you have to keep a keen eye on the spatial relationships between letterforms. The game scores
your attempts against an ideal spacing solution, so you can see how even a few nudges in
either direction can make a big impact.

Typewar fast-paced game that tasks you with identifying common typefaces based on a
single sample letterform. It sounds easy, but you’ll quickly see how easy a typographic
curveball can be thrown your way.

Shape Type challenge yourself using Bezier curves to complete the shapes of various glyphs
from a series of typefaces.