Typography: The Backbone of Your Website

TYPOGRAPHY
THE BACKBONE
OF YOUR WEBSITE
PRESENTED 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

1ALISON CHANDLER // WORDCAMP ATLANTA 2017
Typography is the visual
component of the written word.

ALISON CHANDLER // WORDCAMP ATLANTA 2017 2
Fonts

THE #1 THING
YOU 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
WE BSAFE FO NTS

2011
2%
2016
60%
DE FAU LT WE BSAFE FO NTS VS CUS TOM WE B FO NTS

WHAT GIVES?
PARALYZED
BY CHOICES

Is it legible?
It is readable?

Distinguishable letter forms
LEG I B I LIT Y
WordPress
WordPress
WordPress
WordPress

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 ADAB I LIT Y

ANATOMY

Organized Chaos

slab serif
CL A SS I FIC ATIO NS
T
serif
san serif
display

T
slab serif
serif
san serif
display

DO N’T DO TH IS

S A N S E R I F
Contemporary, streamlined
DIN
Helvetica
Open Sans
Gill Sans
Proxima Nova
S E R I F
classic, traditional
Adobe Garamond
Alegreya
Minion Pro
Georgia
Libre Baskerville
D I S P L AY
Headlines, decorative
Playfair Display
Hanley Script
Marker Felt
Lobster
Brixton Outline
S L A B S E R I F
chunky, geometric serifs
Adelle
Caecilia
Museo Slab
Chaparral Pro
Alianza Slab
R ECOM M E N DE D T YPE FA M I LI ES

T YPE FACE DES IG N E R DAN R HATIGAN

Font Pairings

O N E T YPE FA M I LY, M AN Y VAR IATIO NS

What is WordCamp?
WordCampsareinformal,community-organizedeventsthatare
puttogetherbyWordPressuserslikeyou.Everyonefromcasual
userstocoredevelopersparticipate,shareideas,andgetto
knoweachother.WordCampAtlantaisperfectforanylevelof
WordPressknowledge.Wehavespecifictracksforthosebrand
newtoWordPress,businesssessionsforWordPressusersand
deep dives for the experienced developer.
CL A SS IC COM B I NATIO NS
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 YLE GU I DE FO R H TAGS

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
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.
2011
• SAN FRANCISCO •
¶
K9FITNESS
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.

NOW WHAT?
IT’S NOT
ABOUT YOU

H I E R ARCH Y

FO NT S IZ ES
p {
font-size: 16px;
}
Thesizeofatypefacereferstothesizeofthebody,theimaginaryareathat
encompasseseachcharacterinafont.Thisiswhyatypefacewithalarge
x-heightappearsbiggerthantypefacewithasmallx-heightatthesamepoint
size.
Typesizesaregenerallyexpressedinpoints.Thepointisatypographicunitof
measure corresponding to 1/12th
of a pica.
p {
font-size: 10px;
}
Thesizeofatypefacereferstothesizeofthebody,theimaginaryareathatencompasseseachcharacterinafont.
Thisiswhyatypefacewithalargex-heightappearsbiggerthantypefacewithasmallx-heightatthesamepoint
size.
Typesizesaregenerallyexpressedinpoints.Thepointisatypographicunitofmeasurecorrespondingto1/12th
ofapica.At100%zoomonecomputerpointcorrespondswithoneimagepixelonacomputermonitordisplay.
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.
p {
line-height: 150%
}
specimen book.
p {
line-height: 200%
}
specimen book.
S PACE B E T WE E N LI N ES
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.
Thisisaccomplishedbyadjusting
the space between words and
characters in each line so that
the text fills 100% of the space.
p {
text-align: center
}
CO LUM N ALIG N M E NT
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.

LE T TE R S PAC I N G
POT OF GOLD
p {
letter-spacing: 0;
}
POT OF GOLD
p {
letter-spacing: 2.5em
}
Open letter spacing for all caps headlines

LE T TE R S PAC I N G
Pot of Goldp {
letter-spacing: 0;
}
Tighten letter spacing for all large headlines
Pot of Goldp {
letter-spacing: -.15em;
}

Learn from Others

I NS PI R ATI O N

Getting Access

Budget
Distinctive
Site speed

T Y PE K IT

My Head Hurts

ALISON CHANDLER // WORDCAMP ATLANTA 2017 63ALISON CHANDLER // WORDCAMP ATLANTA 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.

ALISON CHANDLER // WORDCAMP ATLANTA 2017 65ALISON CHANDLER // WORDCAMP ATLANTA 2017
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 ESOU RCES

68
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

More Related Content

Viewers also liked

Similar to Typography: The Backbone of Your Website

Recently uploaded

Typography: The Backbone of Your Website