0% found this document useful (0 votes)
64 views9 pages

Keithtam Digital Type Primer

Uploaded by

point_far_art
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
64 views9 pages

Keithtam Digital Type Primer

Uploaded by

point_far_art
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Digital typography : a primer

Keith Chi-hang Tam

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-

pographybeganitslifein1985.Threecompanieswereresponsible:Apple,Adobeand Aldus.PostScriptisadevice-independentpagedescriptionlanguageinventedbyAdobe. AlongwithAldusPageMaker,thefirstdesktoppublishingapplicationandApples firstaffordable,300-dpilaserprinter,theLaserWriterallrunningonanApple Macintoshtheymadeprofessionaltypesettingfromthedesktopareality.Andthe restishistory.


Typefaces and fonts Adigitalfont,inshort,isapieceofcomputersoftwarethatcontains

acollectionofvectordrawingsalongwithspacingandkerningdatathatcouldbeaccessedthroughthekeyboard.Ofcourse,thesedrawingsareoftenletterswhich,when combinedsensibly,formmeaningfulwords. Afamilyoftypefaceconsistsofanumberofvariantfontsthatshareacommondesign. AstandardtypefacesuchasTimesRomanmayconsistofaregular,anditalic,abold andabolditalic;moreextensivefamiliesmayconsistofanumberofweightsand widthswithrespectiveitalics,smallcapsandexpertfonts.Displayorpictorialtypefaces maysimplybesinglefonts.


Keith Chi-hang Tam 2003 06 All rights reserved.

Character and glyph Acharacterreferstothesmallestsemanticunitofalanguageor

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.

page 2 of 9 tam digital typography : a primer

Making fonts FontsaremadeusingfontcreationsoftwareprogramssuchasMacromedia

FontographerandFontLab.FontLabisoneofthemostsophisticatedfontcreation programsthatprovidedrawingtools,spacingandkerningfeatures,scriptingcapabilitiesandOpenTypebuildingtools.TheresultcouldbeexportedasType1,TrueTypeand OpenTypeformatfonts.


Font licensing and copyright Mostfontscannowbeboughtonlineanddownloadedin-

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

A glyph drawing in PostScript Type 1 format, using bzier (cubic) curves.

page 3 of 9 tam digital typography : a primer

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.

designprofessionalsandgeneralusersalike.OpenTypeisaformatjointlydeveloped byAdobeandMicrosoftinthe1990stouniteandstandardizetheType1andTrueType formats.OpenTypeisessentiallyawrapperforType1andTrueTypefonts.Oneofthe mainadvantagesofOpenTypeisitscross-platformcompatibilityasingleOpenType fontcanbeusedinbothWindowsandMacOSplatforms,licensingpermitting.Through theuseofUnicodeencoding,anOpenTypefontcanhaveasmanyas65,000characters inasinglefontfile.Thislargecharactersetisenoughforeveryconceivablelanguage intheworld,includingChinese.Thislargecharactersetalsoallowssophisticatedtypographicfeaturestobeaccessedfromasinglefontfileforexamplesmallcaps,differenttypesoffigures,ligatureswithouthavingtouseadditionalfontfiles.


In the InDesign font menu, font formats are denoted by an icon next to the font name. The red a denotes PostScript Type 1, TT for TrueType and O for OpenType.

AdobesProfontsarefontswithhugecharactersetsthatincludeadvancedtypographicfeatureslikesmallcaps,swashcharacters,alternatecharacters,ligatures,ordinalnumbersandletters,fractions,ornaments,aswellasGreekandCyrilliccharacters, allcontainedinasinglefontfile.Theseadvancedfeatures,thoughattractive,areonly supportedinathelatestversionsofAdobeapplications.Otherprograms,forexample QuarkXPress,allowyoutouseOpenTypefontsbutonlygrantyouaccesstotheirfirst 256characters,sononeoftheadvancedfeaturesmaybeused.

page  of 9 tam digital typography : a primer

Font management FontsareusuallystoredintheSystemFolderunderMacOS9orinsev-

