Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms...

Interface Design IInterface Design I

TYPOGRAPHYTYPOGRAPHY

Origins of the AlphabetOrigins of the Alphabet PictogramsPictograms IdeogramsIdeograms Phoenician AlphabetPhoenician Alphabet Greek AlphabetGreek Alphabet Roman AlphabetRoman Alphabet

PictogramsPictograms

Symbol represents an object Symbol represents an object such as OX or HOUSEsuch as OX or HOUSE

IdeogramsIdeograms

Represents an IdeaRepresents an Idea Today's example would be Today's example would be

WHIMS symbolsWHIMS symbols

Phoenician AlphabetPhoenician Alphabet

Developed 15 century BCDeveloped 15 century BC Each symbol represents a wordEach symbol represents a word

Greek AlphabetGreek Alphabet

Modified the Phoenician Alphabet Modified the Phoenician Alphabet 1000 BC1000 BC

No vowels until they added 5 No vowels until they added 5 vowelsvowels

Formalized about 403 BCFormalized about 403 BC

Roman AlphabetRoman Alphabet

Adopted from the Greek AlphabetAdopted from the Greek Alphabet 13 letters unchanged13 letters unchanged

ABEHIKMNOTXYZABEHIKMNOTXYZ 8 modified8 modified

CDGLPRSVCDGLPRSV 2 added2 added

FQFQ 23 total23 total

Lowercase LettersLowercase Letters

Introduced in the middle ages Introduced in the middle ages with scribes.with scribes.

Two forms - one from Italy and Two forms - one from Italy and the other from Germanythe other from Germany

German version later developed German version later developed for the Gutenberg Pressfor the Gutenberg Press

Serif or San-SerifSerif or San-Serif

There are many means classify There are many means classify fonts.fonts.

The first is if the font is serif or The first is if the font is serif or san-serifsan-serif

San-Serif San-Serif AA

Serif Serif AA

Five Families Of TypeFive Families Of Type

Old StyleOld Style GaramondGaramond

TransitionalTransitional BaskervilleBaskerville

ModernModernBodoniBodoni

EgyptianEgyptian Century ExpandedCentury Expanded

ContemporaryContemporary HelveticaHelvetica

UPPERCASE lowercaseUPPERCASE lowercase

ABC abcABC abc

Measuring TypeMeasuring Type

Use points and picasUse points and picas 6 picas to an inch6 picas to an inch 12 points to a pica 12 points to a pica

SPACINGSPACING

Word SpacingWord Spacing Letter SpacingLetter Spacing

TrackingTracking KerningKerning

Leading (baseline to baseline)Leading (baseline to baseline) enen emem

WeightWeight

LightLight RegularRegular BoldBold Extra BoldExtra Bold

CondensedCondensed ExtendedExtended

Variation in Stroke or AccentVariation in Stroke or Accent

Variation in strokeVariation in stroke Variation in Accent Variation in Accent

General RuleGeneral Rule

The larger your type the closer The larger your type the closer the trackingthe tracking

The smaller your type the wider The smaller your type the wider the tracking. (Business Cards)the tracking. (Business Cards)

Relationship between Tracking Relationship between Tracking and Leading (the more tracking and Leading (the more tracking the more leading)the more leading)

Corporate SymbolsCorporate Symbols

A corporate symbol is a device used A corporate symbol is a device used to market and identify a Corporation.to market and identify a Corporation.

Deals with direction, goals, valuesDeals with direction, goals, values Increase awarenessIncrease awareness Instill prideInstill pride

Corporate SymbolsCorporate Symbols

MonogramsMonograms LogosLogos LogotypesLogotypes Symbols and LogotypesSymbols and Logotypes

Corporate Symbols UsageCorporate Symbols Usage

Business Cards (BC) Business Cards (BC) Letterheads, envelopesLetterheads, envelopes

Web Sites, brochures, flyers Web Sites, brochures, flyers catalogues, planes, trains and catalogues, planes, trains and automobiles, buildingsautomobiles, buildings

Needs to be easily recognized Needs to be easily recognized at any size.at any size.

Corporate Identification Corporate Identification ManualManual

A manual that describes the A manual that describes the correct usage of the sysmbol correct usage of the sysmbol and non appropriate usage.and non appropriate usage.

Request this document when Request this document when ever developing a site for a ever developing a site for a company.company.

Provides images that are ready Provides images that are ready to use.to use.