1 / 59

Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011

T. Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011. YPOGRAPHY. 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:

ronni
Download Presentation

Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. T Adam J. Sporka Návrhuživatelského rozhraní Winter 2010/2011 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. Some Examples • http://www.typomaps.net/ • http://www.axismaps.com • http://www.hrubasy.cz NUR 2010

  5. FONTS AND TYPEFACES

  6. 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

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

  15. WHAT’S YOUR BUSINESS, STRANGER?

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

  18. Technology

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

  24. 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

  25. 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

  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. 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

  29. Constrained Typography http://adam.sporka.eu/wiki/doku.php?id=web:for_fun#segment_display_layout NUR 2010

  30. INTERNATIONAL TYPOGRAPHY

  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

  32. Background • Alphabet itself sets the mood and expectations NUR 2010

  33. Non-Latin Alphabets • Greek, Cyrillic • Individual letters • Arabic, Hebrew • No lower/upper case distinction • Right-to-left direction NUR 2010

  34. 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

  35. 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

  36. How Do Different Alphabets Blend?  Less specific shapes  More flexible More specific shapes  Less flexible  ABCDWXYZ उसका होना abcdwxyz اللههو علم على ΑΒΓΔΦΧΨΩ בדזמנקל 第二次大戦後は αβγδφχψω 座著名的旅游城市 АБВГЖЭЮЯ სტანდარტული абвгжэюя NUR 2010

  37. 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

  38. Alphabet  Design NUR 2010

  39. Alphabet  Design NUR 2010

  40. Typography in UI Design

  41. 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

  42. 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

  43. Typography in UI Design • Where are we NOT as constrained? • Computer games • Multimedia • Web pages • Design choices: • Selection of fonts • Screen layouts NUR 2010

  44. Example: Trustworthiness Your message has been delivered. Your message has been delivered. NUR 2010

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

  46. Example: MySpace Widgets http://www.easymyspace.com NUR 2010

  47. 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

  48. 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

  49. Web Page Typography: Horizontal Motion • Kerning • Stretching the space • Be careful! • Can’t leap too much! http://webtypography.net/toc/ NUR 2010

More Related