Typography in Web Design (WordCamp Toronto 2014)1. Typography in Web Design
Presented by Jasmine Vesque
WordCamp Toronto 2014
©Jasmine Vesque 2014 @jasmineVesque#wcto
2. 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
©Jasmine Vesque 2014 @jasmineVesque#wcto
4. Typography is the art and
technique of arranging type in
order to make language visible.
http://en.wikipedia.org/wiki/Typography
©Jasmine Vesque 2014 @jasmineVesque#wcto
7. 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
©Jasmine Vesque 2014 @jasmineVesque#wcto
8. Reading Types
Scanning (with purpose)
Casual reading /Skimming
Sustained reading /Engaged reading
~ Typographic Web Design by Laura Franz
©Jasmine Vesque 2014 @jasmineVesque#wcto
9. Content is King
Our 2nd responsibility is to honour the content
We have to clarify and share the meaning of
the texts people read.
~ Typographic Web Design by Laura Franz
©Jasmine Vesque 2014 @jasmineVesque#wcto
11. 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
12. Serif Fonts
Have serifs (little feet)
Good for headings
Traditional
©Jasmine Vesque 2014 @jasmineVesque#wcto
37. 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
© Jasmine Vesque 2014 @jasmineVesque#wcto
39. Readability
Readability is the ease in which text can be
read and understood.
http://en.wikipedia.org/wiki/Readability
©Jasmine Vesque 2014 @jasmineVesque#wcto
40. 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
© Jasmine Vesque 2014 @jasmineVesque#wcto
41. 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!
©Jasmine Vesque 2014 @jasmineVesque#wcto
42. 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/
©Jasmine Vesque 2014 @jasmineVesque#wcto
44. Don’t use all the fonts at once
©Jasmine Vesque 2014 @jasmineVesque#wcto
45. 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.
©Jasmine Vesque 2014 @jasmineVesque#wcto
47. 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
©Jasmine Vesque 2014 @jasmineVesque#wcto
48. Some things are just wrong
Some colour combinations are just too painful
to look at!
©Jasmine Vesque 2014 @jasmineVesque#wcto
51. They can be happy
©Jasmine Vesque 2014 @jasmineVesque#wcto
53. They can be elegant
©Jasmine Vesque 2014 @jasmineVesque#wcto
60. or a bygone era
©Jasmine Vesque 2014 @jasmineVesque#wcto
61. 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!”
~ Typographic Web Design by Laura Franz
©Jasmine Vesque 2014 @jasmineVesque#wcto
73. How to display fonts on your site?
©Jasmine Vesque 2014 @jasmineVesque#wcto
74. Fonts as a Service
google.com/fonts/
fontsquirrel.com/
typekit.com/ ($)
fontdeck.com/ ($)
and others
©Jasmine Vesque 2014 @jasmineVesque#wcto
79. Typekit Fonts for WordPress
©Jasmine Vesque 2014 @jasmineVesque#wcto
http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/
80. How to use Google Fonts
©Jasmine Vesque 2014 @jasmineVesque#wcto
84. Add font to CSS
h1{
font-family: 'Arbutus Slab', Georgia, serif;
}
Always add a fallback font
©Jasmine Vesque 2014 @jasmineVesque#wcto
85. 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/
©Jasmine Vesque 2014 @jasmineVesque#wcto
86. 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
©Jasmine Vesque 2014 @jasmineVesque#wcto