Things I Know About Type [Field Guide]

FIELD
GUIDE

HELLO
type 1st

- Things I know about type -

!
by Prakash Nair

Things I’m going to talk about.

– Theory Intro to type
Type personality
Classiﬁcations
– Application Anatomy
Choosing a typeface
Combining typefaces
Typography
Web & Mobile
Designing Type
Tools + Resources

I really love your
personality

Why is this important?
Some of us have been guilty of focusing on
decoration and neglecting the details. I’m
talking about getting back to good, solid
design principles, like well-formed grids and
decent measures and incremental leading and
appropriately paired typefaces.

“
Web design is 95% typography...
Oliver Reichenstein
Information Architect (informationarchitect.jp)

+
This is because the web is content and content is type. Type
is an equal player in design. It doesn’t matter about your
color choices or grid if type becomes an afterthought.

Companies really do care about quality and precision.
Bonus points for an Art Director that cares about quality
and can effectively sell his visual concept.

Typography
is what language
looks like.

+
Most people, including some designers think
typography is about fonts. Typography is more than
that, its expressing language through type choice,
placement, composition.

+
When used improperly most people might not
notice it, but subconsciously they can feel that
something it wrong. If your type is bad the
design fails.

+
The right typeface has the power to grab
your audience on an emotional level.

+
It can have a lot of personality. Think about keywords
during the conceptual/research phase.

Conservative, Strong, Edgy, Exciting, Feminine,
Boring, Informal etc.

+
And each personality should be in relation to
your content. Typography can create or change
context as well. It can elevate a message.

+
Dan Mall (Big Spaceship)
He takes mathematical measurements from
typefaces to design interfaces and UI elements.

+
In this site he designed for Nike, you can see how he
uses the type layout has inﬂuenced the navigation.

Aa Aa
_
Display
_
Text

+
Every typeface has an intended usage. There are two primary
categories of types; display and text. Display goes for a
stronger personality, elaborate and more expressive shapes,
and a more stylish look. Text is designed to be legible at
smaller sizes. Usually implies fairly clean, consistent,
uncomplicated design features. For example the typeface
Chronicle will have Chronicle Regular and Chronicle Display.

Basic Type Classifications

Aa SerifAa Aa
_
Aa
Old Style
_
Transitional
_
Modern
_
Egyptian
Garamond Baskerville Bodoni Clarendon

Aa Sans
+
5 basic classiﬁcations. Important to know as it will help

Aa Aa
you decide which typeface to choose in any project.

Old Style - Emulated classical calligraphy and movement
of the hand. From 1400s.

Serif
_ _ _ Transitional & Modern - More abstract and less organic.
Humanistic Transitional Geometric Modern - Very high contrast in the strokes.
Humanistic Sans - Characterized by presence of the hand.
Gill Sans Helvetica Futura Similar to Roman. Organic.
Transitional Sans - straight in appearance and less width
than Humanistic Sans. Also called “anonymous sans” due
to its plain appearance.
Geometric Sans - Geometric construction suggesting the
use of a compass.

* Notice these are all the same point size, yet some look
bigger in appearance.

This is a Family

Aa
_
Aa
_
Aa
_
Aa
_
Roman Italic Semi-Bold Bold

This is a Super Family*

Aa Aa Aa Aa Aa Aa
Aa Aa Aa Aa Aa Aa
Aa Aa Aa Aa Aa
* But not really.

How to choose
a typeface
1 Choose a category

+
Choose a type face that you think will match your work.
What’s the purpose? Is it a Display face or a text face? Whats
the classiﬁcation? Old Style, Modern, Slab Serif, Sans Serif,
Script, Decorative? Serious look? Casual? Decorative?

How to choose
a typeface
1 Choose a category

2 Consider the medium

+
Where is this being shown? iPad? Web? Print? Are the
delicate serifs going to break if its too small? Is it going
to be legible?

How to choose
a typeface
1 Choose a category


