SlideShare uma empresa Scribd logo
1 de 70
Baixar para ler offline
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
ALISON CHANDLER // WORDCAMP ATLANTA 2017 3
THE #1 THING
YOU SHOULD CARE ABOUT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 4
Capture attention
Connect emotionally
Be memorable
Build credibility
ALISON CHANDLER // WORDCAMP ATLANTA 2017 5
ALISON CHANDLER // WORDCAMP ATLANTA 2017 6
ALISON CHANDLER // WORDCAMP ATLANTA 2017 7
ALISON CHANDLER // WORDCAMP ATLANTA 2017 8
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
ALISON CHANDLER // WORDCAMP ATLANTA 2017 10
ALISON CHANDLER // WORDCAMP ATLANTA 2017 11
2011
2%
2016
60%
DE FAU LT WE BSAFE FO NTS VS CUS TOM WE B FO NTS
WHAT GIVES?
PARALYZED
BY CHOICES
ALISON CHANDLER // WORDCAMP ATLANTA 2017 13
Is it legible?
It is readable?
ALISON CHANDLER // WORDCAMP ATLANTA 2017 14
Distinguishable letter forms
LEG I B I LIT Y
WordPress
WordPress
WordPress
WordPress
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
ALISON CHANDLER // WORDCAMP ATLANTA 2017 16
ANATOMY
ALISON CHANDLER // WORDCAMP ATLANTA 2017 17
Organized Chaos
ALISON CHANDLER // WORDCAMP ATLANTA 2017 18
slab serif
CL A SS I FIC ATIO NS
T
serif
san serif
display
ALISON CHANDLER // WORDCAMP ATLANTA 2017 19
T
CL A SS I FIC ATIO NS
slab serif
serif
san serif
display
ALISON CHANDLER // WORDCAMP ATLANTA 2017 20
T
CL A SS I FIC ATIO NS
slab serif
serif
san serif
display
ALISON CHANDLER // WORDCAMP ATLANTA 2017 21
T
CL A SS I FIC ATIO NS
slab serif
serif
san serif
display
ALISON CHANDLER // WORDCAMP ATLANTA 2017 22
DO N’T DO TH IS
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
ALISON CHANDLER // WORDCAMP ATLANTA 2017 24
T YPE FACE DES IG N E R DAN R HATIGAN
ALISON CHANDLER // WORDCAMP ATLANTA 2017 25
ALISON CHANDLER // WORDCAMP ATLANTA 2017 26
Font Pairings
ALISON CHANDLER // WORDCAMP ATLANTA 2017 27
O N E T YPE FA M I LY, M AN Y VAR IATIO NS
ALISON CHANDLER // WORDCAMP ATLANTA 2017 28
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.
ALISON CHANDLER // WORDCAMP ATLANTA 2017 30
S T YLE GU I DE FO R H TAGS
ALISON CHANDLER // WORDCAMP ATLANTA 2017 31
ALISON CHANDLER // WORDCAMP ATLANTA 2017 32
S T YLE GU I DE FO R H TAGS
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.
NOW WHAT?
IT’S NOT
ABOUT YOU
ALISON CHANDLER // WORDCAMP ATLANTA 2017 35
ALISON CHANDLER // WORDCAMP ATLANTA 2017 36
H I E R ARCH Y
ALISON CHANDLER // WORDCAMP ATLANTA 2017 37
H I E R ARCH Y
ALISON CHANDLER // WORDCAMP ATLANTA 2017 38
H I E R ARCH Y
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
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%
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.
ALISON CHANDLER // WORDCAMP ATLANTA 2017 42
CO LUM N ALIG N M E NT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 43
CO LUM N ALIG N M E NT
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
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;
}
ALISON CHANDLER // WORDCAMP ATLANTA 2017 46
Learn from Others
ALISON CHANDLER // WORDCAMP ATLANTA 2017 47
I NS PI R ATI O N
ALISON CHANDLER // WORDCAMP ATLANTA 2017 48
I NS PI R ATI O N
ALISON CHANDLER // WORDCAMP ATLANTA 2017 49
I NS PI R ATI O N
ALISON CHANDLER // WORDCAMP ATLANTA 2017 50
I NS PI R ATI O N
ALISON CHANDLER // WORDCAMP ATLANTA 2017 51
Getting Access
ALISON CHANDLER // WORDCAMP ATLANTA 2017 52
Budget
Distinctive
Site speed
ALISON CHANDLER // WORDCAMP ATLANTA 2017 53
T Y PE K IT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 54
T Y PE K IT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 55
T Y PE K IT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 56
T Y PE K IT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 57
T Y PE K IT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 58
T Y PE K IT
ALISON CHANDLER // WORDCAMP ATLANTA 2017 59
ALISON CHANDLER // WORDCAMP ATLANTA 2017 60
ALISON CHANDLER // WORDCAMP ATLANTA 2017 61
My Head Hurts
ALISON CHANDLER // WORDCAMP ATLANTA 2017 62
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 64
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.
ALISON CHANDLER // WORDCAMP ATLANTA 2017 66
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
68
Alison Chandler
I design websites and visual brand identities.
This is my fourth WordCamp.
My first time to present.
#wcatl
@alisonrchandler
@wordcampatl

