slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011 PowerPoint Presentation
Download Presentation
Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011

Loading in 2 Seconds...

play fullscreen
1 / 59

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


  • 113 Views
  • Uploaded on

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:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
T

Adam J. Sporka

Návrhuživatelského rozhraní

Winter 2010/2011

YPOGRAPHY

typography
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

typography1
Typography
  • Micro-typography
    • Typefaces, fonts
    • Spacing, leading, …
  • Macro-typography
    • Overall text-structure
    • Information architecture

NUR 2010

some examples
Some Examples
  • http://www.typomaps.net/
  • http://www.axismaps.com
  • http://www.hrubasy.cz

NUR 2010

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, …

Basic terminology

NUR 2010

font categories
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

serif fonts
Serif Fonts
  • “Extra strokes coming of the letters.”
  • Suitable for printed material
  • Examples:
    • Times New Roman
    • Georgia
    • Garamond

NUR 2010

times roman times new roman
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

sans serif fonts
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

helvetica
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

display fonts
DISPLAY FONTS
  • Examples
  • Goals
    • To attract
    • To deliver a message “this is different”
    • Very often abused

NUR 2010

typography sets expectations1
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

nokia font
Nokia Font
  • By Eric Spiekermann
  • Used universallyfor all text communication

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

NUR 2010

anatomy of type
Anatomy of Type
  • Good overview of terminology here:
    • Font Anatomy Wallpaper
    • http://font.is/?p=1268

NUR 2010

bit map fonts
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

bit map fonts1
Bit Map Fonts

http://mobilefonts.sourceforge.net/

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

NUR 2010

fonts on vintage computers and terminals
Fonts on Vintage Computers and Terminals
  • Typically mono-spaced

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

NUR 2010

outline fonts
Outline Fonts
  • Geometric description
    • Boundaries of the glyphs
    • Typically represented as lines or curves
  • Typical pipeline
  • Curves > Rasterization > Bitmap Display

NUR 2010

truetype
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

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

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

Sub-pixel Rendering

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

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

NUR 2010

constrained typography
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

constrained typography2
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

constrained typography3
Constrained Typography

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

NUR 2010

background
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

background1
Background
  • Alphabet itself sets the mood and expectations

NUR 2010

non latin alphabets
Non-Latin Alphabets
  • Greek, Cyrillic
    • Individual letters
  • Arabic, Hebrew
    • No lower/upper case distinction
    • Right-to-left direction

NUR 2010

non latin alphabets1
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

how do different alphabets blend
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

how do different alphabets blend1
How Do Different Alphabets Blend?

 Less specific shapes

 More flexible

More specific shapes 

Less flexible 

ABCDWXYZ

उसका होना

abcdwxyz

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

ΑΒΓΔΦΧΨΩ

בדזמנקל

第二次大戦後は

αβγδφχψω

座著名的旅游城市

АБВГЖЭЮЯ

სტანდარტული

абвгжэюя

NUR 2010

how do different alphabets blend2
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

typography in ui design1
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

typography in ui design2
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

typography in ui design3
Typography in UI Design
  • Where are we NOT as constrained?
    • Computer games
    • Multimedia
    • Web pages
  • Design choices:
    • Selection of fonts
    • Screen layouts

NUR 2010

example trustworthiness
Example: Trustworthiness

Your message

has been delivered.

Your message

has been delivered.

NUR 2010

example severity
Example: Severity

THE AUTODESTRUCTION

SEQUENCE HAS BEEN

ACTIVATED

THE AUTODESTRUCTION

SEQUENCE HAS BEEN

ACTIVATED

NUR 2010

example myspace widgets
Example: MySpace Widgets

http://www.easymyspace.com

NUR 2010

general typographic rules
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

web page typography horizontal motion
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

web page typography horizontal motion1
Web Page Typography: Horizontal Motion
  • Kerning
  • Stretching the space
    • Be careful!
    • Can’t leap too much!

http://webtypography.net/toc/

NUR 2010

web page typography vertical motion
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

web page typography font size
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

web page typography
Web Page Typography
  • A tutorial
    • http://webtypography.net/toc
  • How a font will look on a screen?
    • http://webfontspecimen.com/demo/

NUR 2010

international web typography
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

cjk kerning
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

esk hladk sazba
Č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. 2010 24.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 °C10°
esk hladk sazba1
Č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á
kinetic typography examples
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

future
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

NUR 2010