3 How much text?

+
Whats more important?
Readability or aesthetics?

How to choose
a typeface
1 Choose a category


3 How much text?

+
4 Space How much space is required? Two equally
sized fonts can have very different widths.
You should never try to fit and squeeze a
typeface within the medium. The medium
should fit the typeface.

Pairing typefaces

DON’T mix two typefaces from the same family

I’m I’m
pretty. pretty too.
+
There is not enough variation to distinguish the two and
its sort of a pointless design decision.

Pairing typefaces

DON’T mix two typefaces with a strong personality.

I’m Chuck I’m Van fucking
Norris. Damme.

+
Or else the visual language starts to get noisy and chaotic.
Less is more.

Pairing typefaces

DO mix two typefaces with similar proportions.

x x x
+
I like to give each one a diﬀerent role. There should be a
“star of the show” and a hardworking one.

Pairing typefaces

DO mix serif and sans under the same family.

I’m your father.
But, I’m older.

+
Check out the families of types containing serif and sans
under the same name: This is Fedra Sans and Fedra serif.
The only problem: most of these types are actually rooted
in a consensus, they are not expressing much. It's cool for
a bank report or an informative brochure, but might be
weak for a magazine.

How people read

Understanding how people read will help you
in making better decisions when setting type.
If a typeface is hard to read, the meaning of
the text will be lost.

Legibility Can you read it?

+
Legibility is “can you read it?”
Legibility refers to a reader’s ability to easily re-
cognize letterforms and the word forms built from
them. We don’t read by recognizing one letter at a
time, but by recognizing the shapes of whole words
and phrases.

Readability Do you want to read it?

+
Readability asks “do you want to read it?”
Readability is about the comfort with which text can
be understood. Text with good readability must also
be legible, but more legibility doesn’t make text
readable.

I got a dig bick.

You that read wrong.
+
People skim very quickly from one word to
the next. So any kind of hindrance will affect
your reading. They don’t want to be blown
away from the beautiful typeface. They want
You read that wrong too. to connect to the words on an emotional level.

times. Look at me read this super quickly. I never knew I had such sup

+
We use peripheral vision to decode whats coming up
next. We read ahead about 15 letters at a time, but only
get the meaning of that part of the span. Reading music
is similar to reading text.

ERSE. RIGHT THIS IS TAKING A WHILE TO READ. WHY ARE YOU SHOU

+
Uppercase is much harder to read since the letter are all
the same height and so we don’t recognize the characters
as quickly.

Eevn touhgh the wrosd are srcmaelbd, cahnecs are taht you can
raed tihs praagarph aynawy. The order of the ltteers in each word
is not vrey ipmrotnat. But the frsit and lsat ltteer msut be in the
rhgit psotitoin. The ohter ltetres can be all mxeid up and you can
sitll raed whtiuot a lot of porbelms. This is bceusae radenig is all
aobut atciniptanig the nxet word.

+
Most of you can read this! Fairly quick. You anticipate
what’s coming up next. The more previous knowledge
you have, the easier it is to interpret.

It will be colder.

+
Here I’m covering the upper half of the word.
What the hell is it?

It will be colder.

+
Here the bottom half is covered. But you can read it.
That’s because most of the information which deﬁnes
a character is contained in the upper half.

k erning
+
Kerning is the space in between two characters. Usually,
the larger the type, the tighter it needs to be kerned.

Optical kerning is set by the program and metric kerning
is set by the designer of the typeface. There’s no right
way. Kerning also needs to be adjusted if you are using
a shitty typeface.

tracking
+
Also called letter spacing, tracking is the space between
the characters. It’s an overall percentage across the
board, whereas kerning is between two characters.

I read ok but I sure could use a little bit more breathing room.

I read perfect. Boy is it good to achieve perfection, its what dreams are made of.

S h i t I g o t way o u t o f c o n t ro l . I i m m e d i a t e l y re g re t t h i s d e c i s i o n !