Mais conteúdo relacionado

Destaque

Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1Jennifer Janviere
 
WordCamp ATL 2017 - Beginner Session - Plugins
WordCamp ATL 2017 - Beginner Session - PluginsWordCamp ATL 2017 - Beginner Session - Plugins
WordCamp ATL 2017 - Beginner Session - PluginsMickey Mellen
 
Designing for the Mobile Web Workshop
Designing for the Mobile Web WorkshopDesigning for the Mobile Web Workshop
Designing for the Mobile Web WorkshopAli Green
 
Sailing holidays in the Mediterranean
Sailing holidays in the MediterraneanSailing holidays in the Mediterranean
Sailing holidays in the MediterraneanRiccardo Grassi
 
#CIPD17 Students - NAP Student Conference 2017
#CIPD17 Students - NAP Student Conference 2017#CIPD17 Students - NAP Student Conference 2017
#CIPD17 Students - NAP Student Conference 2017Perry Timms
 
researchED Chester, 18 March, 2017
researchED Chester, 18 March, 2017researchED Chester, 18 March, 2017
researchED Chester, 18 March, 2017Gary Jones
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST APICaldera Labs
 
Perfect Time Management - Powerful Tips And Resources
Perfect Time Management - Powerful Tips And ResourcesPerfect Time Management - Powerful Tips And Resources
Perfect Time Management - Powerful Tips And ResourcesTimecamp
 
Mastering Custom Post Types - WordCamp Atlanta 2012
Mastering Custom Post Types - WordCamp Atlanta 2012Mastering Custom Post Types - WordCamp Atlanta 2012
Mastering Custom Post Types - WordCamp Atlanta 2012Mike Schinkel
 
WordCamp Atlanta 2010 Advanced SEo for Wordpress
WordCamp Atlanta 2010 Advanced SEo for WordpressWordCamp Atlanta 2010 Advanced SEo for Wordpress
WordCamp Atlanta 2010 Advanced SEo for WordpressTopher Kohan
 

Destaque (12)

Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1
 
WordCamp ATL 2017 - Beginner Session - Plugins
WordCamp ATL 2017 - Beginner Session - PluginsWordCamp ATL 2017 - Beginner Session - Plugins
WordCamp ATL 2017 - Beginner Session - Plugins
 
Designing for the Mobile Web Workshop
Designing for the Mobile Web WorkshopDesigning for the Mobile Web Workshop
Designing for the Mobile Web Workshop
 
Sailing holidays in the Mediterranean
Sailing holidays in the MediterraneanSailing holidays in the Mediterranean
Sailing holidays in the Mediterranean
 
#CIPD17 Students - NAP Student Conference 2017
#CIPD17 Students - NAP Student Conference 2017#CIPD17 Students - NAP Student Conference 2017
#CIPD17 Students - NAP Student Conference 2017
 
researchED Chester, 18 March, 2017
researchED Chester, 18 March, 2017researchED Chester, 18 March, 2017
researchED Chester, 18 March, 2017
 
dimitris
dimitrisdimitris
dimitris
 
Recognize Godzilla
Recognize GodzillaRecognize Godzilla
Recognize Godzilla
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
 
Perfect Time Management - Powerful Tips And Resources
Perfect Time Management - Powerful Tips And ResourcesPerfect Time Management - Powerful Tips And Resources
Perfect Time Management - Powerful Tips And Resources
 
Mastering Custom Post Types - WordCamp Atlanta 2012
Mastering Custom Post Types - WordCamp Atlanta 2012Mastering Custom Post Types - WordCamp Atlanta 2012
Mastering Custom Post Types - WordCamp Atlanta 2012
 
WordCamp Atlanta 2010 Advanced SEo for Wordpress
WordCamp Atlanta 2010 Advanced SEo for WordpressWordCamp Atlanta 2010 Advanced SEo for Wordpress
WordCamp Atlanta 2010 Advanced SEo for Wordpress
 

Semelhante a Typography: The Backbone of Your Website

TCS: Funnel Tools, Cart Tools + CRM Tools
TCS: Funnel Tools, Cart Tools + CRM ToolsTCS: Funnel Tools, Cart Tools + CRM Tools
TCS: Funnel Tools, Cart Tools + CRM ToolsRoland Frasier
 
