Dr. Type by Kristen Youngman

Dr. Type “

Type has no beauty on the inside so the outside better be damn perfect.

”

The doctor will see you now.

Dr. Type A Surgically-Enhanced Guide to Typography

Kristen Youngman Academy of Art University San Francisco, CA

Copyright ÂŠ 2010 by Kristen Youngman All rights reserved. Content and research gathered from the following sources: The Mac is Not a Typewriter, Robin Williams The Elements of Typographic Style, Robert Bringhurst The Complete Manual of Typography, Frank Romano

For My Parents who always taught me to love beyond the surface and feel whatâ&#x20AC;&#x2122;s right in your heart

THE GUTS Type Anatomy Identifying Type Rising Heights How Type is Measured Shaving Serifs Sheering Sans

Keyboard Regimen Dash Injections Accent Addiction Instant Character Poppers

Resuscitating Space Uppercase vs. Lowercase Kern Out the Fat Stitching Up Leading

ult WARNING: raphy may res e good typog Failure to us en death. nausea or ev s, es zin diz in

SECTION 1

Type Anatomy • Identifying Type • Rising Heights • How Type is Measured • Shaving Serifs • Sheering Sans

Dr. Type: TYPE ANATOMY

Counter The partially or fully enclosed space within a character.

Indentifying Type Like features on a face, each part of a letter contributes to its overall appearance. Small counters may be considered undesirable as beedy eyes because it may be difficult to read on smaller type. But when line space is tight, smaller counters help. Ascenders and descenders are as distinguishing as someone’s nose. Small, short lengths are like tight noses—popular because they allow other features to be noticed and don’t stick out. Yet others consider big noses and tall letters a sign of success.

10 11 12 13 14 15

Ascender 16

The part of a lowercase character (b, d, f, h, k, l, t) that extends above the x-height.

17 18 19 20 22

The part of a character (g, j, p, q, y, and J) that descends below the baseline.

Descender

23 24 25 26 27 28 29 30 31 32 33 34

Dr. Type: TYPE ANATOMY

Rising Heights When choosing and identifying typefaces, diagnose the Cap Height and X-height. Cap height shows how tall a typeface reaches from the baseline (the invisible line letters sit on). It also acts as a ceiling for top-aligned characters such as footnotes. X-height is the distance from the baseline to the mean line and is used as a gauge because it has both a flat top and bottom. A more generous x-height helps with legibility so type with larger x-heights are preferred for text set for the computer screen.

10 11 12 13 14 15 16 17 18 21

The height of lowercase letters, specifically the lowercase x, not including ascenders and descenders.

The height of capital letters from the baseline to the top of caps, most accurately measured on a character with a flat bottom (E, H, I, etc.).

X-height

Cap Height

22 23 24 25 26 27 28 29 30 31 32 33 34

CATWALK

How Type is Measured Type is measured in points but what you really need to learn is how different weights and sizes give different emphasis to what you are trying to say. A fat typeface will appear solid but heavy while a light typeface seems slender and nimble. Typefaces range from Very Light to Regular to Black: Very Light being the sleek model who under the wrong light appears anorexic and practically disappears; Black being the large loud person that canâ&#x20AC;&#x2122;t be ignored because theyâ&#x20AC;&#x2122;ve blocked the door.

WIDELOAD

Dr. Type: TYPE ANATOMY

Shaving Serifs Serifs are the marks at the end of strokes. When figuring out which typeface is best cut out for the job at hand consider the function of the text. Many studies have shown serif type is more readable in extended text than sans serif. A suggestion for this readability conclusion is that serifs act as a horizontal guide that leads the readerâ&#x20AC;&#x2122;s eye along the line of text. Serif can also handle more words per line (about ten to twelve) so it is the preferred choice for setting main body copy.

10 11 12 13 14 15 16 17 18 20 21 22 23

The projections extending off the main strokes of the characters of serif typefaces. Serifs come in two styles: bracketed and unbracketed. Brackets are the supportive curves which connect the serif to the stroke. Unbracketed serifs (aka. slab serifs) are attached sharply, and usually at 90 degree angles.

Serif Bracketed Serif

24 25 26 27 28 29

Unbracketed Serif

30 31 32 33 34

Dr. Type: TYPE ANATOMY

Sheering Sans Sans serif typefaces have no marks at the end of each stroke and are commonly used for display or headline text because they have been shown to be more legible. Legibility has to do with character recognition instead of reading large blocks of text. When using sans serif in text, slice the line to a shorter length with no more than seven to eight words per line. Avoid manipulating the type style in ways that would make it less readable (few uses of bold, italic, outlined or shadowed).

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 29