+
Adjust tracking accordingly to achieve readability.
Capital letters prefer a little distance from their
neighbors. Loosely space italics will looked weird since
italics are meant to be placed closely together.

If I get any bigger I will deﬁnitely need more
breathing room. Not only sideways but also above
and below.

I’m much much bigger now.
Good thing I have more
breathing room. I hope its easier
for you to understand me know.

+
Linespacing is also called leading. When the type-size
gets bigger, more leading is needed. Also the wider the
width of the sentence, the more leading is needed.

+
Another principle to think about is the width of your
copy. Notice the insanely long paragraph width here. I
don’t wanna read this! It's tiring for your eyes to follow
back and forth. Thats one way you develop fatigue.

+
This is much better. Keep the width of your paragraph
under 10 words (45-75 characters.) For multiple columns,
keep it between 40-50.

Hier
Creating
arc hy

+
Hierarchy is simply the way of organizing elements.
A typographic hierarchy organizes the content,
emphasizing some elements and de-emphasizing
others. Everything on the page cannot be important!

A visual hierarchy helps readers scan a text,
knowing where to enter and exit. It gives your
designs a ﬂow.

I. Things to Buy Things to Buy
a. Avocado Avocado
b. Salsa (spicy) Salsa (spicy)
c. Milk Milk
d. Paper Towels Paper Towels

THINGS Avocado THINGS TO BUY
TO BUY Salsa (spicy) Avocado
Milk Salsa (spicy)
Paper Towels Milk
Paper Towels

+
Emphasizing a word or phrase within a body of text usually
requires only one signal. Italic is the standard form of
emphasis. There's also boldface, small caps, or a change
in color. There are endless ways to create emphasis.

THINGS TO BUY
AVOCADO
SALSA (SPICY)
MILK
PAPER TOWELS

+
So fucking wrong!

[-]Space

+
Every design has whitespace (negative space), but
the problem is that not every design has enough.
Its a very under-utilized element. For those who
don’t understand what whitespace is, the following
slide will give you an idea of what whitespace is.

+
Let your type breathe. Whitespace is simply the empty
space between and around the elements of a design or
page layout. Whitespace is made of nothing, but shouldn’t
be treated that way. Being generous with your whitespace
will speak volumes about your brand. By using large
amounts of it, you’re saying that your content is far more
important than the screen real estate that it rests on.

Type on mobile

Reading from a digital screen is about 25%
slower than from paper so greater care must be
placed when designing for screen to improve
reading. Here are some guidelines…

Large x-height

Aa Aa
+
The x-height should be at least 2/3 the height of the
capital letter. The bigger the counters, the more
legible the characters get.

Ample stroke contrast

Aa Aa
+
This means the font should not be too thin or too
heavy, but somewhere in between. The thin strokes
will break at lower sizes.

Not too narrow

MY COUNTERS ARE TINY

+
These typefaces may look great in print or on the
web when displayed in large, but they will be hard
to read when rendered so much smaller on a mobile
screen. Notice you can barely see the counters as is.

Don’t get fancy

I’ f 

+
Decorative fonts tend to break the above three rules

Distinctions

I wanna be different like
everyone else.

+
Obvious weight and style difference between
normal, bold and italic iterations. This creates
the best contrast.

My Nine Rules On Setting Type

01

Select the face.

+
Select a typeface appropriate for the subject matter
and consider the medium.


01 02

Select the face. Grid it.

+
Create a grid for the page/document.


01 02 03

Select the face. Grid it. Group it.

+
Study the copy and group similar information.


01 02 03


04

Size matters.

+
Next comes contrast which can be achieved
through sizing.


01 02 03


04 05

Size matters. Color.

+
Color is also part of hierarchy. Color referring to
the visual tone of a mass of text rather than color
in the RGB sense.


01 02 03


04 05 06

Size matters. Color. Align it.