Type classification-ebook
Type classification-ebookType classification-ebook
Type classification-ebookXuan Le
 
TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...
TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...
TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...Roland Frasier
 
TCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon Tools
TCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon ToolsTCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon Tools
TCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon ToolsRoland Frasier
 
Fsfinalbook single
Fsfinalbook singleFsfinalbook single
Fsfinalbook singleXuan Le
 
Typography 101 – A Beginner's Guide to All Things Type
Typography 101 – A Beginner's Guide to All Things TypeTypography 101 – A Beginner's Guide to All Things Type
Typography 101 – A Beginner's Guide to All Things TypeNimble Kettle
 
TCS: Ad Tools, Social Marketing Tools + List Building Tools
TCS: Ad Tools, Social Marketing Tools + List Building ToolsTCS: Ad Tools, Social Marketing Tools + List Building Tools
TCS: Ad Tools, Social Marketing Tools + List Building ToolsRoland Frasier
 
Speak Up! Build an Alexa Skill for a Cause
 Speak Up! Build an Alexa Skill for a Cause Speak Up! Build an Alexa Skill for a Cause
Speak Up! Build an Alexa Skill for a CauseNikki Clark
 
TCS: Video Marketing Tools + Image Tools
TCS: Video Marketing Tools + Image ToolsTCS: Video Marketing Tools + Image Tools
TCS: Video Marketing Tools + Image ToolsRoland Frasier
 
TCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting Tools
TCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting ToolsTCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting Tools
TCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting ToolsRoland Frasier
 

Semelhante a Typography: The Backbone of Your Website (12)

TCS: Funnel Tools, Cart Tools + CRM Tools
TCS: Funnel Tools, Cart Tools + CRM ToolsTCS: Funnel Tools, Cart Tools + CRM Tools
TCS: Funnel Tools, Cart Tools + CRM Tools
 
Type classification-ebook
Type classification-ebookType classification-ebook
Type classification-ebook
 
Sandisk Style Guide
Sandisk Style GuideSandisk Style Guide
Sandisk Style Guide
 
TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...
TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...
TCS: Conversion Optimization Tools + Social, Augmented Reality + Virtual Real...
 
TCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon Tools
TCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon ToolsTCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon Tools
TCS: Ecommerce Tools - Ecommerce Marketing Tools + Amazon Tools
 
Dominating the Web Typography
Dominating the Web TypographyDominating the Web Typography
Dominating the Web Typography
 
Fsfinalbook single
Fsfinalbook singleFsfinalbook single
Fsfinalbook single
 
Typography 101 – A Beginner's Guide to All Things Type
Typography 101 – A Beginner's Guide to All Things TypeTypography 101 – A Beginner's Guide to All Things Type
Typography 101 – A Beginner's Guide to All Things Type
 
TCS: Ad Tools, Social Marketing Tools + List Building Tools
TCS: Ad Tools, Social Marketing Tools + List Building ToolsTCS: Ad Tools, Social Marketing Tools + List Building Tools
TCS: Ad Tools, Social Marketing Tools + List Building Tools
 
Speak Up! Build an Alexa Skill for a Cause
 Speak Up! Build an Alexa Skill for a Cause Speak Up! Build an Alexa Skill for a Cause
Speak Up! Build an Alexa Skill for a Cause
 
TCS: Video Marketing Tools + Image Tools
TCS: Video Marketing Tools + Image ToolsTCS: Video Marketing Tools + Image Tools
TCS: Video Marketing Tools + Image Tools
 
TCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting Tools
TCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting ToolsTCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting Tools
TCS: Analytics Tool, Influencer Marketing Analytics Tools + Retargeting Tools
 

Último

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Último (20)

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

