59
T Adam J. Sporka Návrh uživatelského rozhraní Winter 2010/2011 YPOGRAPHY
TAdam J. Sporka
Návrh uživatelského rozhraní
Winter 2010/2011
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
NUR 2010
(4)
Some Examples
http://www.typomaps.net/ http://www.axismaps.com http://www.hrubasy.cz
FONTS AND TYPEFACES
NUR 2010
(6)
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
(7)
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
(8)
Serif Fonts
“Extra strokes coming of the letters.” Suitable for printed material
Examples:
– Times New Roman
– Georgia– Garamond
NUR 2010
(9)
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
(10)
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
(11)
Helvetica
Sans serif font Max Miedinger and Eduard Hoffmann, 1957 Considered very legible Expensive Common usage
– Public signage (NY Subway)– Artifacts in modern design
How to tell apart Helvetica and Arial:– http://www.ilovetypography.com/2007/10/06/arial-versus-helvetica/
NUR 2010
(12)
DISPLAY FONTS Examples
Goals– To attract– To deliver a message “this is different”– Very often abused
NUR 2010
(13)
Typography Sets Expectations
NUR 2010
(14)
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.”
WHAT’S YOUR BUSINESS, STRANGER?
NUR 2010
(16)
Nokia Font
By Eric Spiekermann
Used universallyfor all text communication
http://pingmag.jp/2005/10/31/erik-spiekermann-typography-and-design-today/
NUR 2010
(17)
Anatomy of Type
Good overview of terminology here:– Font Anatomy Wallpaper– http://font.is/?p=1268
Technology
NUR 2010
(19)
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
(20)
Bit Map Fonts
http://growboxbox.org/doku.php/lcd
http://mobilefonts.sourceforge.net/
NUR 2010
(21)
Fonts on Vintage Computers and Terminals
Typically mono-spaced
http://www.spicypixel.net/2008/01/16/fontpack-royalty-free-bitmap-fonts/
NUR 2010
(22)
Outline Fonts
Geometric description– Boundaries of the glyphs– Typically represented as lines or curves
Typical pipeline
Curves > Rasterization > Bitmap Display
NUR 2010
(23)
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
(24)
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
(25)
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
(26)
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
(27)
Constrained Typography
NUR 2010
(28)
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
(29)
Constrained Typography
http://adam.sporka.eu/wiki/doku.php?id=web:for_fun#segment_display_layout
INTERNATIONAL TYPOGRAPHY
NUR 2010
(31)
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
(33)
Background
Alphabet itself sets the mood and expectations
NUR 2010
(34)
Non-Latin Alphabets
Greek, Cyrillic– Individual letters
Arabic, Hebrew– No lower/upper case distinction – Right-to-left direction
NUR 2010
(35)
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
(36)
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
(37)
How Do Different Alphabets Blend?
Less specific shapes More flexible
More specific shapes Less flexible
ABCDWXYZ
abcdwxyz
αβγδφχψω
АБВГЖЭЮЯ
ΑΒΓΔΦΧΨΩ
абвгжэюя
בדזמנקל
على الله علم هو
სტანდარტული
उसका� हो�ना�
第二次大戦後は
座著名的旅游城市
NUR 2010
(38)
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
(39)
Alphabet Design
NUR 2010
(40)
Alphabet Design
Typography in UI Design
NUR 2010
(42)
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
(43)
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
(44)
Typography in UI Design
Where are we NOT as constrained?– Computer games– Multimedia– Web pages
Design choices:– Selection of fonts– Screen layouts
NUR 2010
(45)
Example: Trustworthiness
Your messagehas been delivered.
Your messagehas been delivered.
NUR 2010
(46)
Example: Severity
THE AUTODESTRUCTIONSEQUENCE HAS BEEN
ACTIVATED
THE AUTODESTRUCTIONSEQUENCE HAS BEEN
ACTIVATED
NUR 2010
(47)
Example: MySpace Widgets
http://www.easymyspace.com
NUR 2010
(48)
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
(49)
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
(50)
Web Page Typography: Horizontal Motion
Kerning
Stretching the space– Be careful!– Can’t leap too much!
http://webtypography.net/toc/
NUR 2010
(51)
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
(52)
Web Page Typography: Font Size
Maintain a “rhythm” in choosing the font sizes
Choose the font size wisely– Use relative sizes (as opposed to absolute pixel values)– Larger fonts for the elderly– Smaller fonts for the teenagers (privacy issues)
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
(53)
Web Page Typography
A tutorial– http://webtypography.net/toc
How a font will look on a screen?– http://webfontspecimen.com/demo/
NUR 2010
(54)
International Web Typography
Code level– Do specify the code page– Use UTF-8
CJK: High complexity of characters– “Need more pixels”– Less scalable
一七两乾亹劘龗
NUR 2010
(55)
CJK Kerning
White space between characters should be balanced with the white space inside the characters
http://www.lukew.com/ff/entry.asp?111
Č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
(58)
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
(59)
Future
Increasing screen resolution– Preference for sans serif fonts might change
Increasing capacity of typographic devices– 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
