Typography & WordPress

Typography & WordPress
Andy Staple
Designer & Front-End Developer
@AndyStaple
Saturday, September 14, 13

About Me
Hi, I’m Andy
I’m a Designer and Front-End Developer at Staple Web Design, also
the Co-Founder of the Buffalo WordPress Users Meetup and
WordCamp Buffalo.
Web: staplewebdesign.com
Twitter: @AndyStaple

“Where are the slides”

Typography
Design or selection of letter forms to be
organized into words and sentences and
printed or displayed electronically.
Originated after the invention of printing from
movable type in the mid 15th century.

The Goals of this Talk
To convince you that typography matters*
Show some simple and not-so-simple ways to
make it better on your websites.
* Using some empirical evidence even!

Typography
“People who love ideas must have a love of words,
and that means, given a chance, they take a vivid
interest in the clothes which words wear.”
- Beatrice Ward

Type Anatomy
A very, very, very broad view of some elements and
classiﬁcations of type.

Classiﬁcation
Serif vs Sans-Serif typefaces
Type Anatomy

Classiﬁcation
Display Typefaces.
Not typically well suited for extended amounts of text,
or at smaller sizes.
Type Anatomy

“…but no one notices the
difference Andy”
You should care what your website is portraying itself
as. Some characteristics a website might aspire
towards:
- Trustworthiness
- Engagement
- Playfulness
- Somberness
Your Typography helps!
You may be thinking

“We see type as the clothes that words wear. You
have more than one outﬁt in your closet, because
you don’t wear the same thing to the office that
you wear to the beach.”
- Tobias Frere-Jones

Trustworthiness
You’re a ﬁnancial blogger, and want your opinion
taken seriously and to be trusted.
Typography & its affect on people
Higher interest rates mean slower
economic growth and less job creation.
Under normal circumstances, the effects of a
50 bp increase in 10-year rates would be
really big: cutting GDP growth by about 1.5
percentage points over two years and costing
about a million jobs.
Higher interest rates mean slower
economic growth and less job
creation. Under normal circumstances,
the effects of a 50 bp increase in 10-
year rates would be really big: cutting
GDP growth by about 1.5 percentage
points over two years and costing
about a million jobs.
Droid Serif - 18px Gotham Rounded - 20px

Magic Essays
In a quasi-experiment, a
college student named Phil
Renaud attributed changes
in essay grades to his font
choices.
Obviously many other
factors could be taken into
account, but this is
interesting.
Could a more controlled
study help these ﬁndings?
Source: [1]
Times New Roman Trebuchet MS Georgia
Essays: 11 Essays: 18 Essays: 23
Average: A- Average: B- Average: A

Perception & Confidence
In 2012, a writer for the New York
Times conducted an interesting
experiment. It was thought to be a
simple quiz to find out if the reader
was an optimist or pessimist.
In reality it was a test seeing if
typefaces had an effect on a readers
perception of credulity and their
confidence.
Source: [2]

Trustworthiness
Source: [2]

Comic Sans
Typography & its
affect on people
Source: [3]
Proof that even scientists ﬁnd
typography hard.
and that Vincent Connare has a
good sense of humor

Legibility
The ease in which individual glyphs (e.g.
characters, punctuation) are recognizable and
distinguishable from one another.

Readability
Focuses on larger sections of text. How much effort and
strain does it take to read extended amounts of content.
(e.g. a blog post)

1. Font Style and Purpose
The font you choose has a huge role in readability. Certain
fonts are built speciﬁcally to be used at larger sizes. These
are typically labelled as Display Fonts like we discussed.
In general, the paragraph/body font is what you’ll want to
put more attention into, as it has a larger affect on the
usability and readability.
Readability

2. Font Anatomy (again)
Other than actual legibility of the letters themselves, one of
the easiest ways to spot a candidate for a good font for use
at smaller sizes is the x-height.
Example below set in Georgia
Readability

2. Font Anatomy
Maecenas faucibus mollis interdum.
Donec ullamcorper nulla non metus
auctor fringilla. Donec sed odio dui.
Maecenas sed diam eget risus varius
blandit sit amet non magna.
Donec id elit non mi porta gravida at
eget metus. Etiam porta sem malesuada
magna mollis euismod. Aenean eu leo
quam. Pellentesque ornare sem lacinia
Readability
Maecenas faucibus mollis
interdum. Donec ullamcorper nulla
non metus auctor fringilla. Donec
sed odio dui. Maecenas sed diam
eget risus varius blandit sit amet
non magna.
Donec id elit non mi porta gravida
at eget metus. Etiam porta sem
malesuada magna mollis euismod.
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum.
Adobe Garamond Pro - 18px
Georgia - 18px
Maecenasfaucibusmollisinterdum.
Donecullamcorpernullanonmetus
auctorfringilla.Donecsedodiodui.
Maecenasseddiamegetrisusvarius
blanditsitametnonmagna.
Donecidelitnonmiportagravidaateget
metus.Etiamportasemmalesuadamagna
molliseuismod.Aeneaneuleoquam.
Pellentesqueornaresemlaciniaquam
venenatisvestibulum.
Freight Display Pro - 18px

A few Questions to Ponder
Do you or others struggle when going from one line to the next in
a paragraph?
- The Leading (Line-Height) could be too small
- The Measure (Line-Length) could be too large
Are your font sizes too small?
- Different typefaces are built for different size scales.
- There is no excuse for small type. The Fold DOES NOT exist.
Your readers will be happier with larger type.
Are you using fonts not built with readability in mind?
- Do a little research and ﬁnd out.
- Don’t use Papyrus (I’m looking at you Alternative Health Sites)
Readability

