Choosing typefaces and applying them to your WordPress website can be frustrating, even designers go around and around about this. There are so many options and decisions to make—it’s hard to know where to begin. What gives?
You will learn the importance of typography in website design, how to choose font families, and tips for implementation. Armed with the basic understanding of typography and how it relates to the success of your website, you will be confident the choices you make will be based on more than a whim.
2. Alison Chandler
I design websites and visual brand identities.
This is my fourth WordCamp.
My first time to present.
#wcatl
@alisonrchandler
@wordcampatl
3. 1ALISON CHANDLER // WORDCAMP ATLANTA 2017
Typography is the visual
component of the written word.
11. ALISON CHANDLER // WORDCAMP ATLANTA 2017 9
Verdana
Arial
Helvetica
Courier
Copperplate
Times
Times New Roman
Georgia
Geneva
Gill Sans
Tahoma
Trebuchet
Comic Sans
Lucida
Palatino
Impact
WE BSAFE FO NTS
15. ALISON CHANDLER // WORDCAMP ATLANTA 2017 13
Is it legible?
It is readable?
16. ALISON CHANDLER // WORDCAMP ATLANTA 2017 14
Distinguishable letter forms
LEG I B I LIT Y
WordPress
WordPress
WordPress
WordPress
17. ALISON CHANDLER // WORDCAMP ATLANTA 2017 15
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
25. ALISON CHANDLER // WORDCAMP ATLANTA 2017 23
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
26. ALISON CHANDLER // WORDCAMP ATLANTA 2017 24
T YPE FACE DES IG N E R DAN R HATIGAN
31. ALISON CHANDLER // WORDCAMP ATLANTA 2017 29
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.
35. ALISON CHANDLER // WORDCAMP ATLANTA 2017 33
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.
41. ALISON CHANDLER // WORDCAMP ATLANTA 2017 39
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
42. ALISON CHANDLER // WORDCAMP ATLANTA 2017 40
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%
}
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: 200%
}
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 PACE B E T WE E N LI N ES
A guidelines is 150%
43. ALISON CHANDLER // WORDCAMP ATLANTA 2017 41
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.
46. ALISON CHANDLER // WORDCAMP ATLANTA 2017 44
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
47. ALISON CHANDLER // WORDCAMP ATLANTA 2017 45
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;
}
65. ALISON CHANDLER // WORDCAMP ATLANTA 2017 63ALISON CHANDLER // WORDCAMP ATLANTA 2017
Short Term Goals
66. 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 64
67. ALISON CHANDLER // WORDCAMP ATLANTA 2017 65ALISON CHANDLER // WORDCAMP ATLANTA 2017
Long Term Goals
68. Has user behavior changed?
Feedback from your client?
More CTA being activated?
Use feedback and revise.
ALISON CHANDLER // WORDCAMP ATLANTA 2017 66
69. ALISON CHANDLER // WORDCAMP ATLANTA 2017 67
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
70. 68
Alison Chandler
I design websites and visual brand identities.
This is my fourth WordCamp.
My first time to present.
#wcatl
@alisonrchandler
@wordcampatl