A typeface that does not have the small features called “serifs” at the end of strokes. The term comes from the Latin word “sine”, via the French word sans, meaning “without.”

Sans Serif

30 31 32 33 34

WARNING: good typography may result lure to use death. Fai en nausea or ev in dizziness,

HIGHLY ADDICTIVE SUBSTANCES

Once exposed to the proper use of characters discontinued use proves difficult.

SECTION 2

Keyboard Regimen • Dash Injections • Instant Character Poppers • Accent Addiction

Dr. Type: KEYBOARD REGIMEN

Dash Injections Like a face without Botox, misplaced dashes are unsightly and will give the wrong impression. Here are some tips for how to type and correctly use dashes. Injecting the right line makes your text mean the right thing and is easy on the eye. If you have the bad habit of using a double hyphen to indicate a dash these injections will cure you of having to do so. That habit must be eradicated. It is a typewriter convention from when there were no em and en dashes available. Thereâ&#x20AC;&#x2122;s no excuse on a mac.

5 6 7 8

Hyphen 9 10

Strictly for hyphenating words or to break a word at the end of a line. Itâ&#x20AC;&#x2122;s commonly administered in words like mother-in-law and phone numbers.

11 12 13 16 17 18 19 20 21

To Type a Hyphen

Between the 0 and + at the top-right of the keyboard

14 22 23 24 25 26 27 28 29 30

Dr. Type: KEYBOARD REGIMEN

To Type an En Dash

To Type an Em Dash

Option Hyphen

Shift Option Hyphen

5 6 7 8 9 10 11 12 13 14 15 16 17

En Dash – 18 19

Approximately the width of a capital letter N in that particular font and size. It is used between words that indicate a duration, such as time or months or years. Administer it where you might otherwise use the word “to.”

20 22 23

Twice as long as the en dash—it’s about the size of a capital letter M. Often used in place of parentheses, to indicate an abrupt change in thought, or administered when a period is too strong and a comma too weak.

Em Dash —

24 25 26 27 28 29 30

Dr. Type: KEYBOARD REGIMEN

OPENING DOUBLE QUOTE

“

OPTION [

CLOSING SINGLE QUOTE

’

OPTION SHIFT ]

ELLIPSIS

”

OPTION SHIFT [

EN DASH

–

LIGATURE OF

OPENING SINGLE QUOTE

‘

OPTION HYPHEN

—

OPTION SHIFT HYPHEN

DEGREE SYMBOL

OPTION ;

•

OPTION 8

f AND i

LIGATURE OF

f AND l

FRACTION BAR

OPTION SHIFT 6

⁄

OPTION SHIFT 5

Instant Character Poppers An essential part of healthy typography is using the appropriate punctuation marks and characters where necessary. That can be difficult to do if you do not know how to type them. Here they are in pill form for instant relief. Repeat as often as needed.

OPTION ]

EM DASH

BULLET

… fi

CLOSING DOUBLE QUOTE

OPTION SHIFT 8

OPTION SHIFT 1

5 6 7 8 9 10 11

OPTION g

TRADEMARK

OPTION g

™

TRADEMARK

OPTION 2

™

OPTION 2

REGISTRATION MARK

OPTION r

OPTION r 13

OPTION 4

EURO

OPTION 4

€

EURO

OPTION SHIFT 2

€

POUNDS

OPTION SHIFT 2

POUNDS

OPTION 3

OPTION 3 15

CENTS

INVERTED EXCLAMATION POINT INVERTED EXCLAMATION POINTINVERTED QUESTION MARK

OPTION 1

OPTION

OPTION SHIFT C

OPTION SHIFT ?

OPTION SHIFT C

OPTION 1

INVERTED QUESTION MARK

OPTION SHIFT ?

19 20 21 23 24

Macs help the professional typesetter by making it easy to access a visual representation of the keyboard (Keyboard Viewer) to show the characters loaded with each typeface and through the Characters Palette. Find them in Preferences > International.

Keyboard Viewer and Character Doses

25 26 27 28 29 30

Accent Addiction The accent marks seem elusive at first because they are hidden on the Option keyboard. But once you start using them you’ll never go back. They make your text sexier, more cultured, wellspoken and most importantly spelled correctly. The trick is to first find out which key supplies the accent mark. Typically it’s the character with which the accent mark is most likely to be used. Don’t be a bum, everyone is doing it. Hit Option E and then E again for a taste, the first one is free.

To Type an Accent First hold down the Option key and hit the accent character; it looks like nothing happened but the accent mark is now loaded, ready for use. Next, type the character you want under that accent mark; they will then appear together.