Leading / Line-Height
Leading
The space between
lines of words.
Originally named after
the lead around the
word when type was
ﬁrst cast.
CSS:
p {
line-height: 1.5;
}
Readability
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur blandit tempus
porttitor. Cras mattis consectetur purus sit
amet fermentum. Donec id elit non mi porta
gravida at eget metus. Integer posuere erat a
ante venenatis dapibus posuere velit aliquet.
Example

Leading
The space between
lines of words.
the lead around the
word when type was
ﬁrst cast.
CSS:
p {
line-height: 0.9;
}
Readability
Example

Leading
The space between
lines of words.
the lead around the
word when type was
ﬁrst cast.
CSS:
p {
line-height: 2.0;
}
Readability
Example

Hierarchy
Changing the display of fonts and elements on the
page to express the relative importance of each
section to the overall page

Including Structure
Including a structured Hierarchy is an great way for your visitors
to feel comfortable with your content.
It also reinforces to them what the important pieces of the page
are.
Some Ways to show Hierarchy:

• Font Family

• Font Sizes

• Font Weight & Styles (bold, italics, SMALL-CAPS)

• White Space
Hierarchy

Examples
Hierarchy
A typical WordPress post.
Simple but useful hierarchy
in a formatted post.
What would this look like
without it?

Examples
Hierarchy

Examples
Hierarchy
A great example in the wild.
http://dearestnature.com/
blog/2012/09/sea-grapes/

Aesthetics
You have even more at your disposal to add some
personality and functionality to your text on your
WordPress site(s).

Initial Caps, Drop Caps, Run-ins
An example to the right of a Drop
Cap and Run-in.
Brings Eye to the beginning of the
article and creates an elegant,
historical feel.
Aesthetics
http://jessicahische.is/thinkingthoughts

Decks
A brief bit of text that serves as an introduction to the text below.
Aesthetics
http://www.smashingmagazine.com/2011/08/29/the-lost-art-of-design-etiquette/

Block Quotes, Pull Quotes
Example Pull-Quote to the right.
Quotes, when styled correctly can
be used to add emphasis to
intriguing parts of an article to get
a readers interest.
Aesthetics

Implementation
Designers, Developers and Weekend Warriors who can wrangle
some HTML and CSS will have more ﬂexibility to customize their
sites.
If you’re not in the group above, don’t worry. You can still
implement quite a few of the things above, and WP can make it
easier.

@font-face
The @font-face rule in CSS is the best way to include non web-
safe fonts on your site.
There are many ways to integrate it on your site. Including some
that even beginners can tackle with some conﬁdence.
Generally well supported. There are rendering differences
between operating systems as well as browsers. Make sure to
test, test, and test some more just to be sure it works.
Implementation

@font-face
There are many services now that will allow you to display high-
quality fonts via @font-face to your website.
TypeKit - Typekit.com
Cloud.Typography - Cloud.Typography.com
Fontdeck - Fontdeck.com
Fonts.com - Fonts.com
Google Fonts - Google.com/fonts
FontSquirrel - fontsquirrel.com
Implementation

@font-face
Typecase Web Fonts - http://wordpress.org/plugins/typecase/
⁃ Choose from over 500 fonts from Google Web Fonts
• Typekit Fonts for WordPress
⁃ http://wordpress.org/plugins/typekit-fonts-for-wordpress/
• Fontdeck
⁃ http://wordpress.org/plugins/fontdeck/ oﬃcial fontdeck plugin - not
updated often
• Web Fonts Plugin
⁃ http://wordpress.org/plugins/web-fonts/ plugin that works with Fonts.com
and Google Fonts
⁃ Most recently updated, (WP 3.6)
• Custom Fonts on WordPress.com sites ($30)
http://en.support.wordpress.com/custom-design/custom-fonts/
Implementation

Drop Caps
Here is a relatively simple CSS
technique to use progressive
enhancement to show Drop Caps
to visitors.
p:first-child:first-letter {
color: #ef957d;
line-height: 72px;
font-size: 70px;
float: left;
margin-right: 8px;
}
remove ﬂoat: left; to create initial cap
Implementation

Decks with CSS
A simple way to include Decks via
CSS.
.entry-content p:first-child {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
Implementation

Block-Quotes & Pull Quotes
Block-quote:
Button built-in to the Post Editor
and can be styled via CSS. Most
themes have some styling to the
block-quotes.
Pull Quote:
Simple Pull Quote Plugin
http://wordpress.org/extend/
plugins/simple-pull-quote/
Implementation

Styling the WYSIWYG Editor
What you see typically isn’t
what you get. Fix that.
You can style the editor text, colors,
and other elements via CSS so that
when you’re typing your post, it
looks more like the real thing when
published.
http://codex.wordpress.org/
Function_Reference/add_editor_style
Implementation

Additional Resources
FontBook (iOS App)
$0.99

Typeplate
Typeplate.com

Lettering.js

Typecast.com

And of course, Books.
There are some great books if you’re interested in learning more.

Sources
1. “The Secret Lives of Fonts” - Phil Renaud
http://web.archive.org/web/20100403022212/http://fadtastic.net/2006/03/12/the-secret-lives-of-fonts/
2. “Hear, All Ye People; Hearken, O Earth” - Errol Morris
http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/
3. “CERN Scientist Inexplicably present Higgs Boson ﬁndings in Comic Sans”
http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson

Typography & WordPress

More Related Content

Similar to Typography & WordPress (20)

Recently uploaded (20)

Typography & WordPress