Typography and user experience - UX Craft 2014

Improving
typography for
an improved
user experience
JUSTIN SLACK
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@NEWMEDIALABS.CO.ZA

Who am I?
Design and front-end lead at New Media Labs

START WITH A QUOTE
“Web Design is
95%
Typography”
Oliver Reichenstein,
2006

MAKE A PREDICTION
Web fonts will bring a
typographic revolution to
web design as great as
desktop publishing was to
print design

“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

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

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

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

ANATOMY OF A TYPEFACE
Handglovery
Terminal
Bracket Counter Link/
Neck Loop/
Lobe
Axis Finial
Tail
Descender
Eye
Ascender
Stem Shoulder Serif
CAP HEIGHT
X-HEIGHT
BASELINE

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

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

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

ALL SCREEN FONTS WERE BITMAPS

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)

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

TRUETYPE OPENTYPE COMPARISON
FF META
POSTSCRIPT OPENTYPE
4 styles 4 styles
360 files 4 files
23.6 MB 676 KB

WHY SHOULD WE CARE?
@font-face

WEB SAFE FONTS
Arial
Helvetica!
Georgia
Courier!
Times New Roman

@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>
Type
</body>

Source: Jake Archibald
1997

IE
Internet Explorer has supported font
embedding via @fontface since 1997
@font-face {
font-family: 'myfont';
src: url('myfont.eot');
}

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"

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

@FONTFACE BROWSER SUPPORT
1997 2004 2008 2010

@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

FONT FORMAT SUPPORT
Internet Explorer
VERSION WOFF EOT TTF/OTF SVG
6-8 No Yes No No
9-10 Yes Yes No No

FONT FORMAT SUPPORT
Firefox
4-21 Yes No Yes No

FONT FORMAT SUPPORT
Safari
5.1-6 Yes No Yes Yes

FONT FORMAT SUPPORT
Opera
12 Yes No Yes No

FONT FORMAT SUPPORT
Chrome
27 Yes No Yes No

@font-face SYNTAX
support all the browsers
@font-face {
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}

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.

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.

WOFF SUPPORT
current browsers
IE 9/10 FIREFOX CHROME SAFARI OPERA
Yes Yes Yes Yes Yes

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

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

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.

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

syntax (the real thing)
.i-have-a-class {
font-variant-ligatures: 'common-lig-values';
}
!
Values: normal, none, common-lig-values, discretionary-lig-values,
historical-lig-values, contextual-alt-values

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

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

CSS FONT FEATURES
awesome!
let’s use them all now
um ... no

CSS FONT FEATURES
browser support
none

CSS FONT FEATURES
well then ...
why are you wasting our time?

CSS FONT FEATURES
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-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.

BROWSER SUPPORT
current browsers
IE 10 FIREFOX CHROME SAFARI OPERA
Yes* Yes* Yes* Partial* Yes
* vendor prefixed

example

.dlig {
font-feature-settings: 'dlig’;
}
The quick brown fox jumps over lazy dog

result
JUSTINSLACK.COM • @URBANRENEWAL • JUSTIN@JUSTINSLACK.COM

example

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

result

example

. cswh {
font-feature-settings: 'cswh’;
}
The quick brown fox jumps over the lazy dog

example
<td class=”tnum”>
.tnum {
font-feature-settings: 'tnum’;
}
</td>

result
“default” =
“tnum” =
“default” =
“lnum” =

READABILITY VERSUS LEGIBILITY
Not the same thing
Legibility = I can interpret this
!
Readability = an emotional connection with the act.

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

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

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

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

Thanks
for
listening
!
Questions?

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

Typography and user experience - UX Craft 2014

More Related Content

Similar to Typography and user experience - UX Craft 2014 (20)

Recently uploaded (20)

Typography and user experience - UX Craft 2014