interface design i. typography origins of the alphabet origins of the alphabet pictograms pictograms...
TRANSCRIPT
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.