THE Typography Fundamentals type Of · •Building skills from the basics is essential •Start...

FundamentalstypeOf

THETypography IIGRAPHIC DESIGN DEGREE PROGRAM COUNTY COLLEGE OF MORRIS

ADJUNCT ASSISTAN T PROFESSORGAYLE REMBOLD FURBERT

FundamentalstypeOf

THE

typographyTypography II

Objectives

• To stack headlines and titles for maximum impact

• To apply capitalization and punctuation

• Factors to consider when setting text in boxes

• Fine-tuning of letter spacing

• Interline Spacing - Leading


Focus on the Fundamentals

• Building skills from the basics is essential

• Start with kerning, leading and letter spacing

• The essentials matter most with display type

• Display type is used for headlines, titles and ismeant to “grab” the reader’s attention


Stacked Display Type

• Titles and headlines can be set on a single line

• Or they can be broken into two or more lines

• This option is called stacked type

• Stacked type can be set larger

• Stacked type enhances readability by breakingwords into meaningful groups


Breaking Words into Groups

• Read and understand the text

• Keep modifiers (adjectives) and adverbs togetherwith the words they effect

• Don’t split first names and last names

• Avoid the use of hyphens

• Try to place important words in the message first


Putting the Stack in Order

• To create order, format the text using alignment

• Flush-left alignment is the most common format

• This also referred to as ragged-right

• This format is the most readable alignment

• The aligned-left edge helps unite the separatelines that make up the headline


More About Alignment

• Flush-right alignment places emphasis on theend of the sentence

• This is also referred as ragged-left

• Centered alignment imposes symmetry on the text

• Since both flush-right and centered type slows thereader use it with discretion


More About Alignment

• Justified alignment appears static

• This is when type is aligned flush on both sides

• Newspaper body copy is often set justified

• Since headlines have fewer words, this is not agood formatting choice


Examples: Headline Alignment

This headlineis aligned!ush-left

This headlineis centered

This headlineis aligned

!ush-right

This headline Is justi"ed


There is Another Choice…

• Asymmetrical alignmentallows more freedom forthe designer

• This format allows youto place words in amanner that creates aninteresting rhythm

This headline is not conventionally aligned

Stacking also creates acompact design element


Fine-Tuning Alignment Formatting

• Our alphabet consists of very diverse shapes(C, T, O, A, V)

• Flush-left headlines will look indented with anyof these letters

• To maintain the ”look” of precise alignmentrequires adjustment and fine-tuning


Alignment AdjustmentBEFORE AFTER


Fine-Tuning and Punctuation

• Punctuation marks are smallerand lighter than letter characters

• Therefore they appear“indented” and destroy theimplied vertical alignment

• The solution is to hang thepunctuation - allow it to hang outbeyond the aligned edge!

“In this HeadlineQuotation MarksWere notReduced or Hung”

“In this Headline Quotation Marks Were Reduced and Hung”


Are Your Quotes Smart?

• Typewriters of the past createdstraight quotation marks

• Today we have a choice - we can usecurly quotation marks or smart quotes

• These look far more professional thanstraight ditto marks

• Helpful hint - when setting displaytype, reduce the size of punctuationmarks

“StraightQuotes”

“CurlyQuotes”


Capitalization Formats

• The style of capitalization affects readability

• SETTING TYPE IN ALL CAPITALS SLOWSREADERS DOWN….why?

• Lowercase letters have greater shape contrast werecognize the overall shape of words

• Easiest to read? Sentence style (down style);the first letter of the first word and proper namesare capped


More on Capitalization Formats

• Headline style or leading caps (up style) -are when all major words are capped

• Prepositions, articles, and any conjunctions thathave four fewer letters are not capped

Prepositions: at, by, down, for, from, in, into, like, near, of, off, on, onto, over, to, etc

Conjunctions: and, but, or, yet, for, nor, so, as, if, once, than, that, till, when, etc

Articles: a, an, the


Text within Boxes

• Carefully consider the functionand effect of creating text in a box

• Consider weight, size andposition of the type in relation tothe container

• The weight of one element shouldnot overpower the weight ofanother element

Pay attention to theweight, size and positionof the type in relation tothe box.




Text within Tinted Boxes

• When setting text within boxes using a tint or shadefollowing the 50% rule

• Reverse type with the use of 50% or darker

• Black type with the use of 50% or lighter

Black type on 50% or lighterWhite type on 50% or darker


Tracking

• Tracking is the overall adjustment of letter spacingthroughout entire words

• Display type almost always requires adjustment

• As type size increases the space betweencharacters increase

• It is common to tighten up the tracking whenusing display type


Letterspacing

• On the other hand, sometimes display type isgiven a decorative effect by setting the trackingvery wide by adding spaces

• This effect, called letterspacing, makes readersslow down and see separate letters before theyread the words


Kerning

• Kerning is a term that refers to the removal ofspace between letters

• Letter with diverse shapes my require kerning

• Always check for those letter combinations thatappear awkward and kern appropriately

Year Over


Fine-Tune Your Tracking

• In general, the term tracking is used interchangeablywhen adding and/or subtracting space between wordsand letters

• Consider the amount of tracking applied

• Extreme spacing severely affects readability


Interline Spacing - Leading

• The space between lines of type is called leading

• Leading is measured baseline to baseline

• Several factors influence the choice of leading:

- The characteristics of the font

- The feeling the designer wants to convey

- And by fashion trends of a specific period


More on Leading

• Set solid refers to leading that is equal to thepoint size, such as 10/10 or 12/12

• Negative leading is when ascenders anddescenders actually overlap

• The default for auto leading is 120% of thepoint size of the type


Summary

• Discussions centered on display type

• The large type that forms a reader’s first impression

• Stacking the type allows it to be set larger

• Allows words to be set into meaningful word groups

• And unite it into a compact design element


Summary

• Capitalization and punctuation used indisplay type was discussed

• We examined how to set text within boxes

• We focused on fundamental issues such as:alignment, leading, tracking and kerning

• And remember…quiz next week

THE Typography Fundamentals type Of · •Building skills from the basics is essential •Start...

Documents

Transcript of THE Typography Fundamentals type Of · •Building skills from the basics is essential •Start...