A Brief Overview of Typography and how to improve the type on your WordPress websites.

1. Typography & WordPress
Andy Staple
Designer & Front-End Developer
@AndyStaple

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

3. Where are the Slides?
Slides are available at:
staplewebdesign.com/wcyhm
3

4. The Goals of this Discussion
• to convince you that typography matters.*
• to show simple and not-quite-as-simple ways to
make your WordPress site(s) better, with type.
* Using some empirical evidence even!
4

5. What is Typography?
The style and appearance of printed or digital
letterforms.
5

6. Type Anatomy and Style
A very, very broad view of some elements and
classifications of type.
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 Warde
6
“
”

7. Type Anatomy
Classification
7

8. Type Anatomy
Classification
Display Typefaces
Not typically well suited for extended amounts of text, or at
smaller sizes.
8

9. You may be thinking
“…but no one notices
typography”
• Trustworthiness
• Engagement
• Playfulness
• Somberness
You should care what your website is portraying itself
as. Some characteristics a website might aspire
towards
Your Typography Helps
9

10. You’re a financial blogger, and want your opinion
taken seriously.
Typography & its effect on people
Trustworthiness
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.
Gotham Rounded - 20ptPT Serif - 18pt
10

11. You’re managing the website for a Sports Car Racing
Team, what type of headings would you think fit?
Typography & its effect on people
Mood
Performance Racing
Performance Racing Riesling
Nitro
11

12. 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 a reader was an
optimist or pessimist.
In reality, it was a test seeing if
typefaces had an affect on the
readers perception of credulity
and their confidence.
Typography & its effect on people
Credulity & Confidence
Source: [2]
12

13. Typography & its effect on people
Credulity & Confidence
Source: [2]
13

14. In a quasi-experiment, a college
student named Phil Renaud attributed
changes in essay grades to his font
choices.
Could a more controlled study help
validate these results?
Typography & its effect on people
Magic Essays
Source: [1]
Times New
Roman
Trebuchet MS Georgia
11 Essays 18 Essays 23 Essays
Average: A- Average: B- Average: A
14

15. Two Experiments Conducted by Kevin Larson (Microsoft) and
Rosalind Picard (MIT) examined how good versus bad typography
affected 20 participants.
The participants would read an article from the New Yorker with good
or bad typography.
Typography & its effect on people
Aesthetics and Mood
Source: [4]
15

16. Typography & its effect on people
Aesthetics and Mood
Source: [4]
16

17. Results: Problem Solving after reading the New Yorker article.
Typography & its effect on people
Aesthetics and Mood
Source: [4]
4 / 10 participants solved the
problem correctly after reading
with good typography.
0 / 9 participants solved the
problem correctly after reading
with poor typography.
Participants were also interrupted while reading the article, and asked
how long they’d been reading.
3 minutes, 18 seconds
average underestimate when
reading good typography.
24 seconds
average underestimate when
reading poor typography.
17

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

19. The ease in which individual glyphs (e.g. characters, punctuation) are
recognizable and distinguishable from one another.
Legibility
Focuses on larger sections of text. How much effort and strain does it
take to read extended amounts of text (e.g. a blog post).
Readability
19

20. Readability
Font Style and Purpose
The font you choose has a huge role in readability.
Certain fonts are built specifically to be used at larger
sizes. Avoid very dramatic or exaggerated styles in the
paragraph font.
20

21. Readability
Font Anatomy
Use x-height to find a suitable font for smaller sizes
and longer sections of text.
Example set in Georgia
21

22. Readability
Font Anatomy
Adobe Garamond Pro - 20pt
Maecenas sed diam eget risus varius
blandit sit amet non magna.
Maecenas faucibus mollis interdum.
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor
auctor. Vestibulum id ligula porta
felis euismod semper.
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Vivamus sagittis lacus
Maecenas sed diam eget risus
varius blandit sit amet non
magna. Maecenas faucibus
mollis interdum. Aenean eu leo
quam. Pellentesque ornare sem
lacinia quam venenatis
vestibulum. Vivamus sagittis
lacus vel augue laoreet rutrum
faucibus dolor auctor.
Vestibulum id ligula porta felis
euismod semper.
Aenean eu leo quam.
Pellentesque ornare sem lacinia
quam venenatis vestibulum.
Vivamus sagittis lacus
Maecenasseddiamegetrisusvarius
blanditsitametnonmagna.Maecenas
faucibusmollisinterdum.Aeneaneu
leoquam.Pellentesqueornaresem
laciniaquamvenenatisvestibulum.
Vivamussagittislacusvelaugue
laoreetrutrumfaucibusdolorauctor.
Vestibulumidligulaportafelis
euismodsemper.
Aeneaneuleoquam.Pellentesque
ornaresemlaciniaquamvenenatis
vestibulum.Vivamussagittislacus
Georgia - 20pt
Freight Display Pro - 20pt
22

