adam j. sporka návrh uživatelského rozhraní winter 2010 /2011
DESCRIPTION
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: - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/1.jpg)
TAdam J. Sporka
Návrh uživatelského rozhraní
Winter 2010/2011
YPOGRAPHY
![Page 2: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/2.jpg)
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
![Page 3: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/3.jpg)
NUR 2010
(3)
Typography
Micro-typography– Typefaces, fonts– Spacing, leading, …
Macro-typography– Overall text-structure– Information architecture
![Page 4: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/4.jpg)
NUR 2010
(4)
Some Examples
http://www.typomaps.net/ http://www.axismaps.com http://www.hrubasy.cz
![Page 5: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/5.jpg)
FONTS AND TYPEFACES
![Page 6: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/6.jpg)
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, …
![Page 7: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/7.jpg)
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
![Page 8: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/8.jpg)
NUR 2010
(8)
Serif Fonts
“Extra strokes coming of the letters.” Suitable for printed material
Examples:
– Times New Roman
– Georgia– Garamond
![Page 9: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/9.jpg)
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.
![Page 10: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/10.jpg)
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)
![Page 11: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/11.jpg)
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/
![Page 12: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/12.jpg)
NUR 2010
(12)
DISPLAY FONTS Examples
Goals– To attract– To deliver a message “this is different”– Very often abused
![Page 13: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/13.jpg)
NUR 2010
(13)
Typography Sets Expectations
![Page 14: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/14.jpg)
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.”
![Page 15: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/15.jpg)
WHAT’S YOUR BUSINESS, STRANGER?
![Page 16: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/16.jpg)
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/
![Page 17: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/17.jpg)
NUR 2010
(17)
Anatomy of Type
Good overview of terminology here:– Font Anatomy Wallpaper– http://font.is/?p=1268
![Page 18: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/18.jpg)
Technology
![Page 19: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/19.jpg)
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
![Page 20: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/20.jpg)
NUR 2010
(20)
Bit Map Fonts
http://growboxbox.org/doku.php/lcd
http://mobilefonts.sourceforge.net/
![Page 21: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/21.jpg)
NUR 2010
(21)
Fonts on Vintage Computers and Terminals
Typically mono-spaced
http://www.spicypixel.net/2008/01/16/fontpack-royalty-free-bitmap-fonts/
![Page 22: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/22.jpg)
NUR 2010
(22)
Outline Fonts
Geometric description– Boundaries of the glyphs– Typically represented as lines or curves
Typical pipeline
Curves > Rasterization > Bitmap Display
![Page 23: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/23.jpg)
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
![Page 24: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/24.jpg)
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
![Page 25: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/25.jpg)
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
![Page 26: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/26.jpg)
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
![Page 27: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/27.jpg)
NUR 2010
(27)
Constrained Typography
![Page 28: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/28.jpg)
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/
![Page 29: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/29.jpg)
NUR 2010
(29)
Constrained Typography
http://adam.sporka.eu/wiki/doku.php?id=web:for_fun#segment_display_layout
![Page 30: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/30.jpg)
INTERNATIONAL TYPOGRAPHY
![Page 31: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/31.jpg)
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
![Page 32: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/32.jpg)
![Page 33: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/33.jpg)
NUR 2010
(33)
Background
Alphabet itself sets the mood and expectations
![Page 34: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/34.jpg)
NUR 2010
(34)
Non-Latin Alphabets
Greek, Cyrillic– Individual letters
Arabic, Hebrew– No lower/upper case distinction – Right-to-left direction
![Page 35: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/35.jpg)
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
![Page 36: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/36.jpg)
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.
![Page 37: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/37.jpg)
NUR 2010
(37)
How Do Different Alphabets Blend?
Less specific shapes More flexible
More specific shapes Less flexible
ABCDWXYZ
abcdwxyz
αβγδφχψω
АБВГЖЭЮЯ
ΑΒΓΔΦΧΨΩ
абвгжэюя
בדזמנקל
على الله علم هو
სტანდარტული
उसका� हो�ना�
第二次大戦後は
座著名的旅游城市
![Page 38: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/38.jpg)
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/
![Page 39: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/39.jpg)
NUR 2010
(39)
Alphabet Design
![Page 40: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/40.jpg)
NUR 2010
(40)
Alphabet Design
![Page 41: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/41.jpg)
Typography in UI Design
![Page 42: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/42.jpg)
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
![Page 43: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/43.jpg)
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…
![Page 44: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/44.jpg)
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
![Page 45: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/45.jpg)
NUR 2010
(45)
Example: Trustworthiness
Your messagehas been delivered.
Your messagehas been delivered.
![Page 46: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/46.jpg)
NUR 2010
(46)
Example: Severity
THE AUTODESTRUCTIONSEQUENCE HAS BEEN
ACTIVATED
THE AUTODESTRUCTIONSEQUENCE HAS BEEN
ACTIVATED
![Page 47: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/47.jpg)
NUR 2010
(47)
Example: MySpace Widgets
http://www.easymyspace.com
![Page 48: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/48.jpg)
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
![Page 49: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/49.jpg)
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
![Page 50: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/50.jpg)
NUR 2010
(50)
Web Page Typography: Horizontal Motion
Kerning
Stretching the space– Be careful!– Can’t leap too much!
http://webtypography.net/toc/
![Page 51: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/51.jpg)
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/
![Page 52: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/52.jpg)
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 */ }
![Page 53: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/53.jpg)
NUR 2010
(53)
Web Page Typography
A tutorial– http://webtypography.net/toc
How a font will look on a screen?– http://webfontspecimen.com/demo/
![Page 54: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/54.jpg)
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
一七两乾亹劘龗
![Page 55: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/55.jpg)
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
![Page 56: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/56.jpg)
Č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°
![Page 57: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/57.jpg)
Č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á
![Page 58: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/58.jpg)
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
![Page 59: Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011](https://reader036.vdocuments.mx/reader036/viewer/2022062409/568146e4550346895db41efb/html5/thumbnails/59.jpg)
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