Typography

TypographyLecture by: Penny Tan and JobyProvido

Things to knowTerms usedCategorizing typefacesCombining typefaces

TypographyEtymology: from the Latin words typos (type) and graphos (written)The art and technique of Arranging type that involves the selection of:TypefacesFont sizeLeading (line space)Tracking (adjusting the space between a group of letters)Kerning (adjusting the space between two letters)Type designModifying type glyphs

TypefacesA set of one or more fonts, in one or more sizes, designed with stylisticunityTheyusually comprise an alphabet of letters, numbers, punctuation marks, and specialcharacters(~ @ # $ % ^ & * _ + = « ‘ { } [ ] < > / )

Typefaces vs. FontsTypefaces These are families of fonts.Times New RomanArialfontsThese are variations of a typeface.ArialArial boldArial italicsArial underline

Typeface termsx-heightascenderdescenderbaselineThe horizontal guideline indicating where the bottom of characters without descenders appear to alignHeight of the lower case letters with no ascender or descenderPart of the lower case letter that extends above the x-heightPart of the lower case letter that extends below the x-height

Point sizesize in pointsPoint sizes are not exactly the same height. The following are all 50 points.

StressThe direction and degree of incline in the axis of a font with contrastIt could be diagonal (oblique or biased), vertical, or horizontalstress

SerifsNA short line or finishing stroke that crosses or projects from stems or strokes in a characterAlso called a fillet; it is a shape that appears in a character at the junction of a serif and a main strokeThe thinnest stroke of a letterserifbrackethairline

SerifsSlabBold, rectangular appearance and sometimes has fixed widths, meaning all characters occupy the same amount of horizontal spaceWedgeWhere the junction of the serif and the stem are diagonal rather than bracketedN

Serifs and bracketsbracketedSerifs (feet)Palatino

Typeface categoriesOld styleModernSlabserifSans serifScriptDécorativeDistressed

Old stylelowercase serifs are slanteddiagonal stressserifsbracketedgentle transition from thick to thinFormed the way scribes heldtheirpens in the late 1400sMost readablebecausetheyweremeant for long lines of textWarm and graceful

Modernlowercase serifs are horizontalvertical stressradical thick to thinserifssubtle or no bracketingIndustrialrevolution = mechanical point of viewOld style typefaceswerebecomingobsoleteElegant but severe and coldNot veryreadable

Slab serifAlsoknown as square serifAll charactersoccupy the sameamount of horizontal space, as printed by a typewriterIndustrialrevolution = advertisingAdvertisingneededthicktypefacesThickening the modern typefaces made it impossible to readThickened the serifsinsteadMostlyEgyptiannamesbecausearcheologywas the in thing due to finding the rosetta stoneMost slabserifs are calledClarendonsbecauseitepitomizes the letterform

Slab serifhorizontal lowercase serifsvertical stressthick, fat serifssubtle thick to thin

Sans seriflarge x-heightno serifssubtle or no transition from thick to thinSansis French for without in 1816 William Caslon created the 2-line Egyptianwhereheremoved the serifsbecausehehatedthem. Not an instant hitThe Bauhaus motto“form follows function” stripped typefaces to their bare essentialsFutura is the epitome of this letterformLarge x-height creates a presence

ScriptEmulateshandwritingClassy and formalIn the 1400s only the richcouldafford booksBooks were made by scribes whowrote in script

Decorative Enhances a themeNot meant for anything but for decorationNot to beused as textAdds punch to a publicationCreates a look or emphasizes contentIf overused, itcan destroy a design

Distressed distorted, deliberately trashedbeauty in their uglinessMac put desktop publishing in the hands of the masses.Rules of traditionaltypographyweredemolishedUsersbecame more interested in typefaces and manymanipulatedtheirownalso called fringe, grunge, garage, deconstructed, lawless

Combining typefacesconcordantOne familySafe but dullcontrastTypefaces are clear and distinct from each other

Combining typefaces: Conflicting2 or more typefaces that are similar in style, size, weight, etc.Disturbing because visual attraction is not concordant nor contrasting

Ways to achieve contrastColorDirectionFormSizeStructureWeight

Contrast by colorYou can change the ‘color’ of one typefaceLeading (line spacing)LetterspacingItalicWeightTypistsalsorefer to density of text as color

Contrast by directionDirection of how a text is readHorizontalVertically downwardVertically upwardDiagonally DownDiagonally UpVerdana

Contrast by direction samplesA tall thin column of text has a vertical direction

Contrast by formRefers to the shape of the block of lettersTemplar

Contrast by sizeContrastbig type withsmall typeMake the contrastobvious

Contrast by size samplesArial Lithe | Classic TypewriterRockwell | Century GothicOld English | Edwardian Script

Contrast by structureUse typefacesfromfamilieswithdifferent structuresNever put typefacesfrom the samefamily structure on the same pageEnsurethat the contrastisemphasizedLimit to only 3 families

Contrast by structure samplesTrebuchet | GaramondBodoni | clarendon

Contrast by weightRefers to the thickness of the strokesStrokescanbebold, semi-bold, extra bold, regular, light, etc.Great for organizing informationAgain, emphasize the contrastPut it all together.

Typography

More Related Content

What's hot (20)

Similar to Typography (20)

Recently uploaded (20)

Typography