typography: the backbone of your website

T YPOGR APHY

THE BACKBONE OF YOUR WEBSITE

PR ES E NTE D BY Alison Chandler

Alison Chandler

I design websites and visual brand identities.

This is my fourth WordCamp.

My first time to present.

#wcatl @alisonrchandler@wordcampatl

1ALI SO N C HAN D LE R // WO R D C A M P ATL ANTA 2017

Typography is the visual component of the written word.

ALI SO N C HAN D LE R // WO R D C A M P ATL ANTA 2017 2

Fonts


THE #1 THINGYOU SHOULD CARE ABOUT


Capture attention

Connect emotionally

Be memorable

Build credibility


Verdana

Arial

Helvetica

Courier

Copperplate

Times

Times New Roman

Georgia

Geneva Gill Sans

Tahoma

Trebuchet

Comic Sans

Lucida

Palatino

Impact

W E B S A F E F O N T S


2011

2%

2016

60%

D E F A U LT W E B S A F E F O N T S V S C U S T O M W E B F O N T S

WHAT GIVES?

PARALYZED BY CHOICES


Is it legible?It is readable?


Distinguishable letter forms

L E G I B I L I T Y

WordPressWordPress

WordPressWordPress


WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other. WordCamp Atlanta is perfect for any level of WordPress knowledge. We have specific tracks for those brand new to WordPress, business sessions for WordPress users and deep dives for the experienced developer.

Easy to absorb

More important than style

R E A D A B I L I T Y


A N AT O M Y


Organized Chaos


slab serif

C L A S S I F I C AT I O N S

Tserif

san serif

display


TC L A S S I F I C AT I O N S

slab serif

serif

san serif

display



slab serif

serif

san serif

display


D O N ’ T D O T H I S


S A N S E R I FContemporary, streamlined

DIN

Helvetica

Open Sans

Gill Sans

Proxima Nova

S E R I Fclassic, traditional

Adobe Garamond

Alegreya

Minion Pro

Georgia

Libre Baskerville

D I S P L A YHeadlines, decorative

Playfair Display

Hanley Script

Marker Felt

Lobster

Brixton Outline

S L A B S E R I Fchunky, geometric serifs

Adelle

Caecilia

Museo Slab

Chaparral Pro

Alianza Slab

R E C O M M E N D E D T Y P E F A M I L I E S


T Y P E F A C E D E S I G N E R D A N R H AT I G A N


Font Pairings


O N E T Y P E F A M I LY, M A N Y VA R I AT I O N S


What is WordCamp?WordCamps are informal, community-organized

events that are put together by WordPress users

like you. Everyone from casual users to core

developers participate, share ideas, and get to know

each other. WordCamp Atlanta is perfect for any

level of WordPress knowledge. We have specific

tracks for those brand new to WordPress, business

sessions for WordPress users and deep dives for the

experienced developer.

C L A S S I C C O M B I N AT I O N S

San serif with serif

Don’t use the same classification

What is WordCamp?WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other. WordCamp Atlanta is perfect for any level of WordPress knowledge. We have specific tracks for those brand new to WordPress, business sessions for WordPress users and deep dives for the experienced.


S T Y L E G U I D E F O R H TA G S


jeannine cares See why owner and pack leader, Jeannine Yep, started K9 Fitness.

» meet jeannine

latest photos of our pack(s)

ready to join our pack? have a puppy? have a dog ?

OR

Our clients love us You will too.

contactDetails

WHO Jeannine Yep

CHAT [email protected]

CALL 650.278.0234

San Francisco Neighborhoods Served

Noe Valley

Glen Park

Mission

Castro

Diamond Heights

Duboce Triangle/Lower Haight

Cole Valley

Limited areas of Daly City and

Park Merced/Lakeside

Seeking off-leash dog adventures

filled with exercise, socialization, and fun? You’re in the

right place.

When it comes to off-leash dog walking in San Francisco, we go

the extra mile(s)!

cta here

Our pack has a better social life than you do (and that’s the way we like it).All of our award-winning all-inclusive adventures include 90-120

minutes of running, playing and exploring in the great outdoors—

always with fun, safety and affection as top priorities.

Trust us—after a day like this, you won’t have to rush home.Something here more about training and puppy kindergarten. After

joining our bonded pack, your dog will have an all-inclusive and

safe off-leash adventure—complete with transportation, exclusive

locations, fun and lots of attention (and even occasional costumes).

You’ll even get to see photos and videos (on Instagram and

Facebook) as you both snuggle on the couch at the end of day!

Does this sound like you?

You should be able to go home and snuggle up with your dog knowing you provided everything he/she needs.

VOTED #1 BEST DOG WALKER IN SAN FRANCISCO IN 2015 AND 2016!

Socializing after work is out of the question because you have to get home and walk the dog.

You wonder why you got a dog in the first place and consider giving your dog to someone else.

You're worried that you aren’t the best provider for you dog and feel guilty about being away.


OR

2011

• SAN FR AN CIS CO •

¶

K9 FITNESS

jeannine cares See why owner and pack leader, Jeannine Yep, started K9 Fitness.

» meet jeannine

latest photos of our pack(s)


OR

Our clients love us You will too.

contactDetails

WHO Jeannine Yep

CHAT [email protected]

CALL 650.278.0234

San Francisco Neighborhoods Served

Noe Valley

Glen Park

Mission

Castro

Diamond Heights

Duboce Triangle/Lower Haight

Cole Valley

Limited areas of Daly City and

Park Merced/Lakeside

Seeking off-leash dog adventures

filled with exercise, socialization, and fun? You’re in the

right place.

When it comes to off-leash dog walking in San Francisco, we go