eralconfusinglocationsunderMacOSX.Thebestwaytoorganizethem(whenyouhave asizablelibrary)istouseafontmanagementprogramsuchasSuitcaseorFontReserve. Theseprogramsallowyoutoorganizefontsintofoldersandactivateanddeactivate thematwill.Fontscouldalsobeautomaticallyloadedasdocumentsareopened. MacOSXPanther10.3.5orabovecomeswithafontmanagementutilitycalled FontBookwhichmightbegoodenoughformosttasks.

Advanced typography
Expert typography Inastandardfont,forexamplethesystemfontPalatino,onlyfour

fontvariantsareincluded:aregular,anitalic,aboldandabolditalic.Theseareoften inadequateforprofessionaluse.Fontsforprofessionalsareoftenavailableaslarge familiesconsistingofmanyweights(light,regular,bold,semibold,heavy,black)and widths(condensed/expanded).Experttypographicfeaturesareoftenavailableas separateadditionalfontsoftencalledexpertsetsorothernames.WithOpenTypePro fonts,thesefeaturesarebuiltintoasinglefontfileandcouldbeaccessedbychoosing menucommandsinthelatestversionsofAdobeapplications.


Small caps Smallcapsaremorethanscaleddownversionsofthestandardcapitalletters.

Truesmallcapsaredrawntoopticallymatchtheweightoflowercaseletters.Theyare oftenslightlywiderthanregularcapsandaredesignedtobeusedtogether.Standard capitals,ontheotherhand,areoften(notalways)designedtomatchwithlowercase lettersbutnoteachother.Thesmallcapsbuttoninmanylayoutprogramsproducedigitallyscaledsmallcapswhichlookamateurish.

C oranto F aux S mall C apS Coranto True Small Caps


Figures Modernorliningfigures(1234567890)thatsharethesamevisualweightas

0123456789 0123456789 0123456789 0123456789


Proportional oldstyle, proportional lining, tabular lining and tabular oldstyle figures.

capitallettersandlineupneatlyincolumnsareusuallyprovidedasthestandardfigure setinmostfonts.Oldstyleornon-liningfigures(1234567890)arefigureswithascendersanddescendersthatworkmoreharmoniouslywithlowercaselettersincontinuous text.Theseareusuallyprovidedinexpertfonts,smallcapsorold-stylefigure(osf) fonts,butsomefonts(suchasmostFontFontfonts)havethemasstandard.Thesefiguresdontlineupneatlyincolumnsintabularwork.OpenTypeProfontshaveafurther twosetsliningoldstyleandproportionalliningwhichcouldbeuseful.Figures mightalsocomeassuperiorsorinferiors(12345678901234567890)usefulforreferencesfor footnotes.


Fractions SomeExpertorProfontscomewithsetsofopticallyadjustedfractionsorallow

youtobuildyourown.FractionsrequiresimilaropticaladjustmentstoSmallCaps.A solidus()shouldbeused,notavirgule(/),thestandardslash.

98100not98/100

page  of 9 tam digital typography : a primer

Alternates and swash characters Thesearespecialcharactersthataremightbejustabit

differentfromtheusualcharacterset,archaicormoreexuberant.Swashcharactersare sometimesprovidedforitalicfonts.

RAM etn
Ligatures Ligaturesaretwoormorelettersthataredesignedasonecharacter.The

ampersandisthemostcommonligature(et,Latinforand),andfiandflligaturesare providedasstandardformostfonts.Sometimesffiandfflareprovided.Otherunusual ligaturesmightbeprovidedsimplyforvisualpleasure,suchasZuzanaLicksMrsEaves. Othersmightbearchaic,suchasct st h i etcprovidedfortypefaceslikeAdobe CaslonProorWarnockPro.

ffi ffl fj ffj ct st h i l


Optical sizes Inthedaysofmetaltype,fontswerecutsizeforsize.Eachsizewasde-

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.

General working practice