OPTION u

OPT

ION

i N

TIO

OPTION n

WARNING: good typography may result lure to use death. Fai en nausea or ev in dizziness,

HIGHLY ADDICTIVE SUBSTANCE:

Once exposed to the proper use of characters discontinued use proves difficult.

CONSULT A DESIG

NER if you experie or pain from bad nce discomfort typography. To alleviate, discon reading until cor tinue rections can be made.

SECTION 3

Resuscitating Space • Uppercase vs Lowercase • Kern Out the Fat • Stitching Up Leading

Dr. Type: RESUSCITATING SPACE

Uppercase vs. Lowercase Using all caps can look great but many studies have shown that they are harder to read because your eye reads groups of letters faster than each letter alone. Like trying to figure out if a flatchested person is male or female, a busty woman is obvious. Other things to consider when choosing all caps for the sake of the design: They take up more space compared to achieving the same emphasis by bolding or increasing the size of lowercase. Some typefaces look terrible set in all caps, like cursive italics.

1 2 3 4 5 6 7 8 9 10

We recognize words not only by their letter groups but also by their shape, (aka. their edge or “coastline”).

11 12 13 14 15

When a word is written in all caps we have to read it letter by letter instead of by groups which takes longer.

16 17 19 20

What’s up doc?

To see how powerful the edges can be see if you can read the following phrase made strictly of shapes.

21 22 23 24 25 26

Dr. Type: RESUSCITATING SPACE

Kern Out the Fat The process of adjusting the spacing between characters to achieve a visually consisent, pleasing result is kerning. Like Lipo, removing extra space between letters makes the shape the of word appear balanced and fit together better overall. Some spaces appear larger as the computer distributes the same space between round or angled letters. These are target areas for undergoing the kerning procedure. The secret to kerning is that it must be performed to be visually pleasing to the eye.

1 2 3 4 5 6 7 8 9 10 11 12 13

Some Guidelines for Kerning:

most amount of space, this can be a useful guideline for how the rest of the letter spacing should be.

HL Characters with verticals next to each other need the

HO A vertical next to a curve needs less space. 16

OC A curve next to a curve needs very little space. 17

OT A curve can actually overlap into white space under or above the bar or steam of a character.

AT The closet kerning is done where both letters have a lot of white space around them.

18 19 20

Turn the word upside down to help analyze if the negative space between letters is proportionate.

21 22 23 24 25 26

Dr. Type: RESUSCITATING SPACE

Stitching Up Leading The space between baselines of type is what holds a paragraph together like stitches sealing a wound. Called leading (rhymes with heading), itâ&#x20AC;&#x2122;s from hand-set type days when thin strips of lead were inserted to create space between each line of text. No one wants visual scaring when looking at a block of text so consider this: Proper leading is barely noticeable, holding the text together nicely. Leading that is too loose can feel like each line of type will break away. Too tight leading just looks messy.

1 2 3 4 5 6

6pt/5pt

(negative leading can lead to ascenders and descenders crashing into each other)

I’m a Barbie girl in the Barbie world Life in plastic, it’s fantastic You can brush my hair, undress me everywhere Imagination, life is your creation

9 10

I’m a blonde single girl in the fantasy world Dress me up, take your time, I’m your dollie You’re my doll, rock and roll, feel the glamour and pain Kiss me here, touch me there, hanky-panky

11 12

6pt/7.2 (20% is auto-leading) 13 14

I’m a Barbie girl in the Barbie world Life in plastic, it’s fantastic You can brush my hair, undress me everywhere Imagination, life is your creation

I’m a blonde single girl in the fantasy world Dress me up, take your time, I’m your dollie You’re my doll, rock and roll, feel the glamour and pain Kiss me here, touch me there, hanky-panky

8pt/18pt

The greater the leading the lighter the body of text appears visually, but be careful your text doesn’t come apart. I’m a Barbie girl in the Barbie world

You can brush my hair, undress me everywhere

Life in plastic, it’s fantastic

Imagination, life is your creation 20

I’m a blonde single girl in the fantasy world

Dress me up, take your time, I’m your dollie

22 23

You’re my doll, rock and roll, feel the glamour and pain Kiss me here, touch me there, hanky-panky

24 25 26

Colophon: This book is set in Meta Plus and designed in Adobe InDesign. All illustrations are originals by Kristen Youngman, executed in Adobe Illustrator. Published on Julia Press. Bound by Herring & Robinson Bookbinders.

Academy of Art University San Francisco, CA 94105