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

1. T Updated for Winter 2011/2012 User Interface Design Course (NUR) Adam Sporka, CDGI / ČVUT FEL YPOGRAPHY

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. http://www.typomaps.net/

5. http://www.axismaps.com

6. FONTS AND TYPEFACES

7. 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, … Basic terminology 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-snow http://shimona.bandcamp.com/track/o-come-o-come-emmanuel http://macdigibeats.bandcamp.com/album/digi-step-lp NUR 2010

18. WHAT’S YOUR BUSINESS, STRANGER?

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 NUR 2010

21. Technology

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://mobilefonts.sourceforge.net/ http://growboxbox.org/doku.php/lcd 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 berendered at the pixel level • Not always followed http://en.wikipedia.org/wiki/File:Circle_and_quadratic_bezier.svg NUR 2010

27. Problem: Features of the font are often below resolution of the target bit map Solution: Prescription defining how control points should be modified Virtual machine Hinting language http://commons.wikimedia.org/wiki/File:Font-hinting-example.png http://spectrum.ieee.org/computing/software/the-technology-of-text NUR 2010

28. Sub-pixels of common LCD screens: Anti-aliasing vs Sub-pixelrendering: Font rendering: Human sight: Horizontal resolution is higher than vertical resolution Sub-pixel Rendering http://en.wikipedia.org/wiki/File:ClearTypePixels.svg http://en.wikipedia.org/wiki/File:Antialias-vrs-Cromapixel.png 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. 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 Constrained Typography 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 NUR 2010

33. INTERNATIONAL TYPOGRAPHY

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 NUR 2010

45. Typography in UI Design

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 message has been delivered. Your message has been delivered. NUR 2010

50. Example: Severity THE AUTODESTRUCTION SEQUENCE HAS BEEN ACTIVATED THE AUTODESTRUCTION SEQUENCE HAS BEEN ACTIVATED NUR 2010