Updated for Winter 2011 /201 2 User Interface Design Course (NUR) Adam Sporka , CDGI / ČVUT FEL

TUpdated for Winter 2011/2012

User Interface Design Course (NUR)

Adam Sporka, CDGI / ČVUT FEL

YPOGRAPHY

NUR 2010

(2)

Typography

An art and technique– Arranging type into text and meta-

text graphic compositions– Design of the type glyphs

Important wherever text is a part of the user interface

Impact on:– Readability, accessibility, usability– Aesthetic feel– Expectations

http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg

NUR 2010

(3)

Typography

Micro-typography– Typefaces, fonts– Spacing, leading, …

Macro-typography– Overall text-structure– Information architecture

http://www.typomaps.net/

http://www.axismaps.com

FONTS AND TYPEFACES

NUR 2010

(7)

Basic terminology

Typeface (font family)– One or more fonts– Stylistic unity

• Fonts vary in weight, width, etc. but not in design

Font– Coordinated set of glyphs– Covering a character set

Glyph– Individual mark on a written

medium– Contributes to meaning what

was written

Grapheme– Linguistic term– Written element of a

language– Letter, sign, punctuation, …

NUR 2010

(8)

Font Categories

Numerous classifications– By features

• Serif fonts, Sans serif fonts, Display fonts, …

– By age• Black letter (gothic script; cca. 1150 – 1800s)

• Dynamic antique (18th century)

• Transitional antique

• …

Type Classification e-book– Jacob Cass, http://justcreativedesign.com

NUR 2010

(9)

Serif Fonts

“Extra strokes coming of the letters.” Suitable for printed material

Examples:

– Times New Roman

– Georgia– Garamond

NUR 2010

(10)

Times Roman (Times New Roman)

1931 Cameron Latham (Monotype Corp., US) Commissioned by The Times newspaper (UK) One of the most ubiquitous typefaces in history

Times New Roman “more funny” than Arial– Juni, S., Gross, J.S. Emotional and persuasive perception of

fonts. Percept Mot Skills. 2008 Feb;106(1):35-42.– Higher power of satirical text, when set in Times New Roman

as opposed to Arial.

NUR 2010

(11)

Sans Serif Fonts

Arial, Helvetica, Droid Sans Serif, Univers

Smaller resolution needed– Display fonts– Fine print

Do not guide the eye as well– “20 % less efficient”– Need more leading (spaces between lines)

NUR 2010

(12)

Helvetica

Sans serif font Max Miedinger and Eduard Hoffmann, 1957 Considered very legible Expensive

– E.g.: http://www.fontshop.com/fonts/downloads/linotype/helvetica_complete_pack/

Common usage– Public signage (e.g. NY subway network)– Artifacts in modern design

NUR 2010

(13)

Helvetica vs. Arial

How to tell them apart:

http://www.ilovetypography.com/2007/10/06/arial-versus-helvetica/

NUR 2010

(14)

DISPLAY FONTS Examples

– Colonna MT– Jokerman– Comic Sans

Goals– To attract– To deliver a message “this is different”– Very often abused

NUR 2010

(15)

Typography Sets Expectations

NUR 2010

(16)

Typography Sets Expectations

“Modern fonts. Modern typography. This is new, this is current.”

“They were using this font in 1990s. That can’t possibly work today.”

“Ah, this seems like a console app. I will probably not be able to use the mouse.”

NUR 2010

(17)

Guess the Genre

http://aa360.bandcamp.com/track/stack-em-up http://downlikesilver.bandcamp.com/track/lazy-snowhttp://shimona.bandcamp.com/track/o-come-o-come-emmanuelhttp://macdigibeats.bandcamp.com/album/digi-step-lp

WHAT’S YOUR BUSINESS, STRANGER?

NUR 2010

(19)

Nokia Font

By Eric Spiekermann

Used universallyfor all text communication

http://pingmag.jp/2005/10/31/erik-spiekermann-typography-and-design-today/

NUR 2010

(20)

Anatomy of Type

Good overview of terminology here:– Font Anatomy Wallpaper– http://font.is/?p=1268

Technology

NUR 2010

(22)

Bit Map Fonts

Individual characters defined by bit maps Typesetting = arranging bit maps into a larger

bitmap Resolution

– Typically 1-bit– Color bitmaps on entertainment-oriented devices

Fast to render Impossible (or difficult) to scale

NUR 2010

(23)

Bit Map Fonts

http://growboxbox.org/doku.php/lcd

http://mobilefonts.sourceforge.net/

NUR 2010

(24)

Fonts on Vintage Computers and Terminals

Typically mono-spaced

http://www.spicypixel.net/2008/01/16/fontpack-royalty-free-bitmap-fonts/

NUR 2010

(25)

Outline Fonts

Geometric description– Boundaries of the glyphs– Typically represented as lines or curves

Typical pipeline

