Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Typography and user experience - UX Craft 2014
1.
2. Improving
typography for
an improved
user experience
JUSTIN SLACK
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
3. Who am I?
Design and front-end lead at New Media Labs
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
4. START WITH A QUOTE
“Web Design is
95%
Typography”
Oliver Reichenstein,
2006
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
5. MAKE A PREDICTION
Web fonts will bring a
typographic revolution to
web design as great as
desktop publishing was to
print design
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
6. “Optimizing typography is optimizing
readability, accessibility, usability,
overall graphic balance. Organizing
blocks of text, isn’t that what graphic
designers, usability specialists,
information architects do? So why is
it such a neglected topic?”
Oliver Reichenstein, 2006
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
7. WHY HAS TYPOGRAPHY BEEN NEGLECTED?
• The first argument against rich typography online
used to be that there are only a few fonts available • The second argument used to be that screen
resolutions are too low, which makes it hard to read
pixelated or anti-aliased fonts in the first place • Browser support • Copyright issues • It’s easy to use defaults
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
8. TYPOGRAPHY - WHY SHOULD WE CARE?
Much of the web is about reading
Good typography enhances that
experience
“Designers will benefit from [approaching] their work
now and again as being written rather than assembled.”
!
Dean Allen, A List Apart, 2001
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
9. WHERE DO WE START?
dizzying array of
typographic terms
baseline, cap height, condensed, descender, drop cap, em, em space, em quad,
hanging indent, kerning, discretionary ligature, swash, smallcaps, stylistic sets,
x-height, tracking, bowl, ascender, accents, alternates, counter, diacritics,
hinting, leading, terminals, lining figures ...
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
11. WHERE DO WE MAKE MISTAKES
• Text is too small • Lines are too long • Not enough whitespace • Poor layout consideration of titles and subtitles • Links are not clear (missing active and visited states
most of the time) • Text is not treated as part of the interface but in a
decorative fashion • Poor typeface choices
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
12. The Mail and Guardian
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
Font: Open Sans
Font size: 13px
Line-height: 22px/1.7
Margin: 10px
13. JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
The Guardian
Font: Guardian Text
Egyptian Web
Font size: 16px/100%
Line-height: 24px/1.5
Margin: 16px
14. ALL SCREEN FONTS WERE BITMAPS
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
15. FONT FORMATS
the font wars
Adobe - Type 1 (Postscript)
True Type - Microsoft (and Apple)
Apple Advanced Typography (AAT or GX typography)
Open Type (™Microsoft and Adobe)
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
16. WHO WON?
why OpenType
OpenType?
OpenType offers an accessible and advanced typographic toolset.
!
It improves on PostScript and TrueType in a number of ways:
One style in one file
While Postscript is limited to 256 characters in a file, a single
OpenType file can contain 65,535 characters or glyphs
This allows for extensive language support as well as space for
advanced typographic features
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
18. WHY SHOULD WE CARE?
@font-face
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
19. WEB SAFE FONTS
Arial
Helvetica!
Georgia
Courier!
Times New Roman
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
20. @font-face ORIGINS AND SUPPORT
The first browser to support embedded type
was Netscape Navigator 4 in 1994
<head>
<link rel=”FONTDEF” src=”myfont.pfr”>
</head>
!
<body>
<font face=”myfont”>Type</font>
</body>
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
21. @font-face ORIGINS AND SUPPORT
Source: Jake Archibald
1997
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
22. @font-face ORIGINS AND SUPPORT
IE
Internet Explorer has supported font
embedding via @fontface since 1997
@font-face {
font-family: 'myfont';
src: url('myfont.eot');
}
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
23. EMBEDDING FONTS IN THE DARK AGES (THE 90’S)
two technologies
Microsoft Typography
.eot via @fontface
Bitstream TrueDoc™
.pfr font file via (seriously
invalid)
LINK REL=fontdef
SRC="myfont.pfr"
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
24. EMBEDDING FONS IN THE DARK AGES (THE 90’S)
problems (we have them)
Microsoft Typography
.eot is proprietary and requires
a browser plugin to render in
Netscape
Bitstream TrueDoc(TM)
.pfr font requires an active-x
control to run in IE
Manual refresh required after
activating active-x
Netscape 6 = open source
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
26. @font-face FORMATS
Four font file types
EOT Proprietary Microsoft format - rejected by W3C
SVG A simple means of embedding glyph information for rendering type
TTF/OTF Standard font format
WOFF Developed specifically for embedding fonts in web pages
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
27. FONT FORMAT SUPPORT
Internet Explorer
VERSION WOFF EOT TTF/OTF SVG
6-8 No Yes No No
9-10 Yes Yes No No
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
28. FONT FORMAT SUPPORT
Firefox
VERSION WOFF EOT TTF/OTF SVG
4-21 Yes No Yes No
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
29. FONT FORMAT SUPPORT
Safari
VERSION WOFF EOT TTF/OTF SVG
5.1-6 Yes No Yes Yes
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
30. FONT FORMAT SUPPORT
Opera
VERSION WOFF EOT TTF/OTF SVG
12 Yes No Yes No
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
31. FONT FORMAT SUPPORT
Chrome
VERSION WOFF EOT TTF/OTF SVG
27 Yes No Yes No
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
32. @font-face SYNTAX
support all the browsers
@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
33. EMERGING STANDARD
WOFF will win
WOFF uses a compressed version of the same table-based
sfnt structure used by TrueType, OpenType, and
Open Font Format, but adds metadata and private-use
data structures, including predefined fields allowing
foundries and vendors to provide license information if
desired.
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
34. EMERGING STANDARD
WOFF advantages
Font data is compressed. Sites using WOFF will use less bandwidth and
will load faster than if they used equivalent uncompressed TrueType or
OpenType files.
Many font vendors that are unwilling to license their TrueType or
OpenType format fonts for use on the web will license WOFF format
fonts.
Both proprietary and free-software browser vendors support the
WOFF format.
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
35. WOFF SUPPORT
current browsers
IE 9/10 FIREFOX CHROME SAFARI OPERA
Yes Yes Yes Yes Yes
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
36. WOFF SUPPORT
mobile browsers
IOS BLACKBERRY
OPERA
MOBILE
CHROME
FIREFOX
(Android)
ANDROID
BROWSER
OPERA MINI*
Yes (5) Yes (7) Yes (10) Yes (27) Yes (22) Yes (4.4) No (7)
* no @font-face support
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
37. OPEN TYPE FEATURES
hello rich typography
Support widely expanded character sets and layout features
which provide rich linguistic support and advanced typographic
control
Using one font file only for its entire glyph, metric and bitmap
data, OpenType fonts simplify font management
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
38. OPEN TYPE FEATURES
hello rich typography
Based on the Unicode Standard, a multi-byte character encoding
that covers nearly all the world’s languages.
Includes non-standard glyphs, such as old-style figures, tabular
figures, small capitals, fractions, swashes, superiors, inferiors,
titling letters, contextual and stylistic alternates, a full range of
ligatures, symbols and ornaments.
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
39. OPEN TYPE FEATURES IN CSS
CSS fonts module level three
Working draft updated 3 October 2013
Introduces Font Feature Properties
Expands the font-variant property for CSS3
It now functions as a shorthand for a set of properties
that provide control over stylistic font features
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
40. OPEN TYPE FEATURES IN CSS
syntax (the real thing)
.i-have-a-class {
font-family: 'myfont';
font-variant-ligatures: 'common-lig-values';
}
!
Values: normal, none, common-lig-values, discretionary-lig-values,
historical-lig-values, contextual-alt-values
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
41. OPEN TYPE FEATURES
dizzying array of
OpenType features
AALT, CALT, SALT, LIGA, DLIG, CLIG, HIST, HLIG, UNIC, SMCP, C2SC,
PCAP, TITL, SWSH, SS01-20, FRAC, AFRC, ORD, NUMR, DNUM, SINF,
SUPS, SUBS, ONUM, PNUM, TNUM, ORNM ...
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
42. the whole list
Language-specific display
Kerning
Ligatures
Sub and superscript
Capitalization
Numerical formatting
CSS FONT FEATURES
Alternates and swashes
Font specific values
East Asian text rendering
Overall shorthand for font rendering
Low level settings control
Font language override
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
43. CSS FONT FEATURES
awesome!
let’s use them all now
um ... no
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
44. CSS FONT FEATURES
browser support
none
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
45. CSS FONT FEATURES
well then ...
why are you wasting our time?
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
46. CSS FONT FEATURES
right now we have
support for low-level OpenType features via the
font-feature-settings property
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
47. OPEN TYPE FEATURES IN CSS
syntax (not the real thing)
.i-have-a-class {
font-family: 'myfont';
font-feature-settings: 'smcp’, ‘swsh' 2;
}
!
Values: the above syntax enables “Small Caps” and “Swashes”. The value
is an integer. A value of zero would turn these features off.
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
48. BROWSER SUPPORT
current browsers
IE 10 FIREFOX CHROME SAFARI OPERA
Yes* Yes* Yes* Partial* Yes
* vendor prefixed
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
49. OPEN TYPE FEATURES IN CSS
example
<p class=”dlig”>
.dlig {
font-family: 'myfont';
font-feature-settings: 'dlig’;
}
The quick brown fox jumps over lazy dog
</p>
50. OPEN TYPE FEATURES IN CSS
result
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@JUSTINSLACK.COM
51. OPEN TYPE FEATURES IN CSS
example
<p class=”ss05”>
. ss05 {
font-family: 'myfont';
font-feature-settings: 'ss05’;
}
The quick brown fox jumps over lazy dog
</p>
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
52. OPEN TYPE FEATURES IN CSS
result
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
53. OPEN TYPE FEATURES IN CSS
example
<p class=”cswh”>
. cswh {
font-family: 'myfont';
font-feature-settings: 'cswh’;
}
The quick brown fox jumps over the lazy dog
</p>
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
54. OPEN TYPE FEATURES IN CSS
result
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
55. OPEN TYPE FEATURES IN CSS
example
<td class=”tnum”>
.tnum {
font-family: 'myfont';
font-feature-settings: 'tnum’;
}
The quick brown fox jumps over lazy dog
</td>
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
56. OPEN TYPE FEATURES IN CSS
result
“default” =
“tnum” =
“default” =
“lnum” =
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
57. READABILITY VERSUS LEGIBILITY
Not the same thing
Legibility = I can interpret this
!
Readability = an emotional connection with the act.
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
58. READABILITY VERSUS LEGIBILITY
Two opposing positions
“I can write the word 'dog' with any typeface and it
doesn't have to look like a dog. But there are people that
[think that] when they write 'dog' it should bark.”
!
Massimo Vignelli
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
59. CAVEATS
potential pitfalls
Just because we have lots of typefaces ...
more fonts does not mean better typography
!
Many current fonts are not optimised for the web
!
Incomplete character sets, sub-optimal line heights, poor
kerning
!
Additional load time
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
60. CAVEATS
do
Settle on a typeface as early as possible
!
!Get type in the browser as soon as possible
!Optimize loading on mobile
!Pay careful attention to line widths at breakpoints
!Use a baseline grid
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
61. CAVEATS
do
Design for and use existing CSS properties that
have widespread support
!Organise a design with regards to the message
and with readability in mind
!Consider a hosted solution
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
63. RESOURCES
Web Design is 95% Typography http://ia.net/blog/the-web-is-all-about-typography-period/
Reading Design http://alistapart.com/article/readingdesign
What is Open Type? http://www.fontshop.com/opentype/
In your @fontface http://www.slideshare.net/jaffathecake/in-your-fontface
CSS3 font tester http://clagnut.com/sandbox/css3/
Official specification (latest draft) http://dev.w3.org/csswg/css-fonts/
VISIT US ONLINE YOUR WEBSITE URL • FOLLOW US ON YOUR TWITTER URL • FRIEND US ON YOUR FACEBOOK URL