the extra mile(s)!

cta here

Our pack has a better social life than you do (and that’s the way we like it).All of our award-winning all-inclusive adventures include 90-120

minutes of running, playing and exploring in the great outdoors—

always with fun, safety and affection as top priorities.

Trust us—after a day like this, you won’t have to rush home.Something here more about training and puppy kindergarten. After

joining our bonded pack, your dog will have an all-inclusive and

safe off-leash adventure—complete with transportation, exclusive

locations, fun and lots of attention (and even occasional costumes).

You’ll even get to see photos and videos (on Instagram and

Facebook) as you both snuggle on the couch at the end of day!

Does this sound like you?

You should be able to go home and snuggle up with your dog knowing you provided everything he/she needs.

VOTED #1 BEST DOG WALKER IN SAN FRANCISCO IN 2015 AND 2016!

Socializing after work is out of the question because you have to get home and walk the dog.

You wonder why you got a dog in the first place and consider giving your dog to someone else.

You're worried that you aren’t the best provider for you dog and feel guilty about being away.


OR

2011

• SAN FR AN CIS CO •

¶

K9 FITNESS

NOW WHAT?

IT’S NOTABOUT YOU


H I E R A R C H Y


F O N T S I Z E S

p {font-size: 16px;}

The size of a typeface refers to the size of the body, the

imaginary area that encompasses each character in a font. This

is why a typeface with a large x-height appears bigger than

typeface with a small x-height at the same point size.

Type sizes are generally expressed in points. The point is a

typographic unit of measure corresponding to 1/12th of a pica.

p {font-size: 10px;}

The size of a typeface refers to the size of the body, the imaginary area that encompasses

each character in a font. This is why a typeface with a large x-height appears bigger than

typeface with a small x-height at the same point size.

Type sizes are generally expressed in points. The point is a typographic unit of measure

corresponding to 1/12th of a pica. At 100% zoom one computer point corresponds with one

image pixel on a computer monitor display.

Use a body font size between 14-22 px

Adjust the size for smaller screens


p {line-height: 100%}

The vertical space between lines of text, measured from baseline to baseline. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


The vertical space between lines of text,

measured from baseline to baseline. Lorem

Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been

the industry’s standard dummy text ever since

the 1500s, when an unknown printer took a

galley of type and scrambled it to make a type

specimen book.


The vertical space between lines of text,

measured from baseline to baseline. Lorem

Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been

the industry’s standard dummy text ever since

the 1500s, when an unknown printer took a

galley of type and scrambled it to make a type

specimen book.

S PA C E B E T W E E N L I N E S

A guidelines is 150%


p {text-align: left}

This setting is often referred to

as left justified, but is technically

called flush left. It is typically the

default setting when you create

a new document. Left aligned

text begins each line along the

left margin of the document.

As you type, the first word that

does not fit on a line is placed at

on the next line.

p {text-align: justify}

Justified text combines left and

right aligned text. When a block

of text is justified, each line fills

the entire space from left to right,

except for the paragraph indent

and the last line of a paragraph.

This is accomplished by adjusting

the space between words and

characters in each line so that

the text fills 100% of the space.

p {text-align: center}

C O L U M N A L I G N M E N T

p {text-align: right}

This setting is also called right

justified, but is technically

known as “flush right.” It aligns

the beginning of each line of

text along the right margin of

the document. As you type, the

text expands to the left of the

cursor. If you type more than

one line, the next line will begin

along the right margin.

Right justification is commonly

used to display short text.

As you type, the text

expands equally to the left

and right, leaving the same

margin on both sides.

When you start a new

line, the cursor stays in the

center, which is where the

next line begins. Centered

text is often used titles and

may be appropriate for

headers and footers.












on the next line.







































L E T T E R S PA C I N G

POT OF GOLDp {letter-spacing: 0;}

POT OF GOLDp {letter-spacing: 2.5em}

Open letter spacing for all caps headlines


L E T T E R S PA C I N G

Pot of Gold p { letter-spacing: 0; }

Tighten letter spacing for all large headlines

Pot of Gold p { letter-spacing: -.15em; }


K E R N TAT T O O


Learn from Others


I N S P I R AT I O N


Getting Access


Budget

Distinctive

Site speed


T Y P E K I T


My Head Hurts

ALI SO N C HAN D LE R // WO R D C A M P ATL ANTA 2017 69ALI SO N C HAN D LE R // WO R D C A M P ATL ANTA 2017

Short Term Goals

Why did I choose that typeface?

How does the hierarchy help guide the reader through the text?

What different typefaces or arrangements in the layout make my site more effective?

Make at least one of those changes.



Long Term Goals

Has user behavior changed?

Feedback from your client?

More CTA being activated?

Use feedback and revise.



http://www.google.com/fonts/

http://www.fontsquirrel.com/

https://typekit.com/fonts

http://www.typography.com/cloud/welcome/

http://www.typewolf.com/recommendations

http://femmebot.github.io/google-type/

http://hellohappy.org/beautiful-web-type/

http://blog.typekit.com/category/using-type/

http://www.typewolf.com/

http://fontpair.co/

http://discover.typography.com/

http://www.goodwebfonts.com/

R E S O U R C E S


Quiz

A: Slab Serif

B: Script

C: Serif

D: San Serif


T


A: Slab Serif

B: Script

C: Serif

D: San Serif T


T A: Menu

B: Body

C: Headline

D: A & B


A: Typefaces

B: Type size

C: Hierarchy

D: All of the above

81

Alison Chandler

I design websites and visual brand identities.

This is my fourth WordCamp.

My first time to present.

#wcatl @alisonrchandler@wordcampatl

typography: the backbone of your website

Design