3 Things: Typography

TypographyThe girl / guy you ignored in high school

(AND IS NOW SUCCESSFUL AND AMAZING)

I ’M CONNARY FAGEN

I’ve been a designer since 2007.and I run a small type foundry in my free time.

WHAT’S WITH THE TITLE?

Typography is everywhereand it’s important to businesses, agencies,

entrepreneurs, startups, giant evil syndicates,bakeries and garage bands.

And you may not have noticedhow awesome it is.

IN OTHER WORDS

Typography says as much about you as the words themselves.

Your choice of typeface can greatlyaffect the way your brand is perceived.

1 2KNOW THE BASICS LOOK AT THE DETAILS

3USE TYPE RESPONSIBLY

1KNOW THE BASICS

YOU GOTTA WALK

BEFORE YOU CAN

CRAWL.

(REVERSE THAT.)

x-height

ascender

descender

cap height

ANATOMY OF A LETTER

There’s more to it than what’s shown above, but knowing these basics can help youdescribe and identify fonts and understand how they are built.

L O O S E

TIGHT

TRACKINGThe space between every letter.

KERNINGThe space between specific pairs of letters. It is

V ERY IMP ORT ANT

AV

AV

GOOD

BAD

AV

AV

GOOD

BAD

LEADINGPronounced “ledding”, this is the space between every line of

text. In the days of hand typesetting, strips of lead were placed between lines of text - hence the name.

It’s also sometimes called line height, and increasing it can help the readability of text.

But

don’t add

too much.

Sans Serif

Serif

Serif“Serifs” refer to the small lines attached to each letter.

Serif fonts are commonly used in printed material.They’re considered easier to read for longer passages

and at small sizes.

SerifOld Style

Garamond

Modern

Didot

Transitional

Georgia

Slab Serif

Clarendon

Sans Serif

Sans-serifs are called this because serifs are not present. (“sans” means “without” in French)

Sans-serifs are commonly used on the web because the simple shapes render cleanly on the screen.

Sans Serif

Grotesque

Akzidenz

Humanist

Myriad

Neo-grotesque

Helvetica

Geometric

Futura

“Handwriting” fonts are tricky. While there are some great ones out there, many of them do not emulate the nuances

of real handwriting very well.

Use sparingly - you’re probably not fooling anyone.

Handwriting

monospaceIn a monospace typeface, each letter takes up the same

amount of space, and has an equal amount of space between each letter.

These fonts are often used in coding because it lines up easily and looks good without kerning.

vs.

proportional

Oblique letters are normal letters that have been skewed to an angle, usually between 6° and 12°.

Italics are separately drawn glyphs influenced by cursive lettering,and are often distinct from their regular forms.

Oblique

Italic

v w k n x f

v w k n x f

A LITTLE BEHIND THE SCENES

SO YOU KNOW WHAT YOU’RE

PAYING FOR WHEN YOU BUY A FONT

2LOOK AT THE DETAILS

After sketching letterform concepts on paper, type production begins in a vector editing program.

Vector design is a highly accurate method of drawing that uses points and curves to create shapes.

Type designers often begin by creating a lowercase “n”.

n

You can use the letter’s shapes to build more glyphs efficiently.

nm

h u

nm

bd u i jh

Once a few shapes have been drawn, several details come into focus.

Ink traps are small notches built into letters that allow wet ink to fill in gaps. Without them, small lettering can be difficult to read after printing.

Ink traps are still useful for typography on the web; low-resolution computer screens act similarly to ink and often bleed shapes together.

xoxoOvershoot is the part of curved letters that extend above the x-height. Because of the way our eyes work, letters like “o” and “e” need to be a little bigger to appear equal in size.

Ampersands can be created by merging the letters “E” and “t”, then smoothing out and embellishing the glyph. (“Et” means “and” in Latin.) Sometimes they take a different form altogether.

&&&

Mathematical symbols, copyright marks, currencies and punctuation aids are also commonly expected.

Ligatures, fractions and other charactersround out the typeface and add versatility.

∆ Ω √ © π £ § ¶ ª ™

fb fh ff fj fk fi fl 1/2 † *

a ã å â á à ă ā ä ą æOnce the basic alphabet is built,

extended language support is often added.