Curves > Rasterization > Bitmap Display

NUR 2010

(26)

TrueType

Late 1980s, Apple computer Geometric description

– Quadratic Bézier splines

Explicit bitmaps– How different sizes should be

rendered at the pixel level– Not always followed

http://en.wikipedia.org/wiki/File:Circle_and_quadratic_bezier.svg

NUR 2010

(27)

Hinting language

Problem:– Features of the font are

often below resolution of the target bit map

Solution:– Prescription defining

how control points should be modified

– Virtual machinehttp://commons.wikimedia.org/wiki/File:Font-hinting-example.png

http://spectrum.ieee.org/computing/software/the-technology-of-text

NUR 2010

(28)

Sub-pixel Rendering

Sub-pixels of common LCD screens:

Anti-aliasing vs Sub-pixelrendering:

Font rendering:

Human sight: Horizontal resolution is higher than vertical resolution

http://en.wikipedia.org/wiki/File:Antialias-vrs-Cromapixel.png

http://en.wikipedia.org/wiki/File:ClearTypePixels.svg

NUR 2010

(29)

Constrained Typography

Single-purpose devices– Vending machines– Public transit information systems

Limited display technology – Segment fonts– LED matrix fonts, …

http://www.aegmis.de/PRODUKTE/GEAVISIONELEMENTS/SEGMENT/tabid/587/language/en-US/Default.aspx

NUR 2010

(30)

Constrained Typography

NUR 2010

(31)

Constrained Typography

Bit Map Nokia Font Requirements:

– Legible– Immediately recognizable

Contrast:– Vertical stress, two pixels – One pixel across

The vector font inspired by the bit map font– Squareish bit maps

http://pingmag.jp/2005/10/31/erik-spiekermann-typography-and-design-today/

NUR 2010

(32)

Constrained Typography

http://adam.sporka.eu/wiki/doku.php?id=web:for_fun#segment_display_layout

INTERNATIONAL TYPOGRAPHY

NUR 2010

(34)

Background

Internationalization– Still a problem, even with the UNICODE– Fonts often do not cover all languages

• See language list in http://en.wikipedia.org/wiki/Human

– Fall-back to default fonts

Translation of a resource is not enough– Different rules of typesetting– Including direction of writing

NUR 2010

(36)

Background

Alphabet itself sets the mood and expectations

NUR 2010

(37)

Non-Latin Alphabets

Greek, Cyrillic– Individual letters

Arabic, Hebrew– No lower/upper case distinction – Right-to-left direction

NUR 2010

(38)

Non-Latin Alphabets

CJK fonts (Chinese, Japanese, Korean)– 100,000s of characters– Not that many fonts generally available (very expensive

to develop)– Almost non-proportional

NUR 2010

(39)

CJK Kerning

White space between characters should be balanced with the white space inside the characters

http://www.lukew.com/ff/entry.asp?111

NUR 2010

(40)

How Do Different Alphabets Blend?

Ut cursus, magna id consequat, ipsum urna blandit metus, viverra egestas sem augue nec metus. То заплачет, как дитя. Etiam viverra tellus commodo orci laoreet sed tempus lectus pellentesque.

Ut cursus, magna id consequat, ipsum urna blandit metus, viverra egestas sem augue nec metus. То заплачет, как дитя. Etiam viverra tellus commodo orci laoreet sed tempus lectus pellentesque.

Ut cursus, magna id consequat, ipsum urna blandit metus, viverra egestas sem. То заплачет, как дитя. Etiam viverra tellus commodo orci laoreet sed tempus lectus pellentesque.

NUR 2010

(41)

How Do Different Alphabets Blend?

Less specific shapes More flexible

More specific shapes Less flexible

ABCDWXYZ

abcdwxyz

αβγδφχψω

АБВГЖЭЮЯ

ΑΒΓΔΦΧΨΩ

абвгжэюя

בדזמנקל

على الله علم هو

სტანდარტული

उसका� हो�ना�

第二次大戦後は

座著名的旅游城市

NUR 2010

(42)

How Do Different Alphabets Blend?

Transport for London in English:– http://www.tfl.gov.uk/home.aspx

… Arabic:– http://www.tfl.gov.uk/tfl/languages/arabic/

… Gujarati:– http://www.tfl.gov.uk/tfl/languages/gujarati/

NUR 2010

(43)

Alphabet Design

NUR 2010

(44)

Alphabet Design

Typography in UI Design

NUR 2010

(46)

Typography in UI Design

Performance, Legibility, Fatigue– Sans Serif fonts said to be 20 – 30 % slower to read– Low vs. high contrast

Genre, style– Expectations– Formal? Casual?– Traditional? Progressive?

Brand– A font (or their combination) establishes an identity

NUR 2010

(47)

Typography in UI Design

Visual design constrained by the platform

Modern platforms often define ways how to format the text– Mac OS X– MS Windows– Android