+
Next comes aligning the info based on the grid.
There are endless varieties of possibilities here and
I spend most of my time designing this.


01 02 03


04 05 06


07

Adjust leading.

+
To achieve readability, I adjust the leading.
99% of the time, its never right by default.


01 02 03


04 05 06


07 08

Adjust leading. Adjust kerning.

+
Adjust the kerning if needed.


01 02 03


04 05 06


07 08 09

Adjust leading. Adjust kerning. Read it!

+
Finally, look back and read it. Or give it to someone
to read and see if they hiccup.

Court forms Assistance Services; Bankruptcy,
Immigration, Evictions, Foreclosure, Divorce, Child
Support, All Civil Matters.
Office: 14536 Roscoe Blvd. Ste #215, Panorama City, CA 91402

Going through a Divorce, Child Custody, Child Support, Modification,
Paternity? We could help you, and not break your budget! Call us, we
could work with you!
Take action today, tomorrow may be too late!!! Hablamos Español!!!

Affordable Paralegal Services, don't lose your home!!! I
can help!!! I help you with:
Bankruptcy chapter 7 and chapter 13
Evictions for Landlords and for Tenants
Small Claims for all civil matters
Patty Perez

818-331-4950

http://www.sfvparalegal.com
NOTICES:
The above information is provided for informational purposes only and is
intended to be used as a guide prior to consultation with an attorney
familiar with your specific legal situation. We are not engaged in
rendering legal advice, and this add is not a substitute for the advice of an
attorney. If you require legal advice, you should seek the services of an

01 Select the face.
-
02 Grid it.
-
03 Group it.
-
04 Size matters.
-
Dear Sarah,
05 Color it.
-
06 Align it.
-
07 Adjust leading.
-
08 Adjust kerning.
-
09 Read it!

01 Select the face.
-
02 Grid it.
-
03 Group it.
-
04 Size matters.
-
Dear Sarah,
05 Color it.
-
06 Align it.
-
07 Adjust leading.
- Dear John,
08 Adjust kerning.
-
09 Read it!

01 Select the face.
-
02 Grid it.
-
03 Group it.
-
04 Size matters.
-
05 Color it.
-
06 Align it.
-
07 Adjust leading.
-
08 Adjust kerning.
-
09 Read it!

01 Select the face.
Going through a Divorce, Child Custody, Child Support,
- Modification, Paternity? We could help you, and not
Court forms Assistance break your budget! Call us, we could work with you!
02 Grid it. Services; Bankruptcy,
Immigration, Evictions,
Take action today, tomorrow may be too late!!! Hablamos
Español!!!
Foreclosure, Divorce, Child
- Support, All Civil Matters.
Affordable Paralegal Services, don't lose your home!!! I
03 Group it. can help!!! I help you with:
Bankruptcy chapter 7 and chapter 13
- Evictions for Landlords and for Tenants
04 Size matters.
Office: 14536 Roscoe Blvd.
- Ste #215, Panorama City,
CA 91402
05 Color it.
- NOTICES: Patty Perez

06 Align it. The above information is provided for informational purposes
only and is intended to be used as a guide prior to consultation 818-331-4950
with an attorney familiar with your specific legal situation. We are
- not engaged in rendering legal advice, and this add is not a http://www.sfvparalegal.com
substitute for the advice of an attorney. If you require legal
07 Adjust leading. advice, you should seek the services of an attorney. or we can
provide you with one. I am not an attorney. I can only provide
self help services at your specific direction.
-
08 Adjust kerning.
-
09 Read it!

Pa Perez
Affordable Paralegal Services

01 Select the face.
Going through a Divorce, Child
- Custody, Child Support,
Court forms Assistance
02 Grid it. Services; Bankruptcy, Modification, Paternity? We could help
Immigration, Evictions, you, and not break your budget. Call us, we
could work with you.

03 Group it. Hablamos Español