After a single weight has been created, thicker and thinner weights must be drawn, plus italics or obliques for every weight. Font families often have

between 3 to 6 weights, but there’s no limit.

plus italics

light regular bold black

Many designers will choose to produce Cyrillic and Greek alphabets. Some will design technically challenging scripts like Arabic and Hebrew. Doing so addresses under-served

users and adds international versatility to the font.

Привет!

There’s often a great deal of functionality in fonts that you may not have even noticed was there!

HOW TO USE TYPOGRAPHY AND

WHAT IT SAYS ABOUT YOUR BRAND

3USE TYPE RESPONSIBLY

SOME

PRACTICALCONSIDERATIONS

V ERY IMP ORT ANTREMEMBER KERNING?

VERY

IMPORTANT

Bad kerning will cheapen your designno matter how good the rest of it is.

A well-designed font should already be kerned properly, so the designer should not have to mess with it too much. However, many free fonts have poor or incomplete kerning, and even with quality fonts, designers should keep an eye out for badly kerned pairs.

It’s also important to be aware of font licensing. (Cue dramatic music.)

Fonts are software, which means you need a license for every computer the font is installed on.

One can usually buy these types of licenses together at a discount.

These are nitpicky details, but it’s worth avoiding later embarrassment and fees.

If you’re a designer, that means the client may need their own license. (More dramatic music.)

Using a font on the web or in an app requires a separate license than using a font in print.

CHOOSING THE

RIGHT FONTFOR THE JOB

commonly have a tall x-height and less idiosyncratic letterforms. Text fonts trade flashiness for simple elegance, employing simpler shapes that render well at small sizes. They’re easy to read at small sizes and in long copy, making them great for books and UIs.

Text Fonts

are dramatic, expressive fonts meant for small amounts of text, like logos and headlines. They generally don’t work well for longer copy, as the distinctive letterforms, high contrast, or short x-height can force the reader’s eyes work harder.

DisplayFonts

Consider the context your typography is going to be seen in.

To a driver passing by at 70 MPH, there’s too much content at too small a size to take in.

This billboard solves the problem by using strong, legible typography, simple visuals, and a very brief message.

WHAT YOUR FONT CHOICES

SAY ABOUTYOUR BRAND

When you look at these two AT&T wordmarks, what do they say to you? What is your first-glance judgement of the

company they represent?

(There’s no right answer – this is pretty subjective.)

• Strong• Authoritative• Intimidating• Trustworthy

• Friendly• Attempting to be current• Casual

Here’s what see:

• Strong• Authoritative• Intimidating• Trustworthy

• Friendly• Attempting to be current• Casual

Here’s what see:

The point is, people are judging you at first glance – accurately or not.Your choice in typography should represent your values.

When choosing a font for a project, it’s worth considering the advice of designer Massimo Vignelli:

We use too many typefaces.

To use less is more difficultthan using too much. Pick one or two font families and stick with them across your entire brand. Use them on your cards, your website and your packaging. The consistency will pay off.

Fonts can resonate emotionally with viewers, and often have a surprising history behind them. When you use a popular typeface, consider that there may be preconceived notions about the font, or it may have been used famously in the past. That’s not to dissuade you, but to ensure you’re informed.

helvetica!

To effectively speak to your audience, look beyond the fonts that come with your computer. Try doing something unexpected.

This logo, for a German legal firm, avoids both common pitfalls of “friendly lowercase” and “stuffy corporate” stereotypes.

The custom monogram feels somewhere in between a signature and a wordmark; warm, trustworthy, and visually appealing. It can be easily read at very small and very large sizes.

Websites like Creative Market, YouWorkForThem and MyFonts are great resources for discovering and purchasing fonts.

Services such as Font Deck and Adobe TypeKit let you “rent” fonts for web use at a reasonable price.

Most font vendors have a font tester, letting you experiment and find something you like before paying for anything.

Effective typography doesn’t require being ornate or overly clever.

It’s about finding a voice that matches your values, whether that’s a custom-made typeface or good old Helvetica.

I ’VE ONLY SCRATCHED THE SURFACE

There’s a lot more to talk about.But I hope I’ve shared enough to help you use typography to your benefit.

Or you’ll at least start noticingbad kerning everywhere.

CONNARY.COM