TypographyTypography• the art of using (text) fonts the art of using (text) fonts

and font styles to produce and font styles to produce professional looking professional looking

publicationspublications

TypefaceTypefaceTypeface is a collection of all the Typeface is a collection of all the

characters of a single type design characters of a single type design (font)(font)Such as:Such as:

Times New RomanTimes New RomanArialArialComic SansComic SansPoster Bodoni Poster Bodoni Typo UprightTypo Upright

TypefaceTypeface

is a set of characters of the same is a set of characters of the same design. Characters include letters, design. Characters include letters, numbers, and symbols. Popular numbers, and symbols. Popular typefaces include Arial, Helvetica, typefaces include Arial, Helvetica, Times, and Verdana. The term Times, and Verdana. The term "typeface" is often confused with "font," "typeface" is often confused with "font," which is a specific size and style of a which is a specific size and style of a typeface. For example, Times New typeface. For example, Times New Roman is a typeface, while Times New Roman is a typeface, while Times New Roman 10 pt bold is a font. Roman 10 pt bold is a font.

6 Common Groups of 6 Common Groups of TypefaceTypeface

Old StyleOld StyleModernModernSerifSerifSans SerifSans Serif

ScriptScriptDecorativeDecorative

Use if you have lots of type you Use if you have lots of type you want people to actually readwant people to actually read

Oldstyle Thick/thin transition

in strokes

Diagonal stress

SerifSerifs on lowercase letters are slanted

Goudy

ModernModernNot good choices for extended amounts of Not good choices for extended amounts of

body copybody copyThin lines almost disappear, thick Thin lines almost disappear, thick

lines are prominentlines are prominent

Effect on the page is called Effect on the page is called “dazzling”“dazzling”

SerifSerifUsed in children’s books because of Used in children’s books because of

clean, straightforward lookclean, straightforward lookExamples:Examples:

Times New RomanTimes New RomanCalifornianCalifornian

Sans SerifSans Serif““sans” (without) in Frenchsans” (without) in FrenchNo thick/thin transition No thick/thin transition Same thickness all the way aroundSame thickness all the way aroundGreat for creating eye-catching Great for creating eye-catching

pagespages

ScriptScriptLike cheesecake- Like cheesecake- they should be they should be used sparingly so used sparingly so nobody get sicknobody get sick

DecorativeDecorativeEasy to identify, if the thought of Easy to identify, if the thought of

reading an entire book in that font reading an entire book in that font makes you wanna throw up, it falls makes you wanna throw up, it falls under decorativeunder decorative

Fun, distinctiveFun, distinctivePowerful use is limitedPowerful use is limitedGo beyond what you think of as its Go beyond what you think of as its

initial impressioninitial impression

Juice Juice ChillyChilly cooldots cooldots

Type FamilyType FamilyA Type Family is a set of typefaces A Type Family is a set of typefaces

created from the same font, but in created from the same font, but in different weights to add emphasis or different weights to add emphasis or contrast.contrast.Such as:Such as:

BoldBoldItalicItalic

Different Kinds of TypefacesDifferent Kinds of Typefaces

SerifSerifA typeface with lines on curves A typeface with lines on curves

extending from the ends of the lettersextending from the ends of the letters

A B C a b c

Different Kinds of TypefacesDifferent Kinds of Typefaces

San SerifSan SerifA typeface that is straight-edgedA typeface that is straight-edged

A B C a b c

All About LettersAll About Lettersx-heightx-height

The height of the body of all lowercase The height of the body of all lowercase letters such as the letter x in a typeface. letters such as the letter x in a typeface. All lower case letters are designed to be All lower case letters are designed to be no taller then the x-height.no taller then the x-height.

a x cBaselineBaseline

An imaginary horizontal line on which An imaginary horizontal line on which the bottom of letters rest.the bottom of letters rest.

Parts of LettersParts of LettersAscenderAscender

The lowercase letter that extend above the The lowercase letter that extend above the x-height – b, d, f, h, and lx-height – b, d, f, h, and l

b x h

Parts of LettersParts of LettersDescenderDescender

The lowercase letters that fall below the The lowercase letters that fall below the baseline – g, j, p, and qbaseline – g, j, p, and q

g x j

Character SpacingCharacter SpacingTrackingTracking

A feature that enables you to adjust the A feature that enables you to adjust the relative space characters for selected relative space characters for selected texttextAdjusts the space between a group of Adjusts the space between a group of

characters or wordscharacters or words

Character SpacingCharacter SpacingKerningKerning

The process of “fine tuning” spacing by The process of “fine tuning” spacing by adjusting the space between charactersadjusting the space between charactersAdjusts the space between two charactersAdjusts the space between two characters

LeadingLeadingThe vertical distance between linesThe vertical distance between lines

Adjusts the space between linesAdjusts the space between lines

Word SpacingWord Spacingen dashen dash

A line (-) that is slightly longer than a A line (-) that is slightly longer than a hyphen (width of lower case n) and is used hyphen (width of lower case n) and is used in place of the “to” or “through” such as A-in place of the “to” or “through” such as A-Z.Z.

em dashem dashA line (–) the width of the letter m, that is A line (–) the width of the letter m, that is

used to show a pause in a sentence such used to show a pause in a sentence such as “I – I won the sweepstakes!”as “I – I won the sweepstakes!”

Wordnspacing Wordmspacing

Em dashEm dash

Width is equal to the lower case Width is equal to the lower case letter m in the current typeface at letter m in the current typeface at that type sizethat type size

En DashEn Dash

Width is narrower Width is narrower Width of lower case n in that Width of lower case n in that

typefacetypefaceUse in place of the word “to” or Use in place of the word “to” or

“through”“through”Example A-ZExample A-Z

Reverse TypeReverse TypeReverse TypeReverse Type

White or light colored text that appears White or light colored text that appears against a darker backgroundagainst a darker background(this is an example of reverse type)(this is an example of reverse type)