Typography in Web Design (WordCamp Toronto 2014)

Typography in Web Design
Presented by Jasmine Vesque
WordCamp Toronto 2014
©Jasmine Vesque 2014 @jasmineVesque#wcto

A little about me
 Making websites since 2009
 Owner, Forward Slash Media
 Co-Founder, LumosTech
Training
 VP Comms, Forget for a
Moment Foundation
 Co-organizer, WordCamp
Ottawa & Meetup
 Social Media Junkie:
@jasmineVesque

What is Typography?

Typography is the art and
technique of arranging type in
order to make language visible.
http://en.wikipedia.org/wiki/Typography

Why Type Matters

Web Design is
95%
Typography
http://ia.net/blog/the-web-is-all-about-typography-period/

People Still Read
Our 1st responsibility is to our readers.
We must help them find, understand, and
connect with the words, ideas, and information
they seek.
~ Typographic Web Design by Laura Franz

Reading Types
 Scanning (with purpose)
 Casual reading /Skimming
 Sustained reading /Engaged reading

Content is King
Our 2nd responsibility is to honour the content
We have to clarify and share the meaning of
the texts people read.

Typography Basics

There are no rules in
typography
There are principles, best practices, and
methods that work most of the time, but
nothing works all of the time.
~ On Web Typography by Jason Santa Maria
© Jasmine Vesque 2014 @jasmineVesque#wcto

Serif Fonts
 Have serifs (little feet)
 Good for headings
 Traditional

Garamond

Times New Roman

Libre Baskerville

Old Standard TT

Sans-Serif
Sans-Serif
 Without serifs
 Good for body copy
 Modern

Arial

Droid Sans

Open Sans

Lato

Slab-Serif
Slab-Serif
 Thick, block-like serifs
 Best for headings or
short amounts of text
 Modern

Rockwell Extra Bold

Courier

Roboto Slab Bold

Ultra

Display
Display Type
 Serif or sans-serif
 Best for headings or

Bauhaus 93

Lobster

Bangers

Keania One

Script/Handwriting
Script/Handwriting  Best for headings or

Brush Script STD

Cookie

Segoe Script

Sofia

Typeface vs. Font
 Typeface: Name of the
design in full – style or
family of styles.
– Arial
 Font refers to format or
storage mechanism.
– Arial.ttf
 “Typeface is to a font
as a song is to an
mp3.” – Nick Sherman

Things to Consider when
Choosing a Font

Readability
Readability is the ease in which text can be
read and understood.
http://en.wikipedia.org/wiki/Readability

The term readability doesn’t
ask simply “Can you read it?”
or “How fast can you read it?
It also asks “Do you want to
read it?”
- Stephen Coles

Unreadable
Please, when Torchwood comes to write my complete
history, don't tell people I travelled through time and
space with her mother! Aw, I wanted to be ginger! I've
never been ginger! And you, Rose Tyler! Fat lot of
good you were! You gave up on me! Ooh, that's rude.
Is that the sort of man I am now? Am I rude? Rude
and not ginger. Oh, yes. Harmless is just the word:
that's why I like it! Doesn't kill, doesn't wound, doesn't
maim. But I'll tell you what it does do: it is very good
at opening doors!

Readable
Please, when Torchwood comes to write my
complete history, don't tell people I travelled
through time and space with her mother! Aw, I
wanted to be ginger! I've never been ginger!
And you, Rose Tyler! Fat lot of good you were!
You gave up on me! Ooh, that's rude. Is that
the sort of man I am now? Am I rude? Rude
and not ginger. Oh, yes. Harmless is just the
word: that's why I like it! Doesn't kill, doesn't
wound, doesn't maim. But I'll tell you what it
does do: it is very good at opening doors!
http://doctoripsum.com/

K.I.S.S: Keep it simple, sugar!

Don’t use all the fonts at once

One Font for Headings
One font for body copy. It can be tempting,
once you know how to change the font of your
text, to change it all the time. While there is no
minimum or maximum number of fonts that
look good on a Web page, the more fonts you
have the more confusing and ugly your page
will look.
If you have any ads on your pages, you
instantly have a new place where fonts will be.

Colour Considerations

Colour Choice
Easier to read
Black or dark text on a white
or light background is
statistically easier to read.
Also great for accessibility!
Harder to read
White or light text on a black
or dark background is
statistically more difficult to
read

Some things are just wrong
Some colour combinations are just too painful
to look at!

Aesthetics and Emotions
Does the font convey the right
message?

Fonts have personality

They can be happy

or scared

They can be elegant

and refined

or rebellious

grungy

Metallic

Type can represent order

Technology

or a bygone era

However…
 Aesthetics and emotional associations are
social constructs
 No font can perfectly convey the associated
emotion
 Fonts play a supporting role to your words,
and should never shout, “Look at me! I am
ripe with meaning!”

Current Typography Trends

Typography is King

Really Big Text

Handwritten Type

Slab-Serif Font

Multi – Type

Vintage Revival

Simplified Content and
Typography

More Breathing Space

How to display fonts on your site?

Fonts as a Service
 google.com/fonts/
 fontsquirrel.com/
 typekit.com/ ($)
 fontdeck.com/ ($)
 and others

Built into Your Theme

Plugins

Google Typography
https://wordpress.org/plugins/google-typography/

Easy Google Fonts
https://wordpress.org/plugins/easy-google-fonts/

Typekit Fonts for WordPress
http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/

How to use Google Fonts

google.com/fonts/
Quick-use

Grab the Code

functions.php
function load_fonts() {
wp_register_style( 'googleFonts',
'http://fonts.googleapis.com/css?family=
Arbutus+Slab');
wp_enqueue_style( 'googleFonts' );
}
add_action('wp_print_styles',
'load_fonts');

Add font to CSS
h1{
font-family: 'Arbutus Slab', Georgia, serif;
}
Always add a fallback font

Web Safe Fonts
 Arial (Mac OS equivalent is Helvetica)
 Times New Roman (Mac OS equivalent is Times)
 Verdana
 Georgia
 Courier
 Other popular fonts:
 Impact
 Lucida Console (Mac OS equivalent is Monaco)
 Lucida Sans (Mac OS equivalent is Lucida Grande)
 Palatino
 Tahoma (Mac OS equivalent is Geneva)
 Comic Sans
 Trebuchet MS
http://cssfontstack.com/

Fonts Used in this Presentation
Headings: Chunk Five Roman
http://www.theleagueofmoveabletype.com/chunk
Body: Franklin Gothic Book
https://typekit.com/fonts/franklin-gothic-urw

Thank you!
Jasmine Vesque
@jasmineVesque
jasminevesque.com

Questions?

Typography in Web Design (WordCamp Toronto 2014)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Recently uploaded

Recently uploaded (20)

Typography in Web Design (WordCamp Toronto 2014)