Post on 17-Dec-2015
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)