1. 1. Typography & WordPress Andy Staple Designer & Front-End Developer @AndyStaple
2. 2. About Me Hi, Im Andy Im 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/wcyhm 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. What is Typography? The style and appearance of printed or digital letterforms. 5
6. 6. Type Anatomy and Style A very, very broad view of some elements and classications 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. 7. Type Anatomy Classication 7
8. 8. Type Anatomy Classication Display Typefaces Not typically well suited for extended amounts of text, or at smaller sizes. 8
9. 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. 10. Youre a nancial 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. 11. Youre managing the website for a Sports Car Racing Team, what type of headings would you think t? Typography & its effect on people Mood Performance Racing Performance Racing Riesling Nitro 11
12. 12. In 2012, a writer for the New York Times conducted an interesting experiment. It was thought to be a simple quiz to nd 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 condence. Typography & its effect on people Credulity & Condence Source: [2] 12
13. 13. Typography & its effect on people Credulity & Condence Source: [2] 13
14. 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. 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. 16. Typography & its effect on people Aesthetics and Mood Source: [4] 16
17. 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 theyd been reading. 3 minutes, 18 seconds average underestimate when reading good typography. 24 seconds average underestimate when reading poor typography. 17
18. 18. Typography & its effect on people Comic Sans Source: [3] Proof that even scientists nd typography hard. and that Vincent Connare has a good sense of humor. 18
19. 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. 20. Readability Font Style and Purpose The font you choose has a huge role in readability. Certain fonts are built specically to be used at larger sizes. Avoid very dramatic or exaggerated styles in the paragraph font. 20
21. 21. Readability Font Anatomy Use x-height to nd a suitable font for smaller sizes and longer sections of text. Example set in Georgia 21
22. 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. 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 nd out. - Dont use Papyrus (Im looking at you Alternative Health Sites) Readability Questions to think about 23
24. 24. Readability Leading / Line-Height 24 image from: https://vimeo.com/103004655
25. 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. 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. 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. 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. 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. 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. 31. Visual Hierarchy Examples 31
32. 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. 33. There are thousands upon thousands of fonts available for you to use on your websites. Choosing your Typefaces 33
34. 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 werent thought of as web- safe on your website previously. Choosing Fonts What is Available? 34
35. 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 well get into shortly). Choosing Fonts Web Fonts(@font-face) 35
36. 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. 37. Look for a font that works well in paragraph form rst. 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. 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. 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. 40. If youre 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. 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. 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. 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. 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. 45. Designers, Developers and Weekend-Warriors who can wrangle some HTML and CSS will have more exibility in controlling exactly how they want their typography to display. If youre not in the groups above, dont worry. There is still a lot you can do, and WordPress can make it easier for you. Implementation 45
46. 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. 47. Implementing Web Fonts with Plugins 47 Typekit Fonts for WordPress Add Support for Typeset Fonts without editing your themes template les. https://wordpress.org/plugins/ typekit-fonts-for-wordpress/ Requires a Typekit Account.
48. 48. Implementing Web Fonts with Plugins 48 Font Squirrel (Unocial) Lets you sort through Font Squirrel Fonts and choose to add new fonts to your site. https://wordpress.org/plugins/ font-squirrel/
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: Simple Pull Quote Plugin http://wordpress.org/extend/ plugins/ simple-pull-quote/
52. 52. Implementing Styling the WYSIWYG Editor 52 What you see is often not what you get. We can x 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 youll 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 Type Tester http://www.typetester.org 54
55. 55. Additional Resources CSS Typeset http://www.csstypeset.com 55
56. 56. Additional Resources Typeplate http://www.Typeplate.com 56
57. 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 ndings 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. 58. Thank You! Feel Free to message me with any questions or comments. Twitter: @AndyStaple 58