All applications should follow the same philosophy– Things can go wrong, but not as much…

NUR 2010

(48)

Typography in UI Design

Where are we NOT as constrained?– Computer games– Multimedia– Web pages

Design choices:– Selection of fonts– Screen layouts

NUR 2010

(49)

Example: Trustworthiness

Your messagehas been delivered.

Your messagehas been delivered.

NUR 2010

(50)

Example: Severity

THE AUTODESTRUCTIONSEQUENCE HAS BEEN

ACTIVATED

THE AUTODESTRUCTIONSEQUENCE HAS BEEN

ACTIVATED

don’t use comic sans

NUR 2010

(52)

Example: MySpace Widgets

http://www.easymyspace.com

NUR 2010

(53)

General Typographic Rules

Know why you use the font(s) you use– Watch out for combinations of fonts of similar

types– Choose fonts that differ more

Maintain a beat

Horizontal Motion Vertical Motion

NUR 2010

(54)

Web Page Typography: Horizontal Motion

Alignment– Left alignment prevalent (Western texts)– Justified paragraphs start appearing

Word Space– Single word spaces between sentences recommended– Elastic (for justified paragraphs)– Fixed (left-align, right-align)

Letter-spacing– Decreases legibility,

e s p e c i a l l y f o r l o w e r c a s e l e t t e r s

NUR 2010

(55)

Web Page Typography: Horizontal Motion

Kerning

Stretching the space– Be careful!– Can’t leap too much!

http://webtypography.net/toc/

NUR 2010

(56)

Web Page Typography: Vertical Motion

Maintain beat and phasein line spacing

How much real estate do we have?– Cell phone screen? Use it up as much as possible– 24” screen? Can afford some white space

http://webtypography.net/toc/

NUR 2010

(57)

Web Page Typography: Font Size

Maintain a “rhythm” in choosing the font sizes

body { font-size:100%; }h1 { font-size:2.25em; /* 16x2.25=36 */ }h2 { font-size:1.5em; /* 16x1.5=24 */ }h3 { font-size:1.125em; /* 16x1.125=18 */ }h4 { font-size:0.875em; /* 16x0.875=14 */ }p { font-size:0.75em; /* 16x0.75=12 */ }

NUR 2010

(58)

Choice of the Font Size

Technical aspect:– Use relative sizes (as opposed to absolute pixel values)– Consider the screen resolution

Age of the users:– Larger fonts for the elderly– Smaller fonts for the teenagers (privacy issues)

Consider the user’s privacy:– Larger letters can be read by somebody behind you

ATMInternational Business Bank

YOUR BALANCE

$1,250

Your balance: $1,250Last account statement: 12/11/11

ATMInternational Business Bank

NUR 2010

(61)

Web Page Typography

A tutorial– http://webtypography.net/toc

How a font will look on a screen?– http://webfontspecimen.com/demo/

NUR 2010

(62)

International Web Typography

Code level– Do specify the code page– Use UTF-8

CJK: High complexity of characters– “Need more pixels”– Less scalable

一七两乾亹劘龗

Česká hladká sazba Jednopísmenná slova „k“, „K“, „v“, „V“, „z“, atd. (kromě „a“)

– Nesmí být na konci řádku. Číselné údaje

– Omezit používání číslic v zápisu přirozené řeči Datum: 24. 11. 201024.11.2010 Tel. čísla: 603 123 456 Čas: 17.35 Cena: 900 Kč € 9,– 9 € Uvozovky a tečky ve větě:

– „Já se vrátím.“– Navštívili jsme „našeho přítele“.

Procenta: 100 % = „sto procent“ 100% = „stoprocentní“ Stupně: –10 °C 10°

Česká hladká sazba

Spojovník (divis; „krátká pomlčka“)– Dělení slov, slovní spojení („česko-německý slovník“)

Pomlčka („dlouhá pomlčka“)– Přestávka v řeči, nedokončená řeč

• „Dej si bacha, nebo – “

– Rozsah hodnot• „bude to trvat 2 – 3 hodiny“

Znaménko mínus– Má mít stejnou šířku jako +– Ne ve všech fontech je pomlčka stejně široká

NUR 2010

(65)

Kinetic Typography Examples

Monty Python: “She’s a witch”– http://www.youtube.com/watch?v=lLe4IIuf9Ew

Inglorious Basterds– http://www.youtube.com/watch?v=5i6Jsxt2sRc

Valve – Still Alive – http://www.youtube.com/watch?v=vzecc6ud1Zw – http://www.youtube.com/watch?v=NCt2nZF2nLk

NUR 2010

(66)

Future

Increasing the screen resolution– Preference for sans serif fonts might change

Increasing computational capacity– More fonts– Better typesetting– Better standards of the web page typography– Heavier use of kinetic typography

Increasing importance of the brand identification– Again, more fonts (in order to distinguish from others)– Font embedding might become more important