The document is a presentation about typography and its use in WordPress. It discusses how typography can impact readability, hierarchy, aesthetics, and perception. It provides examples of how to implement typographic techniques like drop caps, decks, block quotes, and custom fonts in WordPress through CSS. The presentation aims to convince the audience that typography matters and show simple ways to improve it for websites.
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
Saturday, September 14, 13
4. 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.
Saturday, September 14, 13
5. 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!
Saturday, September 14, 13
6. 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
Saturday, September 14, 13
7. Type Anatomy
A very, very, very broad view of some elements and
classifications of type.
Saturday, September 14, 13
10. “…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
Saturday, September 14, 13
11. “We see type as the clothes that words wear. You
have more than one outfit in your closet, because
you don’t wear the same thing to the office that
you wear to the beach.”
- Tobias Frere-Jones
Saturday, September 14, 13
12. Trustworthiness
You’re a financial 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
Saturday, September 14, 13
13. 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 findings?
Typography & its affect on people
Source: [1]
Times New Roman Trebuchet MS Georgia
Essays: 11 Essays: 18 Essays: 23
Average: A- Average: B- Average: A
Saturday, September 14, 13
14. 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.
Typography & its affect on people
Source: [2]
Saturday, September 14, 13
16. Comic Sans
Typography & its
affect on people
Source: [3]
Proof that even scientists find
typography hard.
and that Vincent Connare has a
good sense of humor
Saturday, September 14, 13
17. Legibility
The ease in which individual glyphs (e.g.
characters, punctuation) are recognizable and
distinguishable from one another.
Saturday, September 14, 13
18. 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)
Saturday, September 14, 13
19. 1. 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. 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
Saturday, September 14, 13
20. 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
Saturday, September 14, 13
21. 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
Saturday, September 14, 13
22. 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 find out.
- Don’t use Papyrus (I’m looking at you Alternative Health Sites)
Readability
Saturday, September 14, 13
23. Leading / Line-Height
Leading
The space between
lines of words.
Originally named after
the lead around the
word when type was
first 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
Saturday, September 14, 13
24. Leading / Line-Height
Leading
The space between
lines of words.
Originally named after
the lead around the
word when type was
first cast.
CSS:
p {
line-height: 0.9;
}
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
Saturday, September 14, 13
25. Leading / Line-Height
Leading
The space between
lines of words.
Originally named after
the lead around the
word when type was
first cast.
CSS:
p {
line-height: 2.0;
}
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
Saturday, September 14, 13
26. Hierarchy
Changing the display of fonts and elements on the
page to express the relative importance of each
section to the overall page
Saturday, September 14, 13
27. 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
Saturday, September 14, 13
28. Examples
Hierarchy
A typical WordPress post.
Simple but useful hierarchy
in a formatted post.
What would this look like
without it?
Saturday, September 14, 13
31. Aesthetics
You have even more at your disposal to add some
personality and functionality to your text on your
WordPress site(s).
Saturday, September 14, 13
32. 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
Saturday, September 14, 13
33. 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/
Saturday, September 14, 13
34. 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
Saturday, September 14, 13
35. Implementation
Designers, Developers and Weekend Warriors who can wrangle
some HTML and CSS will have more flexibility 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.
Saturday, September 14, 13
36. @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 confidence.
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
Saturday, September 14, 13
37. @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
Saturday, September 14, 13
38. @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/ official 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
Saturday, September 14, 13
39. 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 float: left; to create initial cap
Implementation
Saturday, September 14, 13
40. 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
Saturday, September 14, 13
41. 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
Saturday, September 14, 13
42. 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
Saturday, September 14, 13
47. Additional Resources
And of course, Books.
There are some great books if you’re interested in learning more.
Saturday, September 14, 13
48. 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 findings in Comic Sans”
http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson
Saturday, September 14, 13