Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Improving 
typography for 
an improved 
user experience 
JUSTIN SLACK 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALA...
Who am I? 
Design and front-end lead at New Media Labs 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
START WITH A QUOTE 
“Web Design is 
95% 
Typography” 
Oliver Reichenstein, 
2006 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN...
MAKE A PREDICTION 
Web fonts will bring a 
typographic revolution to 
web design as great as 
desktop publishing was to 
p...
“Optimizing typography is optimizing 
readability, accessibility, usability, 
overall graphic balance. Organizing 
blocks ...
WHY HAS TYPOGRAPHY BEEN NEGLECTED? 
• The first argument against rich typography online 
used to be that there are only a ...
TYPOGRAPHY - WHY SHOULD WE CARE? 
Much of the web is about reading 
Good typography enhances that 
experience 
“Designers ...
WHERE DO WE START? 
dizzying array of 
typographic terms 
baseline, cap height, condensed, descender, drop cap, em, em spa...
ANATOMY OF A TYPEFACE 
Handglovery 
Terminal 
Bracket Counter Link/ 
Neck Loop/ 
Lobe 
Axis Finial 
Tail 
JUSTINSLACK.COM ...
WHERE DO WE MAKE MISTAKES 
• Text is too small • Lines are too long • Not enough whitespace • Poor layout consideration of...
The Mail and Guardian 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA 
Font: Open Sans 
Font size: 13px 
Line...
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA 
The Guardian 
Font: Guardian Text 
Egyptian Web 
Font size: 1...
ALL SCREEN FONTS WERE BITMAPS 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
FONT FORMATS 
the font wars 
Adobe - Type 1 (Postscript) 
True Type - Microsoft (and Apple) 
Apple Advanced Typography (AA...
WHO WON? 
why OpenType 
OpenType? 
OpenType offers an accessible and advanced typographic toolset. 
! 
It improves on Post...
TRUETYPE OPENTYPE COMPARISON 
FF META 
POSTSCRIPT OPENTYPE 
4 styles 4 styles 
360 files 4 files 
23.6 MB 676 KB 
JUSTINSL...
WHY SHOULD WE CARE? 
@font-face 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
WEB SAFE FONTS 
Arial 
Helvetica! 
Georgia 
Courier! 
Times New Roman 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALA...
@font-face ORIGINS AND SUPPORT 
The first browser to support embedded type 
was Netscape Navigator 4 in 1994 
<head> 
<lin...
@font-face ORIGINS AND SUPPORT 
Source: Jake Archibald 
1997 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
@font-face ORIGINS AND SUPPORT 
IE 
Internet Explorer has supported font 
embedding via @fontface since 1997 
@font-face {...
EMBEDDING FONTS IN THE DARK AGES (THE 90’S) 
two technologies 
Microsoft Typography 
.eot via @fontface 
Bitstream TrueDoc...
EMBEDDING FONS IN THE DARK AGES (THE 90’S) 
problems (we have them) 
Microsoft Typography 
.eot is proprietary and require...
@FONTFACE BROWSER SUPPORT 
1997 2004 2008 2010 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
@font-face FORMATS 
Four font file types 
EOT Proprietary Microsoft format - rejected by W3C 
SVG A simple means of embedd...
FONT FORMAT SUPPORT 
Internet Explorer 
VERSION WOFF EOT TTF/OTF SVG 
6-8 No Yes No No 
9-10 Yes Yes No No 
JUSTINSLACK.CO...
FONT FORMAT SUPPORT 
Firefox 
VERSION WOFF EOT TTF/OTF SVG 
4-21 Yes No Yes No 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@N...
FONT FORMAT SUPPORT 
Safari 
VERSION WOFF EOT TTF/OTF SVG 
5.1-6 Yes No Yes Yes 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@...
FONT FORMAT SUPPORT 
Opera 
VERSION WOFF EOT TTF/OTF SVG 
12 Yes No Yes No 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWME...
FONT FORMAT SUPPORT 
Chrome 
VERSION WOFF EOT TTF/OTF SVG 
27 Yes No Yes No 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWM...
@font-face SYNTAX 
support all the browsers 
@font-face { 
font-family: 'myfont'; 
src: url('myfont.eot'); 
src: url('myfo...
EMERGING STANDARD 
WOFF will win 
WOFF uses a compressed version of the same table-based 
sfnt structure used by TrueType,...
EMERGING STANDARD 
WOFF advantages 
Font data is compressed. Sites using WOFF will use less bandwidth and 
will load faste...
WOFF SUPPORT 
current browsers 
IE 9/10 FIREFOX CHROME SAFARI OPERA 
Yes Yes Yes Yes Yes 
JUSTINSLACK.COM • @URBANRENEWAL ...
WOFF SUPPORT 
mobile browsers 
IOS BLACKBERRY 
OPERA 
MOBILE 
CHROME 
FIREFOX 
(Android) 
ANDROID 
BROWSER 
OPERA MINI* 
Y...
OPEN TYPE FEATURES 
hello rich typography 
Support widely expanded character sets and layout features 
which provide rich ...
OPEN TYPE FEATURES 
hello rich typography 
Based on the Unicode Standard, a multi-byte character encoding 
that covers nea...
OPEN TYPE FEATURES IN CSS 
CSS fonts module level three 
Working draft updated 3 October 2013 
Introduces Font Feature Pro...
OPEN TYPE FEATURES IN CSS 
syntax (the real thing) 
.i-have-a-class { 
font-family: 'myfont'; 
font-variant-ligatures: 'co...
OPEN TYPE FEATURES 
dizzying array of 
OpenType features 
AALT, CALT, SALT, LIGA, DLIG, CLIG, HIST, HLIG, UNIC, SMCP, C2SC...
the whole list 
Language-specific display 
Kerning 
Ligatures 
Sub and superscript 
Capitalization 
Numerical formatting 
...
CSS FONT FEATURES 
awesome! 
let’s use them all now 
um ... no 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.Z...
CSS FONT FEATURES 
browser support 
none 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
CSS FONT FEATURES 
well then ... 
why are you wasting our time? 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO....
CSS FONT FEATURES 
right now we have 
support for low-level OpenType features via the 
font-feature-settings property 
JUS...
OPEN TYPE FEATURES IN CSS 
syntax (not the real thing) 
.i-have-a-class { 
font-family: 'myfont'; 
font-feature-settings: ...
BROWSER SUPPORT 
current browsers 
IE 10 FIREFOX CHROME SAFARI OPERA 
Yes* Yes* Yes* Partial* Yes 
* vendor prefixed 
JUST...
OPEN TYPE FEATURES IN CSS 
example 
<p class=”dlig”> 
.dlig { 
font-family: 'myfont'; 
font-feature-settings: 'dlig’; 
} 
...
OPEN TYPE FEATURES IN CSS 
result 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@JUSTINSLACK.COM
OPEN TYPE FEATURES IN CSS 
example 
<p class=”ss05”> 
. ss05 { 
font-family: 'myfont'; 
font-feature-settings: 'ss05’; 
} ...
OPEN TYPE FEATURES IN CSS 
result 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
OPEN TYPE FEATURES IN CSS 
example 
<p class=”cswh”> 
. cswh { 
font-family: 'myfont'; 
font-feature-settings: 'cswh’; 
} ...
OPEN TYPE FEATURES IN CSS 
result 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
OPEN TYPE FEATURES IN CSS 
example 
<td class=”tnum”> 
.tnum { 
font-family: 'myfont'; 
font-feature-settings: 'tnum’; 
} ...
OPEN TYPE FEATURES IN CSS 
result 
“default” = 
“tnum” = 
“default” = 
“lnum” = 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@...
READABILITY VERSUS LEGIBILITY 
Not the same thing 
Legibility = I can interpret this 
! 
Readability = an emotional connec...
READABILITY VERSUS LEGIBILITY 
Two opposing positions 
“I can write the word 'dog' with any typeface and it 
doesn't have ...
CAVEATS 
potential pitfalls 
Just because we have lots of typefaces ... 
more fonts does not mean better typography 
! 
Ma...
CAVEATS 
do 
Settle on a typeface as early as possible 
! 
!Get type in the browser as soon as possible 
!Optimize loading...
CAVEATS 
do 
Design for and use existing CSS properties that 
have widespread support 
!Organise a design with regards to ...
Thanks 
for 
listening 
! 
Questions? 
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
RESOURCES 
Web Design is 95% Typography http://ia.net/blog/the-web-is-all-about-typography-period/ 
Reading Design http://...
Typography and user experience - UX Craft 2014
Upcoming SlideShare
Loading in …5
×

Typography and user experience - UX Craft 2014

1,638 views

Published on

Web typography and UX

Published in: Design

Typography and user experience - UX Craft 2014

  1. 1. Improving typography for an improved user experience JUSTIN SLACK JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  2. 2. Who am I? Design and front-end lead at New Media Labs JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  3. 3. START WITH A QUOTE “Web Design is 95% Typography” Oliver Reichenstein, 2006 JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  4. 4. 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
  5. 5. “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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. ANATOMY OF A TYPEFACE Handglovery Terminal Bracket Counter Link/ Neck Loop/ Lobe Axis Finial Tail JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA Descender Eye Ascender Stem Shoulder Serif CAP HEIGHT X-HEIGHT BASELINE
  10. 10. 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
  11. 11. The Mail and Guardian JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA Font: Open Sans Font size: 13px Line-height: 22px/1.7 Margin: 10px
  12. 12. 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
  13. 13. ALL SCREEN FONTS WERE BITMAPS JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  14. 14. 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
  15. 15. 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
  16. 16. TRUETYPE OPENTYPE COMPARISON FF META POSTSCRIPT OPENTYPE 4 styles 4 styles 360 files 4 files 23.6 MB 676 KB JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  17. 17. WHY SHOULD WE CARE? @font-face JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  18. 18. WEB SAFE FONTS Arial Helvetica! Georgia Courier! Times New Roman JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  19. 19. @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
  20. 20. @font-face ORIGINS AND SUPPORT Source: Jake Archibald 1997 JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  21. 21. @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
  22. 22. 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
  23. 23. 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
  24. 24. @FONTFACE BROWSER SUPPORT 1997 2004 2008 2010 JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  25. 25. @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
  26. 26. 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
  27. 27. FONT FORMAT SUPPORT Firefox VERSION WOFF EOT TTF/OTF SVG 4-21 Yes No Yes No JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  28. 28. FONT FORMAT SUPPORT Safari VERSION WOFF EOT TTF/OTF SVG 5.1-6 Yes No Yes Yes JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  29. 29. FONT FORMAT SUPPORT Opera VERSION WOFF EOT TTF/OTF SVG 12 Yes No Yes No JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  30. 30. FONT FORMAT SUPPORT Chrome VERSION WOFF EOT TTF/OTF SVG 27 Yes No Yes No JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  31. 31. @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
  32. 32. 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
  33. 33. 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
  34. 34. WOFF SUPPORT current browsers IE 9/10 FIREFOX CHROME SAFARI OPERA Yes Yes Yes Yes Yes JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. CSS FONT FEATURES awesome! let’s use them all now um ... no JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  43. 43. CSS FONT FEATURES browser support none JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  44. 44. CSS FONT FEATURES well then ... why are you wasting our time? JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  45. 45. 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
  46. 46. 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
  47. 47. BROWSER SUPPORT current browsers IE 10 FIREFOX CHROME SAFARI OPERA Yes* Yes* Yes* Partial* Yes * vendor prefixed JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  48. 48. 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>
  49. 49. OPEN TYPE FEATURES IN CSS result JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@JUSTINSLACK.COM
  50. 50. 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
  51. 51. OPEN TYPE FEATURES IN CSS result JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  52. 52. 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
  53. 53. OPEN TYPE FEATURES IN CSS result JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  54. 54. 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
  55. 55. OPEN TYPE FEATURES IN CSS result “default” = “tnum” = “default” = “lnum” = JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. Thanks for listening ! Questions? JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA
  62. 62. 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

×