Embed Size (px)
Citation preview
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 WordPress Users Meetup and WordCamp Buffalo.
Web: staplewebdesign.com Twitter: @AndyStaple
2
Where are the Slides?Slides are available at: staplewebdesign.com/wcyhm
3
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
What is Typography?
The style and appearance of printed or digital letterforms.
5
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
“”
Type Anatomy Classification
7
Type Anatomy ClassificationDisplay Typefaces
Not typically well suited for extended amounts of text, or at smaller sizes.
8
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
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
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
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
Typography & its effect on people Credulity & Confidence
Source: [2]
13
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
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
Typography & its effect on people Aesthetics and Mood
Source: [4]
16
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 secondsaverage underestimate when reading poor typography.
17
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
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
ReadabilityFont Style and PurposeThe 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
ReadabilityFont AnatomyUse x-height to find a suitable font for smaller sizes and longer sections of text.
Example set in Georgia
21
ReadabilityFont 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
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
Georgia - 20pt
Freight Display Pro - 20pt
22
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
Readability Leading / Line-Height
24
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 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
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
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
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
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 HierarchyIncluding Structure
29
A Typical WordPress Article
Simple but useful hierarchy in a formatted post.
What would this look like without any visual cues?
Visual HierarchyExamples
30
Visual HierarchyExamples
31
A great example in the wild of simple visual hierarchy.
Visual HierarchyExamples
32
http://dearestnature.com/blog/2012/10/an-interview-with-laura-e-pritchett/
There are thousands upon thousands of fonts available for you to use on your websites.
Choosing your Typefaces
33
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 FontsWhat is Available?
34
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 FontsWeb Fonts (@font-face)
35
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 FontsWeb Font Services
36
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 FontsActually Choosing a Font
37
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 FontsCombining Multiple Fonts
38
• 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 FontsCombining Multiple Typefaces
39
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 FontsFind Some Inspiration
40
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
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
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/
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
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
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/
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.
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/
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/
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;
}
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/
ImplementingStyling 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/
References1. “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
Thank You!Feel Free to message me with any questions or comments.
Twitter: @AndyStaple
58