- Affordable Paralegal Services, don't lose your home!!! I
04 Size matters. Bankruptcy chapter 7 and chapter 13
Office: 14536 Roscoe Blvd.
CA 91402

Patty Perez
05 Color it.
818-331-4950
- http://www.sfvparalegal.com

06 Align it. NOTICES:
intended to be used as a guide prior to consultation with an attorney familiar
- with your specific legal situation. We are not engaged in rendering legal
advice, and this add is not a substitute for the advice of an attorney. If you
require legal advice, you should seek the services of an attorney. or we can
07 Adjust leading. provide you with one. I am not an attorney. I can only provide self help
services at your specific direction.

-
08 Adjust kerning.
-
09 Read it!

Pa Perez

01 Select the face.
Going through a Divorce, Child
- Custody, Child Support,
Court forms Assistance
02 Grid it. Services; Bankruptcy, Modification, Paternity? We could help
Immigration, Evictions, you, and not break your budget. Call us, we
could work with you.

03 Group it. Hablamos Español

- Affordable Paralegal Services, don't lose your home!!! I
04 Size matters. Bankruptcy chapter 7 and chapter 13
Office: 14536 Roscoe Blvd. Small Claims for all civil matters
CA 91402
Patty Perez
05 Color it.
818-331-4950
- http://www.sfvparalegal.com

06 Align it. NOTICES:
intended to be used as a guide prior to consultation with an attorney familiar
- with your specific legal situation. We are not engaged in rendering legal
advice, and this add is not a substitute for the advice of an attorney. If you
require legal advice, you should seek the services of an attorney. or we can
07 Adjust leading. provide you with one. I am not an attorney. I can only provide self help

-
08 Adjust kerning.
-
09 Read it!

Pa Perez
01 Select the face.
-
02 Grid it. Going through a Divorce, Child Custody,
Child Support, Modiﬁcation, Paternity?
-
We could help you, and not break your budget.
03 Group it. Call us, we could work with you. SERVICES
Court Forms Assistance
Bankruptcy
- Immigration
Evictions
Foreclosure
04 Size matters. Divorce
Child Support
CONTACT
All Civil Matters
- (818) 331 4950 (Hablamos Español) Bankruptcy
Evictions
14536 Roscoe Blvd. Ste #215, Panorama City, CA 91402
Small Claims
05 Color it.
-
06 Align it.
sfvparalegal.com
-
07 Adjust leading. The above information is provided for informational purposes only and is intended to be used as a guide prior to
consultation with an attorney familiar with your speciﬁc legal situation. We are not engaged in rendering legal
- advice, and this add is not a substitute for the advice of an attorney. If you require legal advice, you should seek
the services of an attorney. or we can provide you with one. I am not an attorney. I can only provide self help
08 Adjust kerning.
-
09 Read it!

Pa Perez

01 Select the face.
-
02 Grid it. Going through a Divorce, Child Custody,
Child Support, Modification, Paternity?
-
We could help you, and not break your budget. SERVICES
03 Group it. Call us, we could work with you. Court Forms Assistance
Bankruptcy
- Immigration
Evictions
04 Size matters. Foreclosure
CONTACT Divorce
- (818) 331 4950 (Hablamos Español) Child Support
All Civil Matters
05 Color it. 14536 Roscoe Blvd. Ste #215, Panorama City, CA 91402 Bankruptcy
Evictions
- Small Claims

06 Align it.
sfvparalegal.com
-
07 Adjust leading. The above information is provided for informational purposes only and is intended to be used as a guide prior to

- consultation with an attorney familiar with your specific legal situation. We are not engaged in rendering legal
advice, and this add is not a substitute for the advice of an attorney. If you require legal advice, you should seek
the services of an attorney. or we can provide you with one. I am not an attorney. I can only provide self help
08 Adjust kerning. services at your specific direction.

-
09 Read it!

I love lamp
CAP HEIGHT

x - HEIGHT

BASELINE

