What the Font?

What the Font?

A quick & helpful guide for
professional typography usage
{for emerging graphic designers, solopreneurs, and
small businesses}
BROUGHT TO YOU BY:
creative studio
dezinegirl
lifestyl bran desig
Whats the
difference? FONT vs TYPEFACE
There's a general acceptance of the terms
font and typeface can be used
interchangeably, even among typography
professionals and graphic designers. But
what is the diference you should know?
page one
FONT
TYPEFACE
Technically speaking, way back in the old days of
analog printing, blocks of letters were used to
create bodies of text.
A font was used to describe a subset of blocks in a
certain family typeface, such as Helvetica or Arialbut
each font could be a diferent size or weight.
N E WS Helvetica, Arial
page two
page three
As you are aware, fonts are no longer thousands
of tiny blocks of movable letters; they have
become digital computer les that you can
manipulate however you wish. We likey!
Font or typeface? We say
toh-may-toh, you say toh-mah-tah.
page four
Whats
a serif?
KNOW YOUR TYPEFACES
Typefaces have their own personality.
Choosing a typeface is similar to
choosing a photo or color: you need
to determine what kind of ideas or
emotions you want to provoke, what
your message is, and who your target
audience is.
To help you with that, here is the
breakdown of common typefaces
and their characteristics on the next
four pages:
page ve
A
A
Serifs have tiny feet at the ends of the letterforms; small
lines tailing from the edges.
Serif fonts are mainly used in print materials such as
magazines, books, and legal documents because they are
easier to read in galleys, and less likely to cause eye fatigue.
serif
DESCRIPTIVE KEY WORDS: reliable, corporate, respectiable, formal, traditional, comfort,
impressive, classy, timeless, conservative, safe, established
San Serifs do not have the feet at the ends of the
letterforms; they are without serifs.
These fonts have become widely popular on the web since
you are reading pixels, not printed text; and Sans Serif is
easier on the eyes at that size. Designers also favor them
for print with their versatility and clean style.
sans serif
DESCRIPTIVE KEY WORDS: modern, informal, youthful, friendly, stable, clean, neutral,
playful, universal, happy, fresh
page six
A
The stepsister of the Serif is the Slab Serif. With its chunky
feet, and thick, block-like lines, the Slab Serif adds a
modern or strong style to headlines, displays, logos or
names of products.
Its a high-contrast, horizontally-biased typestyle not only
very legible, but also produces well-dened lines of text.
slab serif
DESCRIPTIVE KEY WORDS: friendly, playful, modern, bold, solid, strong, confrmed, fresh
page seven
A
Script typefaces are derived from the uid and varied
stroke originally created by handwriting, and it can be
categorized as formal cursive writing or a looser, more
casual writing.
The formal style can be found in headings on wedding
invitations, certicates, and diplomasanything that
needs an ofcal look. Whereas the casual style can be
seen just about anywheregreeting cards, logos,
captions, or websites as a design element.
script
DESCRIPTIVE KEY WORDS FOR FORMAL STYLE : elegant, affectionate, feminine, offcial
DESCRIPTIVE KEY WORDS FOR CASUAL STYLE : relaxed, personal, unique, playful, creative
page eight
A
The name pretty much sums it up. Display faces were
created to be shown at large "display" sizes (typically 36
points or larger) like a major headline, or on a book cover.
Most people associate this face as decorative type, but not
necessarily so. Basic Serif or Sans Serif fonts at larger sizes
can be labeled as display. Just like script typefaces, these
are never used in galleys of text.
display
DESCRIPTIVE KEY WORDS: visually driven, informal, custom, friendly, expressive,
a plethora of emotions
So, who shot the Serif?
{good ol humor of designers}
page nine
CHOOSE YOUR
TYPEFACES WISELY
How do I decide?
The typeface[s] that you choose will
have an impact on your readers,
whether in emails, resumes, brochures,
menus, logos, or websites. With this
knowledge, success is near.
page ten
Readers may not even realize that they
react psychologically to the appearance
of a text. The wrong font could cause the
opposite reaction than intended.
page eleven
Design a visual hierarchy so viewers can easily scan your
content; ie headline, subhead, body text, callouts, quotes, etc.
The use of type is a very important tool to create a visual
hierarchy, whether its the size, color, weight, or placement.
THIS IS A HEADLINE
This is a subhead - usually in bold or italics, several
point sizes smaller than the headline.
This is body text, typically a diferent font than the headline, and
sometimes the subhead. The most legible size is about pts.
page twelve
Be careful to not mix fonts
of the same family, variant
or style at the same level
of your hierarchy. Each
level should be specic
and unique.
Aim for adequate contrast in typefaces. If they look similar, even
at diferent levels, they could come across as confusing and
unclear in presentation. Combine Serifs and Sans Serif, or
diferent weights and styles of one kind of typeface.
page thirteen
Focus on readability and legibility: use
accurate point sizes, leading, kerning
and tracking.
Too small of a point size will be
unreadable, especially in print. Bad
leading, kerning and tracking can ruin
an otherwise stellar piece of copy. Its all
about balance.
Rule of thumb: good typography
is subtle, yet stylish.
page fteen
SOURCES
http://www.designmantic.com/blog/infographics/ten-commandments-of-typography/
http://blog.crazyegg.com/2013/07/05/psychology-of-fonts-infographic/
http://www.coolinfographics.com/blog/2010/4/30/what-font-do-i-use-a-typeface-decision-owchart.html
http://designinstruct.com/roundups/10-infographics-that-will-teach-you-about-typography/
http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15
http://www.psychologytoday.com/blog/impulse/201404/the-hidden-power-the-font
http://degreed.com/blog/psychology-fonts/
http://blog.templatemonster.com/2012/05/16/font-psychology/
http://www.fastcodesign.com/3028971/whats-the-diference-between-a-font-and-a-typeface
http://visual.ly/serif-vs-sans-nal-battle
http://www.webdesignerdepot.com/2013/09/perfect-web-typography-with-slab-serifs/
http://en.wikipedia.org/wiki/Script_typeface
BROUGHT TO YOU BY:
creative studio
dezinegirl
lifestyl bran desig
DEZINEGIRLCREATIVE.COM