Typography in Web Design

Typography in Web Design
Presented by Jasmine Vesque
WordCamp Ottawa 2013
@Jasmine Vesque 2013 @jasmineVesque#wcottawa

A little about me
 Communications/Marketing/Webmaster
 Nedlaw Group
 Forget for a Moment Foundation
 Co-organizer of WordCamp Ottawa 2013
 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.”

Great Web Typography

Typography Basics

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

Display
Display Type
• Serif or sans-serif
• Best for headings or
short amounts of text

Bauhaus 93

Lobster

Bangers

Keania One

Script/Handwriting
Script/Handwriting • Best for headings or
short amounts of text

Brush Script STD

Cookie

Segoe Script

Sofia

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

Unreadable
Chocolate bar sugar plum gummies. Macaroon
topping powder jelly beans dessert oat cake
halvah. Tiramisu tiramisu dessert brownie. Cookie
lemon drops carrot cake dessert. I love pie
chocolate bar candy. Biscuit biscuit macaroon
biscuit jujubes. Cotton candy I love sesame snaps
bear claw sesame snaps. Chocolate cake pudding
candy canes powder. Faworki fruitcake pudding
liquorice halvah dessert.

Readable
Chocolate bar sugar plum gummies.
Macaroon topping powder jelly beans
dessert oat cake halvah. Tiramisu tiramisu
dessert brownie. Cookie lemon drops carrot
cake dessert. I love pie chocolate bar candy.
Biscuit biscuit macaroon biscuit jujubes.
Cotton candy I love sesame snaps bear claw
sesame snaps. Chocolate cake pudding
candy canes powder.
http://cupcakeipsum.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.
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

Really Big Text

Handwritten Type

Slab-Serif Font

Multi – Type

Vintage Revival

Simplified Content and
Typography

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

WP Google Fonts
http://wordpress.org/extend/plugins/wp-google-fonts/

FontMeister
http://wordpress.org/extend/plugins/fontmeister/
#wcottawa @jasmineVesque@Jasmine Vesque 2013

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

Questions?

Typography in Web Design

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Recently uploaded

Recently uploaded (20)

Typography in Web Design