Your SlideShare is downloading. ×
Typography & WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Typography & WordPress

823
views

Published on

Published in: Design, Technology

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
823
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Typography & WordPress Andy Staple Designer & Front-End Developer @AndyStaple Saturday, September 14, 13
  • 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
  • 3. “Where are the slides” 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
  • 8. Classification Serif vs Sans-Serif typefaces Type Anatomy Saturday, September 14, 13
  • 9. Classification Display Typefaces. Not typically well suited for extended amounts of text, or at smaller sizes. Type Anatomy 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
  • 15. Trustworthiness 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
  • 29. Examples Hierarchy Saturday, September 14, 13
  • 30. Examples Hierarchy A great example in the wild. http://dearestnature.com/ blog/2012/09/sea-grapes/ 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
  • 43. Additional Resources FontBook (iOS App) $0.99 Saturday, September 14, 13
  • 44. Additional Resources Typeplate Typeplate.com Saturday, September 14, 13
  • 45. Additional Resources Lettering.js Saturday, September 14, 13
  • 46. Additional Resources Typecast.com 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