Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Typography & WordPress
Andy Staple
Designer & Front-End Developer
@AndyStaple
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 Word...
Where are the Slides?
Slides are available at:
staplewebdesign.com/wcroc
3
The Goals of this Discussion
• to convince you that typography matters.*

• to show simple and not-quite-as-simple ways to...
The Goals of this Discussion
… and to ruin your day when you’re walking down the street.
5
What is Typography?
The style and appearance of printed or digital
letterforms.
6
Type Anatomy and Style
A very, very broad view of some elements and
classifications of type.
People who love ideas must hav...
Type Anatomy
Classification
8
Type Anatomy
Classification
Display Typefaces
Not typically well suited for extended amounts of text, or at
smaller sizes.
9
You may be thinking

“…but no one notices
typography”
• Trustworthiness
• Engagement
• Playfulness
• Somberness
You should...
You’re a financial blogger, and want your opinion
taken seriously.
Typography & its effect on people

Trustworthiness
Highe...
You’re managing the website for a Sports Car Racing
Team, what type of headings would you think fit?
Typography & its effec...
In 2012, a writer for the New
York Times conducted an
interesting experiment. It was
thought to be a simple quiz to
find ou...
Typography & its effect on people

Credulity & Confidence
Source: [2]
14
In a quasi-experiment, a college
student named Phil Renaud attributed
changes in essay grades to his font
choices.
Could a...
Two Experiments Conducted by Kevin Larson (Microsoft) and
Rosalind Picard (MIT) examined how good versus bad typography
af...
Typography & its effect on people

Aesthetics and Mood
Source: [4]
17
Results: Problem Solving after reading the New Yorker article.
Typography & its effect on people

Aesthetics and Mood
Sour...
Typography & its effect on people

Comic Sans
Source: [3]
Proof that even scientists
find typography hard.
…and that Vincen...
The ease in which individual glyphs (e.g. characters, punctuation) are
recognizable and distinguishable from one another.
...
Readability

Font Style and Purpose
The font you choose has a huge role in readability.
Certain fonts are built specificall...
Readability

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

Font Anatomy
Adobe Garamond Pro - 20pt
Maecenas sed diam eget risus varius
blandit sit amet non magna.
Maecen...
Do you or others struggle when going from one line to the next in
a paragraph?
- The Leading (Line-Height) could be too sm...
Readability

Leading / Line-Height
25
image from: https://vimeo.com/103004655
Leading:
The Space between lines
of text.
in CSS:
p {
line-height: 1.3;
}
Readability

Leading / Line-Height
Maecenas sed ...
Leading:
The Space between lines
of words.
in CSS:
p {
line-height: 2.0;
}
Readability

Leading / Line-Height
Maecenas sed...
Leading:
The Space between lines
of words.
in CSS:
p {
line-height: 1.0;
}
Readability

Leading / Line-Height
Maecenas sed...
Hierarchy is the arrangement and stylizing of elements that a user
sees. It expresses the relative importance of items on ...
A Structured Hierarchy is very important to keep your visitors comfortable
with your content.
Different ways to show Visua...
A Typical WordPress
Article
Simple but useful hierarchy
in a formatted post.
What would this look like
without any visual ...
Visual Hierarchy

Examples
32
A great example in the wild
of simple visual hierarchy.
Visual Hierarchy

Examples
33
http://dearestnature.com/blog/2012/1...
There are thousands upon thousands of fonts
available for you to use on your websites.


Choosing your Typefaces
34
Simplest Solution are web-safe fonts.
Web-safe fonts are fonts that are typically pre-installed on a vast
majority of devi...
Well supported by most devices and web browsers.
Watch for Rendering differences between Operating Systems and
Browsers.
@...
There are many services that allow you to load quality web-fonts for you. 



Paid Services:
• Typekit - http://www.typeki...
Look for a font that works well in paragraph form first. This is what
people will be reading most. General rule for your an...
Building an Eye for great combinations of multiple fonts is not easy. It
takes time. There are things you can do though.

...
• Find what Time Period the typeface was designed in, and combine
typefaces from similar dates.
• Combining a Blackletter ...
If you’re unsure of what fonts work best on your website, experiment.
You can also look at some sources online or off, tha...
You have a ton of options at your disposal to add
some personality and functionality to your
typography on your WordPress ...
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 eleg...
A Brief paragraph or
block of text that
serves as an
introduction to the text
below.
Styling Your Voice 

Decks
44
http://...
Quotes, when styled
correctly can be used
to add emphasis to
intriguing parts of an
article.
You can grab your
readers att...
Designers, Developers and Weekend-Warriors who can wrangle
some HTML and CSS will have more flexibility in controlling exac...
Implementing
Web Fonts with Plugins
47
Easy Google Fonts Plugin

Allows you to use any font in
the Google Fonts Library -
...
Implementing
Web Fonts with Plugins
48
Typekit Fonts for WordPress

Add Support for Typeset Fonts
without editing your the...
Implementing
Drop Caps and Initial Caps
49
Here is a relatively simple CSS
technique to use progressive
enhancement to sho...
Implementing 

Decks with CSS
50
A simple way to include Decks to your
posts and/or pages via CSS.
.entry-content p:first-...
Implementing
Block-Quotes & Pull-Quotes
51
Block Quotes:

Button built-in to the Post Editor
and can be styled via CSS. Mo...
Implementing

Styling the WYSIWYG Editor
52
What you see is often not what you
get. We can fix it.



You (or the theme des...
Additional Resources
Typecast
http://www.typecast.com
53
Additional Resources
Typewolf
https://www.typewolf.com/
54
Additional Resources
Font Squirrel
https://www.fontsquirrel.com/
55
Additional Resources
Type Tester
http://www.typetester.org
56
Additional Resources
CSS Typeset
http://www.csstypeset.com
57
References
1. “The Secret Lives of Fonts” - Phil Renaud
http://web.archive.org/web/20100403022212/http://fadtastic.net/200...
Thank You!
Feel Free to catch me here with any questions or comments. If
you’re shy, you can also tweet at me from the pro...
Upcoming SlideShare
Loading in …5
×

Typography & WordPress - WordCamp Rochester 2016

615 views

Published on

A WordCamp Presentation on Typography, some basic aspects of it including how to choose different fonts for your website, why you should care about typography, and some specific WordPress tips and plugins to help out.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Typography & WordPress - WordCamp Rochester 2016

  1. 1. Typography & WordPress Andy Staple Designer & Front-End Developer @AndyStaple
  2. 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. 3. Where are the Slides? Slides are available at: staplewebdesign.com/wcroc 3
  4. 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. 5. The Goals of this Discussion … and to ruin your day when you’re walking down the street. 5
  6. 6. What is Typography? The style and appearance of printed or digital letterforms. 6
  7. 7. 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 7 “ ”
  8. 8. Type Anatomy Classification 8
  9. 9. Type Anatomy Classification Display Typefaces Not typically well suited for extended amounts of text, or at smaller sizes. 9
  10. 10. 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 10
  11. 11. 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 11
  12. 12. 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 12
  13. 13. 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] 13
  14. 14. Typography & its effect on people
 Credulity & Confidence Source: [2] 14
  15. 15. 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 15
  16. 16. 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] 16
  17. 17. Typography & its effect on people
 Aesthetics and Mood Source: [4] 17
  18. 18. 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. 18
  19. 19. 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. 19
  20. 20. 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 20
  21. 21. 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. 21
  22. 22. Readability
 Font Anatomy Use x-height to find a suitable font for smaller sizes and longer sections of text. Example set in Georgia 22
  23. 23. 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 23
  24. 24. 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 24
  25. 25. Readability
 Leading / Line-Height 25 image from: https://vimeo.com/103004655
  26. 26. 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 26
  27. 27. 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 27
  28. 28. 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 28
  29. 29. Hierarchy is the arrangement and stylizing of elements that a user sees. It expresses the relative importance of items on the page. 
 Visual Hierarchy 29
  30. 30. 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 30
  31. 31. A Typical WordPress Article Simple but useful hierarchy in a formatted post. What would this look like without any visual cues? Visual Hierarchy
 Examples 31
  32. 32. Visual Hierarchy
 Examples 32
  33. 33. A great example in the wild of simple visual hierarchy. Visual Hierarchy
 Examples 33 http://dearestnature.com/blog/2012/10/an-interview-with-laura-e-pritchett/
  34. 34. There are thousands upon thousands of fonts available for you to use on your websites. 
 Choosing your Typefaces 34
  35. 35. 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? 35
  36. 36. 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) 36
  37. 37. 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/ • Fonts.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 37
  38. 38. 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 38
  39. 39. 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 Typefaces 39
  40. 40. • Find what Time Period the typeface was designed in, and combine typefaces from similar dates. • Combining a Blackletter and a Geometric Sans is hard to pull off. • Avoid typefaces that are too similar in style. Choosing Fonts
 Combining Multiple Typefaces 40
  41. 41. 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
 • https://www.typewolf.com/ • http://justmytype.co/ • http://hellohappy.org/beautiful-web-type/ • http://fontsinuse.com/ • http://typographica.org/category/typeface-reviews/ Choosing Fonts
 Find Some Inspiration 41
  42. 42. 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 42
  43. 43. 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 43 http://jessicahische.is/thinkingthoughts
  44. 44. A Brief paragraph or block of text that serves as an introduction to the text below. Styling Your Voice 
 Decks 44 http://www.smashingmagazine.com/2015/04/16/ building-custom-wordpress-archive-page/
  45. 45. 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 45
  46. 46. 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 46
  47. 47. Implementing Web Fonts with Plugins 47 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/
  48. 48. Implementing Web Fonts with Plugins 48 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.
  49. 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. 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. 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: Perfect Pullquotes https://wordpress.org/plugins/perfect- pullquotes/
  52. 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. 53. Additional Resources Typecast http://www.typecast.com 53
  54. 54. Additional Resources Typewolf https://www.typewolf.com/ 54
  55. 55. Additional Resources Font Squirrel https://www.fontsquirrel.com/ 55
  56. 56. Additional Resources Type Tester http://www.typetester.org 56
  57. 57. Additional Resources CSS Typeset http://www.csstypeset.com 57
  58. 58. 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 58
  59. 59. Thank You! Feel Free to catch me here with any questions or comments. If you’re shy, you can also tweet at me from the protection of your screen. Twitter: @AndyStaple 59

×