Nevertypetwospacesafterperiods.Itissimplyabadhabitcarriedfromthedaysofthe manualtypewriter.Ifyouneedbiggerspaces,usetheemorenspaces(ortabs);ifyouneed smallerspaces,usethinorhairspaces.ThesecanbeaccessedthroughtheType>Insert WhiteSpacemenucommandinInDesign. Donnothitreturntwicebetweenparagraphs.Spacesbetweenparagraphscanbefinely adjustedviaparagraphsettings,byinputtingspacebeforeandspaceaftervalues.Ifyou

page 6 of 9 tam digital typography : a primer

needtoforcealinebreak,useoption+return.Neverusemultiplereturnstoforcepageor columnbreaks.UsetheType>InsertBreakCharactermenucommandtobreakcolumns, framesorpages. Neverusewordspacestoaligntext.Unliketypewriterfonts,whicharemonospaced,most digitalfontsareproportionallyspacedandthereforewontlineupwithwordspaces.Use tabstodefinefixedspaces.

-
Hyphen, en dash and em dash

Donotusetheauto/defaultleading.Changeyourlineincrementsdependingonlinelength, pointsizeandtypefacechosentoensurecomfortablereading. Neverusesingleordoublehyphensasdashes.Thisisanotherhangoverfromthemanual typewriter.UseendashesliketheydointheUK,oremdasheslikewedoinNorth America.Thinspacesareoftenneededateithersideoftheemdash.(OntheMac,the keystrokefortheendashisoption+hyphen,andfortheemdash,option+shift+hyphen.) Neverusecapsorunderlinetoemphasizewords.Yetanotherhangoverfromthemanual typewriter.Useitalic,smALLcAps,boldorchangefontorcolour.

Faux italic type True italic type


Faux bold True Bold

Donotuseasterisks(*)orhyphens(-)asbullets.Thebulletcharacter()couldbeaccessed bypressingoption+8.Pressoption+9foramidpoint(). Useaword-processingprogramtoinputyourtext.Itisbetternottotypedirectlyinalayout program.Aword-processingprogramisdesignedforwriting.Itmakescountingwords, editing,checkingspelling(orgrammar)somucheasierandletsyoufocusonwhatyoure writingratherthanhowitlooks. Makesureyouhavetrueitalicandboldfontsinstalledonyoursystem.Neverdigitally emboldenorslanttype.InDesigndoesnotallowyoumakefauxitalicorboldtype,whichis goodnews.

70% Digitally condensed Myriad Myriad Condensed typeface

Donotartificiallycondenseorexpandtype,unlessyouknowthefontsaredesignedwith theflexibilityfordistortioninmind,forexampleGerardUngersCorantoandVesta.Use speciallydesignedcondensedorexpandedversionsofatypefacewhereavailable.

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

page  of 9 tam digital typography : a primer

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

Aliasing and anti-aliasing Untilfairlyrecently,mostcomputerswereonlycapableofdis-

playingaliased(bitmapped)textonscreen.Thepixelsareeitherturnedonorturned off.Thismadetypelookveryjaggedonscreen.ExpertlyhintedTrueTypefonts(see below)shouldalwaysbeusedforaliasedtext. Anti-aliasingisamethodtogivetheillusionofsmoothoutlinesthroughtheuseof varyinglevelsofgraysurroundingtheoutlineofthecharacter.Anti-aliasingtendsto workbetteratlargersizes,sincethefuzzyoutlinecouldresultineyestrainandfatigue. Atsmallersizesitmightstillbebesttoavoidtheuseofanti-aliasing.Thiscouldbe turnedoffbelowapreferredpointsizeatthesystemlevel.

aliased (bitmap)

anti-aliased (grayscale)

ClearType and CoolType ClearTypeandCoolTypearenewsub-pixelfontrenderingtech-

nologiesdevelopedbyMicrosoftandAdoberespectively.Differentcolourvaluesatthe sub-pixellevelareused(insteadofsimplytintsofthefontcolour)togiveacrisperimageofthecharacter.ThistechnologyisbuiltintothecurrentversionofAdobeAcrobat andMicrosoftse-bookReader,butonlyworkonLcDdisplays.

