Keithtam Digital Type Primer
Keithtam Digital Type Primer
Ever since the advent of printing with movable type, typography and technology had become inseparable. If we were to accept the definition of typography as the mechanical production of written language, then we must have an intimate understanding of our prevailing typesetting technology the computer and its software and peripherals in order to become competent typographic designers. Craftsmanship is inherent in our technology; creativity is also built upon the foundation of understanding the technology.
Key concepts
The desktop publishing revolution Thedesktoprevolutionofgraphicdesignandty-
simplyput,asigninagivenlanguage,forexamplealowercasee,anuppercaseAor afigure8.Aglyph,ontheotherhand,isthespecificformcharacterscantakeina fontorthevisualformsthatrepresentasingleletter.Therecouldbemorethanone glyphthatrepresentsonesinglecharacter.Forexampletheletterecantaketheformof aswashe,anordinale,orasmallcape.Thesearethedifferentglyphs. Withthelimitedcharacter/glyphsetofatypicalPostScriptType1font,onecharacter isoftenassignedtoonlyoneglyph.Alternateglyphshavetobeaccessedviaseparate fonts.WiththeintroductionofOpenTypefonts,onecharactercouldbemappedonto manydifferentglyphs,allowingtherepresentation(visualform)ofacharactertobe independentfromtheactuallinguisticvalueofacharacter.
stantly,twenty-four-seven,viatypefoundrieswebsitesorwebsiteslikemyfonts.com orfontshop.ca.Whenyoupurchaseafont,youdontactuallyownitbutareacquiring alicensefromthedesigner(ortypefoundry)fortherighttouseit.Itisessentiallythe sameasbuyingsoftware.Afontlicenseagreement(eULA)wouldgenerallystatehow manycomputersorprintersyoureallowedtousethefontwithatonephysicallocation. Shouldyouneedtopassthefontontoathirdpartyfor,sayproductionpurposes,that thirdpartywouldhavetoalsopurchasealicenseforthefont.BesuretoreadtheeULA carefully.Itisillegaltoborrowfontsfromothersorlendfontstoothers.Typedesign isadyingart.Theamountofworkinvestedintoatypefacecouldspanforyears,ifnot decades;andyettheeconomicreturnishopelesslyminimal.Soplease,alwayssupport fellowdesignersandusefontsresponsiblyandethically.
Font formats
PostScript Type 1 PostScriptType1isthemostcommonlyusedfontformatamongst
graphicdesignprofessionals.AdobeSystemsfirstintroducedittotheMacintosh platformin1985.PostScriptisapagedescriptionlanguagethatprocessesandtransfer scalable,vector-basedgraphicsandtypefromthecomputerontoaprintedpage,independentofwhatdeviceisbeingused.Thequalityisonlyboundbytheresolutionofthe printerbeingused.PostScript,combinedwithAldusPageMaker(thefirstpage-layout program)madethedesktoppublishingrevolutionpossible.Unlikeoldercomputer fontsthatwerebasedonfixed-sizebitmapimages,PostScriptfontoutlinesaredescribedassmoothcurvesusingmathematicalformulas. IntheearlydaysofPostScriptType1fonts,thescreendisplayqualityofthesefonts wascrudeatbestandalmostillegibleatworst.Thesesupposedlyscalablefontsdidnot scalewellonscreen.Screenfontsofvariousfrequentlyusedsizeshadtobeinstalledin ordertohaveasomewhatbetterscreenrepresentation.Anysizesthatarenotinstalled appearedjaggedonscreen.ItwasntuntilAdobeTypeManagerwasreleasedwhentruly fluidscalabilitybecameareality.AdobeTypeManagerisstillrequiredinMacOS9(and below)andtheWindowsplatformforPostScriptType1fontstofunctionproperly. AlthoughType1isaformatthathasalmost20yearsofproventrackrecordingraphic arts,Type1fontsstillhaveanumberofshortcomings.OneoftheseisthatType1 fontsneedtwofilestofunctionproperly:abitmapsuitcasefile(containingatleast onebitmapsize)plusaPostScriptfontfile.Withouteitheroneofthese,thefontwill notappearonyourfontmenusorwontprintsmoothly.Anothershortcomingisthe requirementofAdobeTypeManagercontrolpaneltodisplaysmoothlyonscreen(as mentionedabove)andtoprintsmoothlyonnon-PostScriptprinters,forexamplemost cheapinkjetprinters.Type1fontsalsoonlyallowamaximumof256charactersina
font,whichisaseriouslimitationfornon-Latinfontswithextremelylargecharacter sets.Whenadvancedtypographicvariantsforexamplesmallcaps,additionalligatures,fractions,etc.areneeded,additionalfontscalledexpertsetsarerequired.
TrueType TrueTypeisafontformatthatwasjointlydevelopedbyAppleandMicrosoft
asarivaltothewidelyadoptedPostScriptType1formatinthelate1980s.TrueType fontsarealsoscalable,vector-basedfonts,butinsteadofusingcubic(bzier)curvesas inType1fonts,TrueTypefontsusesquadraticcurvestodescribetheiroutlines.Unlike PostScriptType1fonts,TrueTypefontsonlyneedasinglesuitcasefiletofunction properly.GraphicdesignprofessionalsoftenlookdownonTrueTypefontsasamateur. ThisispartlyattributedtothefactthatallofthedefaultMacOSandWindowssystem fontsareinTrueTypeformat,andfewTrueTypefontscomewithadvancedtypographic variantssuchasexpertsets.Also,intheirearlydays,TrueTypefontsdidhaveincompatibilityproblemswiththeindustrystandardpagedescriptionlanguagePostScript, buttheseproblemsdontseemtoexistanymore.TrueTypefontstendtofunctionthe bestinoffice-typeapplications,suchasAppleWorks,Word,PowerPointandExcel,and aregenerallythepreferredfontformatforgeneralofficeuse. OneofthegreatadvantagesofTrueTypefontsistheirsophisticatedhintingcapability, whichensureclean,crispandhighlylegiblebitmapdisplayforon-screenuse.Matthew CartersVerdanaandGeorgiaareprimeexamplesofexpertlyhintedfonts.Theseshould alwaysbespecifiedforwebpages. AlthoughTrueTypefontstechnicallyperformaswellasType1fonts,itmightstillbe besttoavoidthemforprintuse.Itisdefinitelyadvisabletoavoid(default)TrueType fontssuchasArialorVerdanainordertodistinguishourworkfromthatofamateurs!
OpenType OpenTypeisanewfontformatthatisincreasinglyadoptedbybothgraphic
A glyph drawing in TrueType format, using quadratic curves. Note that it has more control points than the PostScript counterpart.
Advanced typography
Expert typography Inastandardfont,forexamplethesystemfontPalatino,onlyfour
youtobuildyourown.FractionsrequiresimilaropticaladjustmentstoSmallCaps.A solidus()shouldbeused,notavirgule(/),thestandardslash.
98100not98/100
differentfromtheusualcharacterset,archaicormoreexuberant.Swashcharactersare sometimesprovidedforitalicfonts.
RAM etn
Ligatures Ligaturesaretwoormorelettersthataredesignedasonecharacter.The
signedaccordingtotheircontextsofuse.Withdigitaltype,afontisnolongertied toanyparticularsize.Typesthataredesignedtoappearinsmallsizeshaverather differentfunctionalandaestheticrequirementsthanthosethatareusedfordisplay purposes,atlargesizes.Forexample,typeforsmallsizesneedtogenerallybemorerobust,widerinproportionandlowerincontrastinordertonotappearweak.Ifthesame fontwereusedforlargesizes,itwouldlookcumbersomeandunwieldy.Sometypeface familiesaresize-sensitiveandmayconsistoffontvariantsforarangeofsizes.The72pt variantwouldhavecrisperserifs,highercontrast,morecondensedwidthsandtighter spacing;whereasthe8ptvariantwouldhavechunkierserifs,lowercontrast,wider charactersandlooserspacing.SomeofAdobesProOpenTypeopticaltypefaceshave fontvariantsnamedcaption,regular,subheadanddisplay.
OHamburg OHamburg
Adobe Minion Pros caption and display variants.
-
Hyphen, en dash and em dash
Typography on screen
Hows type on screen different? Unliketypographyinprint,whichdependsonlightre-
flectingoffthesurfaceofthepaperandintothereaderseyes,typographyonscreen workswithlightthatisemitteddirectlyfromthescreenintotheeyes.Theprocessof readingcanthereforebequitetiring.Ifconsiderationsarenottakentoallowforthe bestpossiblereadingcondition,readerscaneasilybeputoffbyyourtext.Anotheressentialdifferencebetweentypographyinprintandonscreenisofcourseresolution. Theresolutionsofmostcomputerscreensarebetween72and96pixelsperinch,while mostofoureverydayprintedmattersarearound2500dotsperinch.Eventhecommon officelaserprinterhasamuchhigherresolutionthanthecomputerscreen,at600dots perinch.Untilscreenresolutionsimprovetosuchadegreethattheymatchourprint quality,asdesignerswellhavetodoourbestwithintheboundsofwhatseemslikea seriousconstraint. Oneoftheadvantagesoftypographyonscreenisthatthetexthasthepotentialtobe livethetextremainsastextinsteadofastagnantimageonpaper.Thismeansthe
T
Reading type in print
textiseditableandsearchablethesemanticmeaningismaintained.Livetext,especiallyonHTmL-basedwebsites,couldbegeneratedbylinkingtoadatabaseoftimely informationandcalleduponwhenneeded.Pagescouldbebuiltonthefly.Manye-commercewebsitesaredatabase-driven.Anotheradvantageisthathyperlinkscouldbeassignedtowordsandphrases,socross-referencinganduserinteractionispossible. Typographyonscreencouldalsotakeonmotionandbecombinedwithsound. Letterforms,wordsandphrasesinthiscontextbecomeactorsthatcouldtellstoriesand conveyemotions.TVmotionsequencesandfilmtitlesfallwithinthisgenreoftypeon screen.Typeinmotioncouldalsobecombinedwithinteractivitytocreateplugin-based websites,games,interactiveCD-RomsandDVDsusingFlashorShockwavetechnology. Atsmallsizes(typicallythecommonsizeswewoulduseforprint),thenumberofpixels availabletorepresenteachcharacterissmall,duetothecoarseresolutionofthescreen. Mostissuesfortypographyonscreenonlyoccuratsmallsizes.Atlargesizesresolution wouldnotbeanissueatall,andthesameprinciplesforprinttypographyapply.
T
Reading type on screen
aliased (bitmap)
anti-aliased (grayscale)
Hinting Inshort,hintingisawaytoinstructthecomputerexactlywhichpixelsare
turnedoninordertogivethebestpossiblebitmapimageofthecharactersatsmall sizesatlowresolution.Theoutlineofthecharactersismodifiedbymathematicalinstructionsatgivensizes,sothedesiredcombinationofpixelsisturnedon.
These illustrations were taken from the Microsoft Typography website: www.microsoft.com/typography
unhinted
hinted
Alwaysspecifytypesizesinpixelsratherthanpoints.Duetothedifferencesinscreen resolutionsforMacsandPCs,thesamepointsizewouldrenderlargeronthePCthanonthe Mac.Specifyingyourtypeinpixels(forexample12px)wouldrectifythis. Setyourtypeslightlylargerthanyouwouldforprint.8to10pointmightbeperfectly readableforabook,butonscreenitisusuallytoosmalltobereadcomfortably.Yourtype sizeshouldbeatleast11pixels,preferablyhigher,especiallywhenyourtextisgoingto beanti-aliasedorisinaseriffedtypeface.IfindVerdanaat11pxtobeanexcellentsizeto workwith,butGeorgiaorevenArialatthesamesizelookabittoosmall.Verdanaat12pxis readablebutthespacingseemsalittlecramped.Howeverat13pxitlooksperfectlyfine.You havetofindoutbytrialanderror. Fromtheusabilitypointofview,itisperhapsbettertodesignyoursitewithflexibilityin mind,allowinguserstoincreasethetypesizewithoutdestroyingdesignintegrity. Makeyourleadinglargerthanyouwouldforprint.Agoodstartingpointmightbetoadd6 to7pixelstothepointsize.Ifyourtypesizeis11px,agoodspacingwouldbe18px.Again, youllhavetofindoutbytrialanderror. Makesureyourlinesareofreasonablelengths.Longlinesthatspanacrosstheentirewidth ofthescreenisdifficulttoread.Whitespaceandshorterlinesgivethereaderseyesaplace torestandprovideapsychologicallymorepleasantreadingenvironment. Avoidusingcoloursofextremecontrasts.Blacktypeofastarkwhitebackgroundhurts theeyes,sincethebackgroundismorepowerfulthatthetextitself.Softeningthecontrast wouldmakethereadingexperiencemorepleasant.Forexamplealightgreybackground wouldbringthevalueofthebackgroundclosertothatofthetext,amorecomfortable contrast.
Type in Flash and such Thebasicscreentypographyprinciplesforwebapplyhere.Forinter-
Unibody Regular Unibody Italic Unibody Bold Unibody Black Unibody smallcaps