23. 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 find out.
- Don’t use Papyrus (I’m looking at you Alternative Health Sites)
Readability
Questions to think about
23

24. Readability
Leading / Line-Height
24
image from: https://vimeo.com/103004655

25. Leading:
The Space between lines
of text.
in CSS:
p {
line-height: 1.3;
}
Readability
Leading / Line-Height
Maecenas sed diam eget risus varius
blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Donec id elit
non mi porta gravida at eget metus. Lorem
ipsum dolor sit amet, consectetur
adipiscing elit.
Example
25

26. Leading:
The Space between lines
of words.
in CSS:
p {
line-height: 2.0;
}
Readability
Leading / Line-Height
Maecenas sed diam eget risus varius
blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Donec id elit
non mi porta gravida at eget metus. Lorem
ipsum dolor sit amet, consectetur
adipiscing elit.
Example
26

27. Leading:
The Space between lines
of words.
in CSS:
p {
line-height: 1.0;
}
Readability
Leading / Line-Height
Maecenas sed diam eget risus varius
blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Donec id elit
non mi porta gravida at eget metus. Lorem
ipsum dolor sit amet, consectetur
adipiscing elit.
Example
27

28. Hierarchy is the arrangement and stylizing of elements that a user
sees. It expresses the relative importance of items on the page.
Visual Hierarchy
28

29. A Structured Hierarchy is very important to keep your visitors comfortable
with your content.
Different ways to show Visual Hierarchy:
- Font Family
- Font Sizes
- Font Weight & Style (bold, italics, small-caps)
- White Space
Visual Hierarchy
Including Structure
29

30. A Typical WordPress
Article
Simple but useful hierarchy
in a formatted post.
What would this look like
without any visual cues?
Visual Hierarchy
Examples
30

31. Visual Hierarchy
Examples
31

32. A great example in the wild
of simple visual hierarchy.
Visual Hierarchy
Examples
32
http://dearestnature.com/blog/2012/10/an-interview-with-laura-e-pritchett/

33. There are thousands upon thousands of fonts
available for you to use on your websites.
Choosing your Typefaces
33

34. Simplest Solution are “web-safe” fonts.
Web-safe fonts are fonts that are typically pre-installed on a vast
majority of devices.
(Multiple weights of Arial, Helvetica, Georgia, Times New Roman,
Impact, etc…)
Exponentially more choice with “web fonts” (aka @font-face fonts).
A relatively new way to show fonts that weren’t thought of as “web-
safe” on your website previously.
Choosing Fonts
What is Available?
34

35. Well supported by most devices and web browsers.
Watch for Rendering differences between Operating Systems and
Browsers.
@font-face
The CSS rule to add fonts to your site. (Or let a plugin do it for you,
which we’ll get into shortly).
Choosing Fonts
Web Fonts(@font-face)
35

36. There are many services that allow you to load quality web-fonts for you.
Paid Services:
• Typekit - http://www.typekit.com
• Cloud Typography - http://cloud.typography.com/
• http://fonts.com/
• Font Deck - http://fontdeck.com
Free:
• Google Fonts - http://google.com/fonts
• FontSquirrel - http://www.fontsquirrel.com
Choosing Fonts
Web Font Services
36

37. Look for a font that works well in paragraph form first. This is what
people will be reading most. General rule for your anchor font:
• Legibility, Readability, Large X-Height, Simple form
• Make sure the font has multiple weights, and italics
• Normal/Regular, Bold, Light/Thin (and italic versions of each)
• Many Type Designers write descriptions of their typefaces. This can
help you sort out what style the font is.
Choosing Fonts
Actually Choosing a Font
37