page  of 9 tam digital typography : a primer

Hinting Inshort,hintingisawaytoinstructthecomputerexactlywhichpixelsare

turnedoninordertogivethebestpossiblebitmapimageofthecharactersatsmall sizesatlowresolution.Theoutlineofthecharactersismodifiedbymathematicalinstructionsatgivensizes,sothedesiredcombinationofpixelsisturnedon.

These illustrations were taken from the Microsoft Typography website: www.microsoft.com/typography

unhinted

hinted

Currently,themostsophisticatedhintingtechnologyisfoundinTrueTypefonts.Most WindowsandMacintoshsystemfontsareexpertlyhintedtogivetheoptimumqualityandlegibility.Expertlyhintedfontsareabsolutelynecessaryforolderoperating systemsthatdonotsupportanti-aliaseddisplayoftype,especiallyforthedisplayof HTmL-basedwebsitesandword-processinginabusinesssetting.Thisisperhapsnot asnecessaryinthelatestversionsoftheMacintoshandWindowsoperatingsystem, sinceanti-aliasingisnowbuilt-in.MostPostscriptType1fonts,orPostscript-flavoured OpenTypefontsareeithernothintedorarehintedpoorly.Avoidusingthesealiasedat smallsizes.


Type for HTML-based websites MostwebpagesaresavedasHTmLpagesanddisplayedin

browsers.HTmLstandsforHyperTextMark-upLanguage,aformatthatallowstextto beassigneddifferentattributesandstructures.HTmLlackssophisticatedlayoutcontrolandthemajorityofthetypographicfeaturesessentialtoprinttypography.Inthe Internetsearlyyears,basicthingslikeleading,pointsize,orevenwhatfontthetext appearsin,couldnotbespecifiedbythedesigner.FinertypographiccontrolisnowpossiblewiththeintroductionofCascadingStylesheets(css,seebelow). ForHTmL-basedwebsitesitisbest(ifnotessential)tostickwithsystemfontsthatare commontoboththeMacintoshandtheWindowsplatforms.Alistoffontsindescendingorderofpreferencecouldbespecifiedbythedesigner,sothatifafontisnotavailableontheviewerssystemtherearebackupstofallbackon.Themostcommonaswell asperhapsthemostlegiblefontforon-screenreadingisMatthewCartersVerdana. Thehighlegibilityisachievedthroughthelargex-height,opencounters,widecharacter widths,widespacingandsimpleshapes.


Cascading Stylesheet (CSS) CascadingStylesheetsareessentiallylikestylesheetsin

InDesignorQuarkXPress.ThesearepredefinedstylesthatcouldbeappliedtoHTmL pages,allowingtheseparationofcontentandpresentation.StandardHTmLtags(like bodytext,paragraphs,differentlevelsofheadings,tablecells,etc)couldbemodified andgivenmoreelaboratetypographicattributesthanwhatstandardHTmLarecapable

page 9 of 9 tam digital typography : a primer

of.Leading,typesize,case,letterspacing,colour,alignment,aswellassophisticated layoutandpositioningcouldallbespecifiedusingCascadingStylesheets.Cascading StylesheetscouldbeaddedtoindividualHTmLpages,ormultipleHTmLpagescouldbe linkedtoanexternalstylesheetfile(.css).Eveninteractivityactions(links,rollovers, etc)canbespecifiedincss.


Web typography : some pointers

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

activepresentations,itisnotnecessarytostickwithcommonsystemfonts,sincefonts couldbeembeddedintoFlashfiles.Itisadvisabletosticktoaliased(bitmapped)type forsmallsizes,andthereareplentyofcontemporarytypefaces(somearefree)expertly hintedforFlashusethatarehighlylegibleevenatextremelysmallsizes(forexample 8px).UnibodybyUnderware<www.underware.nl>isagoodexampleanditsfree.For largertypeitisperfectlyfinetoturnonanti-aliasing.<atomicmedia.net>offerssome interestingbitmapfontsforpurchasing.

You might also like