typeface basics 1. glossary 1 ascenders: ascenders: strokes of letters that rise above the mean line...

Typeface Basics

1

Glossary 1

Ascenders:Ascenders: Strokes of letters that rise above the mean line of type (b, d, f, h, k, l, t).

Descenders:Descenders: Strokes of letters that fall below the baseline (g, j, p, q, y)

x-height:x-height: The height of the main body of the lowercase letters. Most sans serifs have large x-heights.

2

Glossary 2

Type families (sometimes referred to as font):Type families (sometimes referred to as font): Versatile faces such as Garamond, Franklin Gothic, Futura, etc. offer several variations of weight and posture in the same typeface.

Display type:Display type: Point sizes 14 point and above.

Width rule:Width rule: When copy gets too wide, readability drops off. The rule is that copy should be no wider than an alphabet and a half or 39 characters.

3

Measuring Type1. Type is measured in points. 2. 72 points = 1 inch, 3. 72-pt. type is 1 inch tall,

measured from the top of the ascenderascender to the bottom of the descenderdescender.

4. ½-inch = 36-pt.5. ¼-inch = 18-pt.6. No letter has both an

ascender and a descender; however in any given typeface and size, the length of the ascender and descender are the same.

4

Type Anatomy

5

Tip #1. Pair personality to purpose.

•Keep in mind the message you are trying to communicate with your type.

 •Sports, even women's sports, do not

lend themselves to feminine script, for example.

Getting down, dirty girls rugby gaining popularity

Or

Getting down, dirty girls rugby gaining popularity

6

Tip #2. When working with type, more type families are not better.• LimitLimiting type to no

more than three font family for the entire book is a growing trend. 

• When combining type for headlines, remember two’s two’s companycompany, three’s a crowd. 

• Limit spread designs to one distinct type supported by something simple.

A family of fonts is composed of different

stylesstyles.

7

Font #1: Reading pull-down information

Format of font1. TrueType2. Postscript3. Open Type (best)

Format of font1. TrueType2. Postscript3. Open Type (best)

Styles of font in family1. Light2.

Condensed 

3. Bold

Styles of font in family1. Light2.

Condensed 

3. Bold

Font Family  Myriad Pro

Font Family  Myriad Pro

8

Font #2: Classifications of font families

6 basic font classes

1.1. SerifSerifA. Old StyleB. TransitionalC. ModernD. Slab Serif

2.2. Sans Serif Sans Serif (sans = without)

3.ScriptA. Blackletter

4.Display / Decorative

5.Monospaced6.Dingbat 9

Font #3: SerifsSerifs

•SerifsSerifs are easier to read easier to read than sans serifs.

•Use a serif serif font font for body body copy copy (text), as a general rule. 

SerifsSerifs are in red

BaskervilleBernhard ModernCourier StandardGaramondGeorgiaMinion ProPalatinoTimes New Roman

Examples Of Serif Examples Of Serif Fonts:Fonts:

10

Font #4: Sans Sans serifsserifs

These are These are lessless legible legible than serifs.than serifs.

Use Use sans sans serif serif fonts fonts for primary for primary headlines or headlines or captions as a captions as a general rule.general rule.

Examples of Sans Serif Font Families

ArialArial Rounded MTComic Sans MSFuturaHelveticaLetter Gothic StdLucia SanMyriad ProNews Gothic MTStone Sans ITC TTVerdana 11

Font #5: ScriptScript

ScriptScript fonts are

• harder harder to read.

• used as large large text only.

• for special special cases cases only.

Bickham Script ProBrush Script Std.Caflisch Script ProDickens Script SSKEdwardian Script ITCHandwriting — DakotaLucida BlackletterLucida HandwritingMedici ScriptOld English TextLearning CurveSnell Roundhand

Examples Of Script Font Examples Of Script Font Families:Families:

12

Font #6: Display / Decorative Display / Decorative FontsFonts

• harder harder to read• used as large large text only• for special cases special cases only

Examples Of Display Families:Examples Of Display Families:

DisplayDisplay fonts are:

13

Font #6: Display / Decorative Display / Decorative FontsFonts

Examples Of Display Families:Examples Of Display Families:

14

Font #7: Monospace Monospace FontsFontsMonospaceMonospace

fontsAre also called "fixed pitch" fonts

Have characters that all have the same character width

Originally were designed for typewriters

Used with computer source code

Andale Mono Courier NewLetter Gothic StdLucinda ConsoleLucinda Sans TypewriterMonacoORC APrestige Elite Std

Examples Of Monospace Examples Of Monospace Families:Families:

15

Font #8: Dingbat FontsDingbat Fonts

DingbatDingbat fonts are:

Also known as a "printer's ornament" or "printer's character.”

Describe fonts with symbols and shapes in the positions designated for alphabetical or numeric characters.

16

Font #9: Dingbat FontsDingbat FontsGlyphsGlyphs

are:An ornament, a character or spacer used in typesetting.

17

Font #10: Dingbat FontsDingbat Fonts

MT Extra abcdefgMS Reference Specialty ABCDEWebdings Wingdings Wingdings3 Zapf Dingbats

Typical Examples Of Display Families:Typical Examples Of Display Families:

18

Font #11: Dingbat FontsDingbat Fonts

AmphibiPrint abcdefgCarta abcdefgFace it! AbcdefgFace Off! AbcdefgMickey Mousebats ABCDEFGHRoadSign abcdefgRoadWarningSign abcdefgWWFlakes abcdefghijklm

Fun Examples Of Display Families:Fun Examples Of Display Families:

19

Font #12:

RememberRememberThe more unusual the type, the lower the readability.

Pick your fonts carefully.

20

Tip #3. Avoid using all capitals.•  That doesn’t mean you can never use all caps.  •  Just realize all capital letters reduces

readability.  •  Use all caps only when you have a specific

design purpose in mind. •  Especially avoid using all capitals in a script

face.  •  Your readability drops to about zero.

21

Tip #4. Pay attention to relationships when combining type.• If elements are not the

same, they should be very different.

• Remember, like the perfect marriage, types need to either be very very similar similar or fairly fairly oppositeopposite. 

• Contrast type in size, weight, form and structure.

• The combinations you form should communicate, not confuse the reader. 

Examples: Verdana bold for heads  Georgia for text 

 = good contrast 

 Verdana bold for heads Trebuchet for text

  = not enough contrast

22

Tip #5. Some types just don’t mix.• Don't use two scripts or a script and an italic

together. 

• They usually have the same form and so they they conflictconflict with each other rather than contrast.

• Never use two types from the same category (for example: Script, Decorative) together.

23

Don't D

oDon

't D

o

Tip #6. Don’t abuse type through manipulation• Purpose is to communicate type helps do

that.  • Don’t manipulate manipulate type to fit your design

by adjusting leading and width.   • Instead, edit the copy or find a word that

fits the headline space. • Once established within a section, type

size, leading and width should remain consistent.

24

Tip #7. Complement your knowledge of fonts with your knowledge of design.

• Use of effectively planned white space and color can enhance your use of type. 

• Place type on the page to create entry points for your reader.

25

Tip #8. Learn more from the experts.• Magazines like Before & After and Dynamic Graphics have information and advice. 

• Check out books like The Non-Designers Design Book by design experts like Robin Williams. 

• Many of these tips come from her. 

• For more technical information, check out her Non-Designers Type Book.

• Browse the bookstores and stock up on magazines that use type effectively so you can build a library of ideas.

26