3. TYPOGRAPHY

A. DEFINITION

OBJECTIVES

• Communicate, both in context and shape
• Place elements to allow readers understand
• Combine both use and aesthetics
• The success will involve communicating accuratedly

ELEMENTS

• Color, texture, position...
• Alignment, indent, line width and height
• Track, kern, relation with the environment

SKILLS

• Communicate: even without content (logos)
• Structure: guide your eye through reading points
• Identity: it embeds with the idea they transmit, as one
• Aesthetics: but always as a complement

DEFINITIONS

• Gerrit Noordzij: "Write with prefabricated letters"
• Daniel Rodríguez: "Write in deferred"
• Ellen Lupton: "Shape of the language"
• Robert Bringhurst: "Adding durable visual form to language"
• Mathew Carter: "A beautiful amount of letters, not an amount of beautiful letters"

DEFINITIONS

SHAPE

• The form and terminations of characters are defining
• Combining elements inside a character will configure shapes and types

CLASSIFICATIONS

• Different dessigners made various classifications
• Each one of them focused on different characteristics

Untitled Slide

Untitled Slide

Untitled Slide

SHAPE

• The typografy coexists with other elements
• Kern, track, alignment or indent are structural elements
• Also proportion, line height and width condition shape
• Lines, margins, blanks, uppercases, spaces, gaps...

B. dIGITAL USES

PROBLEMS AND LIMITATIONS

• Typography wasn't thst rich in web
• Different sizes and resolutions mean inestability
• Can't justify (not breaking words, 'physical' problems)

PROBLEMS AND LIMITATIONS

• Well, we can do whatever we want... But SEO
• Styles in digital context mean programation (HTML, CSS...)
• Readers need same typeface to see it likeyou do
• And, of course, problems with browsers and different SO

Untitled Slide

Untitled Slide

PROBLEMS AND LIMITATIONS

• Aliasing (due to limited resolution)
• Users can adjust zoom and size
• Note that reading trough digital environments is harder
• Readability on digital screens is more important
• Responsive designs are nice for users, but bad for designers

BUT ALSO THERE ARE SOLUTIONS

• Digital environments allow users to create and spread
• Maybe we work in digital but something that will be printed
• In few years lot of things are technicaly better

Untitled Slide

Untitled Slide

Untitled Slide

Untitled Slide

Untitled Slide

Untitled Slide

Untitled Slide

C. WHAT WE DO NOWADAYS

FOUR YEARS OF EVOLUTION

• Ideas from a SmasingMagazine research
• They sent same questions to 50-top influencer websites
• Did it before, in 2009, so they can compare results

DIFFERENT FONT USES

• In 2009 sans serif dominated digital publications
• In 2013 the ratio is almost paired, but the use changes
• We use sans serifs for headings and serifs in bodies
• Why? Probably because of the richest offer

HEADINGS:SERIF VS SAN SERIF

HEADING FONT USES

DIFFERENT FONT USES

• Among most used in Google Fonts, sans serif rules

Untitled Slide

DIFFERENT FONT USES

• The backgrounds are normaly bright and content dark
• But backgrounds are now darker and content brighter

DIFFERENT FONT USES

• Now headlines are bigger than they were
• In 2009 the average was 28pt, and now 38 pt
• Now bodies are bigger also
• In 2009 the average was 12-14pt, now is 14-16pt

DIFFERENT FONT USES

• Why that change?
• Web effect: distance between readers and screens
• Technical issues: more resolution
• What about portable devices?
• Design trends are about white spaces and clearness

BODY: SERIF VS SANS SERIF

BODY FONT SIZE