typography & wordpress

Typography & WordPress

Andy StapleDesigner & Front-End Developer

@AndyStaple

Saturday, September 14, 13

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.comTwitter: @AndyStaple


http://www.staplewebdesign.com

http://www.staplewebdesign.com

http://twitter.com/AndyStaple

http://twitter.com/AndyStaple

“Where are the slides”


TypographyDesign 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.


The Goals of this TalkTo 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!


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


Type AnatomyA very, very, very broad view of some elements and classifications of type.


ClassificationSerif vs Sans-Serif typefaces

Type Anatomy


ClassificationDisplay Typefaces.

Not typically well suited for extended amounts of text, or at smaller sizes.

Type Anatomy


“…but no one notices the di!erence 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


“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 o!ce that you wear to the beach.”

- Tobias Frere-Jones


TrustworthinessYou’re a financial blogger, and want your opinion taken seriously and to be trusted.

Typography & its a"ect 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 e!ects 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


Magic EssaysIn 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?


Source: [1]

Times New Roman Trebuchet MS Georgia

Essays: 11 Essays: 18 Essays: 23

Average: A- Average: B- Average: A


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.


Source: [2]


TrustworthinessTypography & its a"ect on people

Source: [2]


Comic Sans


Source: [3]

Proof that even scientists find typography hard.

and that Vincent Connare has a good sense of humor


LegibilityThe ease in which individual glyphs (e.g. characters, punctuation) are recognizable and distinguishable from one another.


ReadabilityFocuses on larger sections of text. How much effort and strain does it take to read extended amounts of content. (e.g. a blog post)


1. Font Style and PurposeThe 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


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


2. Font AnatomyMaecenas 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

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.

Freight Display Pro - 18px


A few Questions to PonderDo 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


Leading / Line-HeightLeadingThe 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




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




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


Hierarchy

Changing the display of fonts and elements on the page to express the relative importance of each section to the overall page


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


ExamplesHierarchy

A typical WordPress post.

Simple but useful hierarchy in a formatted post.

What would this look like without it?


ExamplesHierarchy


ExamplesHierarchy

A great example in the wild.

http://dearestnature.com/blog/2012/09/sea-grapes/






Aesthetics

You have even more at your disposal to add some personality and functionality to your text on your WordPress site(s).


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




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/




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


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.


@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


@font-face

There are many services now that will allow you to display high-quality fonts via @font-face to your website.

TypeKit - Typekit.comCloud.Typography - Cloud.Typography.comFontdeck - Fontdeck.comFonts.com - Fonts.comGoogle Fonts - Google.com/fonts

FontSquirrel - fontsquirrel.com

Implementation


@font-faceTypecase 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


http://wordpress.org/plugins/typecase/

http://wordpress.org/plugins/typecase/

http://wordpress.org/plugins/typekit-fonts-for-wordpress/

http://wordpress.org/plugins/typekit-fonts-for-wordpress/

http://wordpress.org/plugins/fontdeck/

http://wordpress.org/plugins/fontdeck/

http://wordpress.org/plugins/web-fonts/

http://wordpress.org/plugins/web-fonts/

http://Fonts.com

http://Fonts.com

http://en.support.wordpress.com/custom-design/custom-fonts/

http://en.support.wordpress.com/custom-design/custom-fonts/

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


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


Block-Quotes & Pull Quotes

Block-quote:Button built-in to the Post Editorand can be styled via CSS. Most themes have some styling to the block-quotes.

Pull Quote:Simple Pull Quote Pluginhttp://wordpress.org/extend/plugins/simple-pull-quote/

Implementation


http://wordpress.org/extend/plugins/simple-pull-quote/




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






Additional ResourcesFontBook (iOS App)$0.99


Additional ResourcesTypeplateTypeplate.com


Additional ResourcesLettering.js


Additional ResourcesTypecast.com


Additional ResourcesAnd of course, Books.

There are some great books if you’re interested in learning more.


Sources1. “The Secret Lives of Fonts” - Phil Renaudhttp://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 Morrishttp://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


http://web.archive.org/web/20100403022212/http://fadtastic.net/2006/03/12/the-secret-lives-of-fonts/

http://web.archive.org/web/20100403022212/http://fadtastic.net/2006/03/12/the-secret-lives-of-fonts/

http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/

http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/

http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson

http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson

typography & wordpress

Design

typography people

trustworthiness typography

typography design

typography matters

people source

comic sans typography

good font

larger affect