38. Building an Eye for great combinations of multiple fonts is not easy. It
takes time. There are things you can do though.
• Limit yourself to 2, at most 3 different fonts
• Find typefaces from the same Foundry or Designer
• Find “Superfamily” Fonts
• Droid Sans and Droid Serif
• FF Meta Sans and FF Meta Serif
• Roboto and Roboto Slab
• Lucida Sans and Lucida Serif
Choosing Fonts
Combining Multiple Fonts
38

39. • Find what Time Period the typeface was designed in, and combine
typefaces from similar dates.
• Combining a Blackletter font with a Geometric Sans is hard to
pull off.
• Avoid typefaces that are too similar in style.
Choosing Fonts
Combining Multiple Typefaces
39

40. If you’re unsure of what fonts work best on your website, experiment.
You can also look at some sources online or off, that give some good
ideas for typeface combinations
• http://justmytype.co/
• http://hellohappy.org/beautiful-web-type/
• http://fontsinuse.com/
• http://typographica.org/category/typeface-reviews/
Choosing Fonts
Find Some Inspiration
40

41. You have a ton of options at your disposal to add
some personality and functionality to your
typography on your WordPress sites.
Styling Your Voice
41

42. An example to the right of a
Drop Cap and Run-in.
Brings the users eye to the
beginning of the article and
creates an elegant,
sophisticated feel.
Styling Your Voice
Initial Caps, Drop Caps, Run-Ins
42
http://jessicahische.is/thinkingthoughts

43. A Brief paragraph or
block of text that
serves as an
introduction to the text
below.
Styling Your Voice
Decks
43
http://www.smashingmagazine.com/2015/04/16/
building-custom-wordpress-archive-page/

44. Quotes, when styled
correctly can be used
to add emphasis to
intriguing parts of an
article.
You can grab your
readers attention.
Styling Your Voice
Block Quotes, Pull Quotes
44

45. Designers, Developers and Weekend-Warriors who can wrangle
some HTML and CSS will have more flexibility in controlling exactly
how they want their typography to display.
If you’re not in the groups above, don’t worry. There is still a lot you
can do, and WordPress can make it easier for you.
Implementation
45

46. Implementing
Web Fonts with Plugins
46
Easy Google Fonts Plugin
Allows you to use any font in
the Google Fonts Library -
and you can preview your
site with the customizer.
https://wordpress.org/
plugins/easy-google-fonts/

47. Implementing
Web Fonts with Plugins
47
Typekit Fonts for WordPress
Add Support for Typeset Fonts
without editing your themes
template files.
https://wordpress.org/plugins/
typekit-fonts-for-wordpress/
Requires a Typekit Account.

48. Implementing
Web Fonts with Plugins
48
Font Squirrel (Unofficial)
Lets you sort through Font
Squirrel Fonts and choose to
add new fonts to your site.
https://wordpress.org/plugins/
font-squirrel/

49. Implementing
Drop Caps and Initial Caps
49
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;
}
Or Use a Plugin:
https://wordpress.org/plugins/simple-drop-cap/

50. Implementing
Decks with CSS
50
A simple way to include Decks to your
posts and/or pages via CSS.
.entry-content p:first-child {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}

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

52. Implementing
Styling the WYSIWYG Editor
52
What you see is often not what you
get. We can fix it.
You (or the theme designer) can style
the editor text, colors, and other
elements via CSS so that your
WYSIWYG editor is much closer to
seeing what you’ll be getting.
https://codex.wordpress.org/
Editor_Style
https://tommcfarlin.com/wordpress-editor-styles/

53. Additional Resources
Typecast
http://www.typecast.com
53

54. Additional Resources
Type Tester
http://www.typetester.org
54

55. Additional Resources
CSS Typeset
http://www.csstypeset.com
55

56. Additional Resources
Typeplate
http://www.Typeplate.com
56

57. References
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 findings in Comic Sans”
http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson
4. “The Aesthetics of Reading”
http://affect.media.mit.edu/pdfs/05.larson-picard.pdf
57

58. Thank You!
Feel Free to message me with any questions or comments.
Twitter: @AndyStaple
58