typography and user experience - ux craft 2014

J U S T I N S L A C K . C O M • @ U R B A N R E N E WA L • J U S T I N @ N E W M E D I A L A B S . C O . Z A

JUSTIN SLACK

Improving typography for

an improved user experience

http://justinslack.com

Who am I?

Design and front-end lead at New Media Labs



“Web Design is 95%

Typography”

S TA R T W I T H A Q U O T E

Oliver Reichenstein,


2006


Web fonts will bring a typographic revolution to

web design as great as desktop publishing was to

print design

M A K E A P R E D I C T I O N



“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


W H Y H A S T Y P O G R A P H Y B E E N N E G L E C T E D ?


• 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


Much of the web is about reading

T Y P O G R A P H Y - W H Y S H O U L D W E C A R E ?

“Designers will benefit from [approaching] their work now and again as being written rather than assembled.”

!

Dean Allen, A List Apart, 2001


Good typography enhances that experience


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

W H E R E D O W E S TA R T ?



A N AT O M Y O F A T Y P E FA C E


HandgloveryTerminal

Bracket Counter Link/ Neck Loop/

Lobe

Axis Finial

Tail

Descender

Eye

AscenderStem Shoulder Serif

CAP HEIGHTX-HEIGHT

BASELINE


W H E R E D O W E M A K E M I S TA K E S


• 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



The Mail and GuardianFont: Open Sans Font size: 13px Line-height: 22px/1.7 Margin: 10px



The GuardianFont: Guardian Text Egyptian Web Font size: 16px/100% Line-height: 24px/1.5 Margin: 16px


A L L S C R E E N F O N T S W E R E B I T M A P S



the font warsAdobe - Type 1 (Postscript)

True Type - Microsoft (and Apple) Apple Advanced Typography (AAT or GX typography)

Open Type (™Microsoft and Adobe)

F O N T F O R M AT S



why 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

W H O W O N ?

OpenType



FF METAT R U E T Y P E O P E N T Y P E C O M PA R I S O N

P O S T S C R I P T O P E N T Y P E

4 styles 4 styles

360 files 4 files

23.6 MB 676 KB



@font-face

W H Y S H O U L D W E C A R E ?



Arial Helvetica!Georgia Courier!

Times New Roman

W E B S A F E F O N T S



@ f o n t - f a c e O R I G I N S A N D S U P P O R T

The first browser to support embedded type was Netscape Navigator 4 in 1994

<head> <link rel=”FONTDEF” src=”myfont.pfr”>

</head> !<body>

Type </body>


Source: Jake Archibald

1997



IEInternet Explorer has supported font embedding via @fontface since 1997


@font-face { font-family: 'myfont'; src: url('myfont.eot'); }



two technologiesMicrosoft Typography .eot via @fontface

E M B E D D I N G F O N T S I N T H E D A R K A G E S ( T H E 9 0 ’ S )

Bitstream TrueDoc™ .pfr font file via (seriously invalid) LINK REL=fontdef SRC="myfont.pfr"



problems (we have them)Microsoft Typography

.eot is proprietary and requires a browser plugin to render in Netscape

E M B E D D I N G F O N S I N T H E D A R K A G E S ( T H E 9 0 ’ S )

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



@ F O N T FA C E B R O W S E R S U P P O R T

1997 2004 2008 2010



Four font file types

@ f o n t - f a c e F O R M AT S

E O T Proprietary Microsoft format - rejected by W3C

S V G A simple means of embedding glyph information for rendering type

T T F/O T F Standard font format

W O F F Developed specifically for embedding fonts in web pages



Internet Explorer

F O N T F O R M AT S U P P O R T

V E R S I O N W O F F E O T T T F/O T F S V G

6-8 No Yes No No

9-10 Yes Yes No No



Firefox



4-21 Yes No Yes No



Safari



5.1-6 Yes No Yes Yes



Opera



12 Yes No Yes No



Chrome



27 Yes No Yes No



support all the browsers@ f o n t - f a c e S Y N TA X

@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'); }



WOFF will winE M E R G I N G S TA N D A R D

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.



WOFF advantagesE M E R G I N G S TA N D A R D

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.



current browsers

W O F F S U P P O R T

I E 9 / 1 0 F I R E F OX C H R O M E S A FA R I O P E R A

Yes Yes Yes Yes Yes



mobile browsers

W O F F S U P P O R T

I O S B L A C K B E R RYO P E R A

M O B I L EC H R O M E

F I R E F OX ( A n d r o i d )

A N D R O I D B R O W S E R

O P E R A M I N I *

Yes (5) Yes (7) Yes (10) Yes (27) Yes (22) Yes (4.4) No (7)

* no @font-face support



hello rich typography

O P E N T Y P E F E AT U R E S

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



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.



CSS fonts module level three

O P E N T Y P E F E AT U R E S I N C S S

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



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



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




the whole listLanguage-specific display Kerning Ligatures Sub and superscript Capitalization Numerical formatting

C S S F O N T F E AT U R E S

Alternates and swashes Font specific values East Asian text rendering Overall shorthand for font rendering Low level settings control Font language override


http://www.w3.org/TR/css3-fonts/#language-specific-support


awesome!

um ... no


let’s use them all now



browser support

none




well then ...

why are you wasting our time?




right now we have

support for low-level OpenType features via the font-feature-settings property




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.



current browsers

B R O W S E R S U P P O R T

I E 1 0 F I R E F OX C H R O M E S A FA R I O P E R A

Yes* Yes* Yes* Partial* Yes

* vendor prefixed



example


.dlig { font-family: 'myfont'; font-feature-settings: 'dlig’; }

 The quick brown fox jumps over lazy dog

result


J U S T I N S L A C K . C O M • @ U R B A N R E N E WA L • J U S T I N @ J U S T I N S L A C K . C O M

mailto:[email protected]


example


. ss05 { font-family: 'myfont'; font-feature-settings: 'ss05’; }

 The quick brown fox jumps over lazy dog

result




example


. cswh { font-family: 'myfont'; font-feature-settings: 'cswh’; }

 The quick brown fox jumps over the lazy dog

result




example


.tnum { font-family: 'myfont'; font-feature-settings: 'tnum’; }

<td class=”tnum”> The quick brown fox jumps over lazy dog </td>

resultO P E N T Y P E F E AT U R E S I N C S S

“default” =

“tnum” =

“lnum” =

“default” =



Not the same thing

R E A D A B I L I T Y V E R S U S L E G I B I L I T Y

Legibility = I can interpret this !

Readability = an emotional connection with the act.



Two opposing positions

R E A D A B I L I T Y V E R S U S L E G I B I L I T Y

“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



potential pitfalls

C AV E AT S

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



do

C AV E AT S

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



do

C AV E AT S

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



Thanks for

listening !

Questions?



R E S O U R C E S

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/

V I S I T U S O N L I N E YO U R W E B S I T E U R L • F O L L O W U S O N YO U R T W I T T E R U R L • F R I E N D U S O N YO U R FA C E B O O K U R L

http://ia.net/blog/the-web-is-all-about-typography-period/%0Dhttp://ia.net/blog/the-web-is-all-about-typography-period/%0D

http://alistapart.com/article/readingdesign

http://www.fontshop.com/opentype/

http://www.slideshare.net/jaffathecake/in-your-fontface

http://clagnut.com/sandbox/css3/

http://dev.w3.org/csswg/css-fonts/

http://www.envato.com/