Typography: The Backbone of Your Website

  • 1. TYPOGRAPHY THE BACKBONE OF YOUR WEBSITE PRESENTED BY Alison Chandler
  • 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.
  • 4. ALISON CHANDLER // WORDCAMP ATLANTA 2017 2 Fonts
  • 5. ALISON CHANDLER // WORDCAMP ATLANTA 2017 3 THE #1 THING YOU SHOULD CARE ABOUT
  • 6. ALISON CHANDLER // WORDCAMP ATLANTA 2017 4 Capture attention Connect emotionally Be memorable Build credibility
  • 7. ALISON CHANDLER // WORDCAMP ATLANTA 2017 5
  • 8. ALISON CHANDLER // WORDCAMP ATLANTA 2017 6
  • 9. ALISON CHANDLER // WORDCAMP ATLANTA 2017 7
  • 10. ALISON CHANDLER // WORDCAMP ATLANTA 2017 8
  • 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
  • 12. ALISON CHANDLER // WORDCAMP ATLANTA 2017 10
  • 13. ALISON CHANDLER // WORDCAMP ATLANTA 2017 11 2011 2% 2016 60% DE FAU LT WE BSAFE FO NTS VS CUS TOM WE B 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
  • 18. ALISON CHANDLER // WORDCAMP ATLANTA 2017 16 ANATOMY
  • 19. ALISON CHANDLER // WORDCAMP ATLANTA 2017 17 Organized Chaos
  • 20. ALISON CHANDLER // WORDCAMP ATLANTA 2017 18 slab serif CL A SS I FIC ATIO NS T serif san serif display
  • 21. ALISON CHANDLER // WORDCAMP ATLANTA 2017 19 T CL A SS I FIC ATIO NS slab serif serif san serif display
  • 22. ALISON CHANDLER // WORDCAMP ATLANTA 2017 20 T CL A SS I FIC ATIO NS slab serif serif san serif display
  • 23. ALISON CHANDLER // WORDCAMP ATLANTA 2017 21 T CL A SS I FIC ATIO NS slab serif serif san serif display
  • 24. ALISON CHANDLER // WORDCAMP ATLANTA 2017 22 DO N’T DO TH IS
  • 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
  • 27. ALISON CHANDLER // WORDCAMP ATLANTA 2017 25
  • 28. ALISON CHANDLER // WORDCAMP ATLANTA 2017 26 Font Pairings
  • 29. ALISON CHANDLER // WORDCAMP ATLANTA 2017 27 O N E T YPE FA M I LY, M AN Y VAR IATIO NS
  • 30. ALISON CHANDLER // WORDCAMP ATLANTA 2017 28
  • 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.
  • 32. ALISON CHANDLER // WORDCAMP ATLANTA 2017 30 S T YLE GU I DE FO R H TAGS
  • 33. ALISON CHANDLER // WORDCAMP ATLANTA 2017 31
  • 34. ALISON CHANDLER // WORDCAMP ATLANTA 2017 32 S T YLE GU I DE FO R H TAGS
  • 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.
  • 37. ALISON CHANDLER // WORDCAMP ATLANTA 2017 35
  • 38. ALISON CHANDLER // WORDCAMP ATLANTA 2017 36 H I E R ARCH Y
  • 39. ALISON CHANDLER // WORDCAMP ATLANTA 2017 37 H I E R ARCH Y
  • 40. ALISON CHANDLER // WORDCAMP ATLANTA 2017 38 H I E R ARCH Y
  • 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.
  • 44. ALISON CHANDLER // WORDCAMP ATLANTA 2017 42 CO LUM N ALIG N M E NT
  • 45. ALISON CHANDLER // WORDCAMP ATLANTA 2017 43 CO LUM N ALIG N M E NT
  • 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; }
  • 48. ALISON CHANDLER // WORDCAMP ATLANTA 2017 46 Learn from Others
  • 49. ALISON CHANDLER // WORDCAMP ATLANTA 2017 47 I NS PI R ATI O N
  • 50. ALISON CHANDLER // WORDCAMP ATLANTA 2017 48 I NS PI R ATI O N
  • 51. ALISON CHANDLER // WORDCAMP ATLANTA 2017 49 I NS PI R ATI O N
  • 52. ALISON CHANDLER // WORDCAMP ATLANTA 2017 50 I NS PI R ATI O N
  • 53. ALISON CHANDLER // WORDCAMP ATLANTA 2017 51 Getting Access
  • 54. ALISON CHANDLER // WORDCAMP ATLANTA 2017 52 Budget Distinctive Site speed
  • 55. ALISON CHANDLER // WORDCAMP ATLANTA 2017 53 T Y PE K IT
  • 56. ALISON CHANDLER // WORDCAMP ATLANTA 2017 54 T Y PE K IT
  • 57. ALISON CHANDLER // WORDCAMP ATLANTA 2017 55 T Y PE K IT
  • 58. ALISON CHANDLER // WORDCAMP ATLANTA 2017 56 T Y PE K IT
  • 59. ALISON CHANDLER // WORDCAMP ATLANTA 2017 57 T Y PE K IT
  • 60. ALISON CHANDLER // WORDCAMP ATLANTA 2017 58 T Y PE K IT
  • 61. ALISON CHANDLER // WORDCAMP ATLANTA 2017 59
  • 62. ALISON CHANDLER // WORDCAMP ATLANTA 2017 60
  • 63. ALISON CHANDLER // WORDCAMP ATLANTA 2017 61 My Head Hurts
  • 64. ALISON CHANDLER // WORDCAMP ATLANTA 2017 62
  • 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