+
These three characteristics sets the rule for any
typeface. Think of it as the Document Size/Settings
under a program.

CAP HEIGHT

x - HEIGHT

BASELINE

Counter

+
For small texts, the counters are usually huge so
there is more whitespace, which means a better
reading experience.

Ascender

CAP HEIGHT

x - HEIGHT

BASELINE

Counter

+
Ascender is a lowercase character stroke which extends
above the x-height

TERMINAL

Ascender

CAP HEIGHT

x - HEIGHT

BASELINE

Counter

+
Terminals are the shape in which a stroke ends.

TERMINAL

Ascender

CAP HEIGHT

x - HEIGHT

BASELINE

Counter

+
Terminals come in all shapes. These shapes depend on
the type classiﬁcation.

TERMINAL

Ascender

CAP HEIGHT

x - HEIGHT

BASELINE

Serif
Counter

+
Serifs are the feet at the ends of some of the strokes.

TERMINAL

Ascender

CAP HEIGHT

x - HEIGHT

BASELINE

Serif
Counter
Bowl

+
Bowls are the curved stroke which surrounds a counter.

TERMINAL

Ascender

CAP HEIGHT

x - HEIGHT

BASELINE

Serif
Counter Descender
Bowl

+
Descender is a lowercase character stroke which extends
below the x-height

fi ﬁ →

ﬀ fl ﬅ ﬆ
+
A ligature are two characters joined as a single glyph.
They are created for special circumstances to prevent
overlapping between the two characters.

+
Theres a lot of optical tricks you have to use in type
design. To optically align all characters on a line, they
cannot not have exactly the same mathematical height.
For example the triangle on this drawing has to be higher
than the rectangle. Otherwise, the triangle will look
smaller than the rectangle. While creating a typeface,
you want all the letters to appear to have the same height.

+
When draw a curve think of riding a car down a curve.
It must be graceful.

+
The characters on the top line have a diﬀerent construct-
ion than the characters on the bottom line. The contrast
is caused by changing the pressure on the pen, not
because of the form of the pen. From this perspective
there is no diﬀerence between Bodoni and Helvetica.
Both have the same construction, only the contrast varies.

+
Much more important than the shapes of the characters, is the
rhythm of the type. A typeface with beautiful characters which are
badly spaced is extremely hard to read. However, if the shapes of
the letters are not that good, but when they are all perfectly spaced,
the type will be fairly easy to read. The white spaces inside and in
between letters are deﬁning the rhythm much more than the black
shapes of the letters.

+
Which x-height to define? Which descender depth?
Defining these proportions are essential, and very
strongly connected to the purpose of the type.
The proportions within a certain typeface influence
the way your type will work & look.

+
If you make a light weight and the black weight of one
typeface, you'll have to make sure that the black weight
has a bigger x-height than the light weight (top line
drawing). If this is not the case, the black weight will
look optically too small when it's combined with the light
weight in a line of text. In display faces this is not the
case. The diﬀerence should be much smaller.

+
Too many points (nodes) can cause technical problems -
e.g. the printer can't print the font anymore. It also makes
it much harder to control the shapes of a character.
Controlling a curve with 2 points is much easier than
12 points.

www. Tools Software
Typophile What The Font? Font Explorer X
(Font Management)
I Love Typography Tools and
Kern me (the kerning game)
FontLab
(Type Design)
Typography Served
Resources
Shape type (type design game)
Liveview
Thinking with Type
Font Finder
(Browser Extension)

Books Video
Stop Stealing Sheep Jason Santa Maria on
& Find Out How Type Web Typography
Works
by Erik Spiekermann
Helvetica
The Elements of (Documentary)
Typographic Style
by Robert Bringhurst

Things I Know About Type [Field Guide]

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (18)

Similaire à Things I Know About Type [Field Guide]

Similaire à Things I Know About Type [Field Guide] (20)

Dernier

Dernier (20)

Things I Know About Type [Field Guide]