際際滷

際際滷Share a Scribd company logo
BRIEF INTRO
ON WEB TYPOGRAPHY
by /Olga Voskoboinikova @dVosk
A PERSONAL STORY
What music and typography have in common.
WHY SHOULD WE CARE
ABOUT TYPOGRAPHY
95% of the information on the web is written language.
Oliver Reichenstein, 2006
If you think a detail such as typography
wont influence how consumers view
your brand, you better think twice.
Monique Craig, marketing specialist from Oneflare
The importance of typography in branding
It reflects brand personality.
It looks professional.
It helps your brand to be consistent.
It helps consumers to remember your brand.
Its there to set the right tone.
It creates a context for your brand.
https://www.communications.gov.au//importance-typography-branding
WEB TRENDS
http://thenextweb.com/dd/2015/07/24/6-design-trends-taking-over-the-web
http://thenextweb.com/dd/2015/07/24/6-design-trends-taking-over-the-web
Yep,  of the web design trends is about typography.
CURRENT STATE
BENCHMARKING
Common fonts on fashion e-commerce websites
serif/sans  on styleless brands.
Helvetica variants  on other styleless brands.
Futura variants  on oldfashioned brands.
Web fonts 油some more fashionable than others.
Custom web fonts 油on customized brands.
Arial  on budget shops, mainly.
References: &http://wemakewebsites.com/blog/60-best-fashion-ecommerce-sites
http://www.independent.co.uk//the-50-best-online-clothes-shops-8092852.html
Typography is a big part of brand recognition,
and can give a site a unique style,
but web fonts can be frustrating for users
if content takes too long to load,
and can render differently across browsers.
http://www.digitalartsonline.co.uk//web-fonts-what-designers-need-to-know-in-2015
OPENTYPE
http://caniuse.com/#search=woff2
NEGATIVE SPACE,
CAPITAL LETTERS
& LETTER SPACING
LINE SPACING
A simple rule is your leading should be wider than your word
spacing. This is because when the balance is correct, your eye
will move along the line instead of down the lines.
Mark Boulton, 2005
Why our UX hiring postcard is poorly designed.
MATHEMATICAL
WEB TYPOGRAPHY
References: &http://jxnblk.com/writing/posts/mathematical-web-typography
http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design
GOLDEN RATIO
References: &http://www.pearsonified.com/typography
http://gregrickaby.com/using-the-golden-ratio-and-rems
VERTICAL RHYTHM
http://24ways.org/2006/compose-to-a-vertical-rhythm
TYPOGRAPHY,
SCREENS & DEVICES
A TEMPO ANALYSIS PROPOSAL
Presto on super small screens as watches/glasses.
extremely fast (168200 BPM)
Vivace on phones.
lively and fast (168176 BPM)
Moderato on tablets.
moderately (108120 BPM)
Adagio on desktop.
slow and stately 油literally, "at ease" (6676 BPM)
Largo on larger screens.
broadly (4060 BPM)
Larghissimo on extremely large interfaces.
very, very slow (24 BPM and under)
There are more tempo markings, as there are screens.
There is more flavour in type, that if applied well,
transcends content from being merely legible,
to that of being pleasurable.
After all, thats why we have different typefaces:
each brings with it characteristics that flavour to the words.
Mark Boulton, 2013
Ad

Recommended

Responsive images and web icon design
Responsive images and web icon design
Olga Voskoboinikova
How to pick the right font and other considerations about (web) typography.
How to pick the right font and other considerations about (web) typography.
Olga Voskoboinikova
Team14226 @ Venture-Lab.net Crash Course on Creativity
Team14226 @ Venture-Lab.net Crash Course on Creativity
Olga Voskoboinikova
How to Design Mobile First and the KISSS principle
How to Design Mobile First and the KISSS principle
Olga Voskoboinikova
Proposta tesi di laurea SUPSI su Comunicare wikipedia
Proposta tesi di laurea SUPSI su Comunicare wikipedia
Iolanda Pensa
Design
Design
Cecilia Coletta
Lean Branding & Branding Moments
Lean Branding & Branding Moments
Bill Beard
FM Graphic Design
FM Graphic Design
missizio
Graphic Design for Publishing
Graphic Design for Publishing
InSide Training
how brands become icons (intro)
how brands become icons (intro)
Endrigo Ramos
Outstander preview
Outstander preview
Mars Dorian
Workshop / Istituto Europeo di Design (IED) / Il graphic design spiegato a mi...
Workshop / Istituto Europeo di Design (IED) / Il graphic design spiegato a mi...
tommasobovo
Creativity and graphic design 2
Creativity and graphic design 2
Daniele Francaviglia
La comunicazione come servizio pubblico. Teorie e prassi del Design della Com...
La comunicazione come servizio pubblico. Teorie e prassi del Design della Com...
Margherita Ider
The Things I Carry by Mars Dorian
The Things I Carry by Mars Dorian
Mars Dorian
Brand You : Personal Branding
Brand You : Personal Branding
Studio Science
Intro to Branding & Brand management - Elkottab
Intro to Branding & Brand management - Elkottab
Muhammad Omar
UX = ROI: It's not just a myth
UX = ROI: It's not just a myth
Jeremy Johnson
Identifying customer digital needs and new business areas for an automotive b...
Identifying customer digital needs and new business areas for an automotive b...
Marco De Cesaris
Why SEO Matters for Financial Institutions: How To Build and Strengthen Your ...
Why SEO Matters for Financial Institutions: How To Build and Strengthen Your ...
Edge Multimedia
Undestanding UX: TBTF technology executive council meeting
Undestanding UX: TBTF technology executive council meeting
Krissy Scoufis
Marqana Digital Presents: Bringing Your Company's Web Presence Into 2015
Marqana Digital Presents: Bringing Your Company's Web Presence Into 2015
Andrea Cochran
How to bring your Company's web presence in 2015
How to bring your Company's web presence in 2015
GrabOn
BrightonSEO Takeaways September 2017
BrightonSEO Takeaways September 2017
Semrush
Never Ending Story 1
Never Ending Story 1
Richard Masters
20 Tech Trends for Nonprofits
20 Tech Trends for Nonprofits
Bloomerang
Users First: UX Basics for Websites that Serve People (staff presentation at ...
Users First: UX Basics for Websites that Serve People (staff presentation at ...
Melissa Van De Werfhorst
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
FlashGuy13
SMX2022-Milestone-0512.pdf
SMX2022-Milestone-0512.pdf
Benu Aggarwal
Digital Content Marketing Trends in 2013 - EBriks Infotech
Digital Content Marketing Trends in 2013 - EBriks Infotech
EBriks Infotech Pvt. Ltd.

More Related Content

Viewers also liked (9)

Graphic Design for Publishing
Graphic Design for Publishing
InSide Training
how brands become icons (intro)
how brands become icons (intro)
Endrigo Ramos
Outstander preview
Outstander preview
Mars Dorian
Workshop / Istituto Europeo di Design (IED) / Il graphic design spiegato a mi...
Workshop / Istituto Europeo di Design (IED) / Il graphic design spiegato a mi...
tommasobovo
Creativity and graphic design 2
Creativity and graphic design 2
Daniele Francaviglia
La comunicazione come servizio pubblico. Teorie e prassi del Design della Com...
La comunicazione come servizio pubblico. Teorie e prassi del Design della Com...
Margherita Ider
The Things I Carry by Mars Dorian
The Things I Carry by Mars Dorian
Mars Dorian
Brand You : Personal Branding
Brand You : Personal Branding
Studio Science
Intro to Branding & Brand management - Elkottab
Intro to Branding & Brand management - Elkottab
Muhammad Omar
Graphic Design for Publishing
Graphic Design for Publishing
InSide Training
how brands become icons (intro)
how brands become icons (intro)
Endrigo Ramos
Outstander preview
Outstander preview
Mars Dorian
Workshop / Istituto Europeo di Design (IED) / Il graphic design spiegato a mi...
Workshop / Istituto Europeo di Design (IED) / Il graphic design spiegato a mi...
tommasobovo
Creativity and graphic design 2
Creativity and graphic design 2
Daniele Francaviglia
La comunicazione come servizio pubblico. Teorie e prassi del Design della Com...
La comunicazione come servizio pubblico. Teorie e prassi del Design della Com...
Margherita Ider
The Things I Carry by Mars Dorian
The Things I Carry by Mars Dorian
Mars Dorian
Brand You : Personal Branding
Brand You : Personal Branding
Studio Science
Intro to Branding & Brand management - Elkottab
Intro to Branding & Brand management - Elkottab
Muhammad Omar

Similar to Web Typography (20)

UX = ROI: It's not just a myth
UX = ROI: It's not just a myth
Jeremy Johnson
Identifying customer digital needs and new business areas for an automotive b...
Identifying customer digital needs and new business areas for an automotive b...
Marco De Cesaris
Why SEO Matters for Financial Institutions: How To Build and Strengthen Your ...
Why SEO Matters for Financial Institutions: How To Build and Strengthen Your ...
Edge Multimedia
Undestanding UX: TBTF technology executive council meeting
Undestanding UX: TBTF technology executive council meeting
Krissy Scoufis
Marqana Digital Presents: Bringing Your Company's Web Presence Into 2015
Marqana Digital Presents: Bringing Your Company's Web Presence Into 2015
Andrea Cochran
How to bring your Company's web presence in 2015
How to bring your Company's web presence in 2015
GrabOn
BrightonSEO Takeaways September 2017
BrightonSEO Takeaways September 2017
Semrush
Never Ending Story 1
Never Ending Story 1
Richard Masters
20 Tech Trends for Nonprofits
20 Tech Trends for Nonprofits
Bloomerang
Users First: UX Basics for Websites that Serve People (staff presentation at ...
Users First: UX Basics for Websites that Serve People (staff presentation at ...
Melissa Van De Werfhorst
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
FlashGuy13
SMX2022-Milestone-0512.pdf
SMX2022-Milestone-0512.pdf
Benu Aggarwal
Digital Content Marketing Trends in 2013 - EBriks Infotech
Digital Content Marketing Trends in 2013 - EBriks Infotech
EBriks Infotech Pvt. Ltd.
EBriks Infotech- 2013 Digital Marketing Trends
EBriks Infotech- 2013 Digital Marketing Trends
Rohit Paul
Hackers guide to UX
Hackers guide to UX
Cyber-Duck
Web Metrics: A Primer for UX Pros - UPDATED
Web Metrics: A Primer for UX Pros - UPDATED
Oxford Tech + UX
Web Design 2016: Top 10 Trends to Attract New Customers
Web Design 2016: Top 10 Trends to Attract New Customers
AIS Media, Inc.
Web Teams of the Future: Staying Competitive
Web Teams of the Future: Staying Competitive
Jessica O'Sullivan-Munck
Virtual Marketing Innovation Summit Keynote
Virtual Marketing Innovation Summit Keynote
Demandbase
Get Ahead of SEO by Improving User Experience (UX)
Get Ahead of SEO by Improving User Experience (UX)
Astek Consulting
UX = ROI: It's not just a myth
UX = ROI: It's not just a myth
Jeremy Johnson
Identifying customer digital needs and new business areas for an automotive b...
Identifying customer digital needs and new business areas for an automotive b...
Marco De Cesaris
Why SEO Matters for Financial Institutions: How To Build and Strengthen Your ...
Why SEO Matters for Financial Institutions: How To Build and Strengthen Your ...
Edge Multimedia
Undestanding UX: TBTF technology executive council meeting
Undestanding UX: TBTF technology executive council meeting
Krissy Scoufis
Marqana Digital Presents: Bringing Your Company's Web Presence Into 2015
Marqana Digital Presents: Bringing Your Company's Web Presence Into 2015
Andrea Cochran
How to bring your Company's web presence in 2015
How to bring your Company's web presence in 2015
GrabOn
BrightonSEO Takeaways September 2017
BrightonSEO Takeaways September 2017
Semrush
20 Tech Trends for Nonprofits
20 Tech Trends for Nonprofits
Bloomerang
Users First: UX Basics for Websites that Serve People (staff presentation at ...
Users First: UX Basics for Websites that Serve People (staff presentation at ...
Melissa Van De Werfhorst
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
FlashGuy13
SMX2022-Milestone-0512.pdf
SMX2022-Milestone-0512.pdf
Benu Aggarwal
Digital Content Marketing Trends in 2013 - EBriks Infotech
Digital Content Marketing Trends in 2013 - EBriks Infotech
EBriks Infotech Pvt. Ltd.
EBriks Infotech- 2013 Digital Marketing Trends
EBriks Infotech- 2013 Digital Marketing Trends
Rohit Paul
Hackers guide to UX
Hackers guide to UX
Cyber-Duck
Web Metrics: A Primer for UX Pros - UPDATED
Web Metrics: A Primer for UX Pros - UPDATED
Oxford Tech + UX
Web Design 2016: Top 10 Trends to Attract New Customers
Web Design 2016: Top 10 Trends to Attract New Customers
AIS Media, Inc.
Web Teams of the Future: Staying Competitive
Web Teams of the Future: Staying Competitive
Jessica O'Sullivan-Munck
Virtual Marketing Innovation Summit Keynote
Virtual Marketing Innovation Summit Keynote
Demandbase
Get Ahead of SEO by Improving User Experience (UX)
Get Ahead of SEO by Improving User Experience (UX)
Astek Consulting
Ad

Recently uploaded (20)

The_Geometry_of_Natshshshshshsbsure.pptx
The_Geometry_of_Natshshshshshsbsure.pptx
sambal5
brain anatomy physiology 2025 short.pptx
brain anatomy physiology 2025 short.pptx
MohamedHany892810
Corneal_Edema_MCQs_with_answes click here
Corneal_Edema_MCQs_with_answes click here
priapria0901
Guildford Flames Adam Long Helmet Design Challenge 2025
Guildford Flames Adam Long Helmet Design Challenge 2025
Tom Hutchinson
Assignment 1_ studying a roomkjdhfkeqjdhfjeqhfdjkqebf
Assignment 1_ studying a roomkjdhfkeqjdhfjeqhfdjkqebf
kunduanannya2003
Exploring the Diverse Types of Textual Aids
Exploring the Diverse Types of Textual Aids
jenicahmendoza1
strees management for iuyagvdywyyqwdghuvuy.pptx
strees management for iuyagvdywyyqwdghuvuy.pptx
moonahish27
Formal Informal Apology letter.pptxvvvvv
Formal Informal Apology letter.pptxvvvvv
iqlimajurayeva
presentation title. ............................................................
presentation title. ............................................................
FOOLKUMARI
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Ayesha khan
overview visual graphic design for SHS.pptx
overview visual graphic design for SHS.pptx
KarlVincentNonog
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Dr. Rema
Aimee White Visual Thinking, Graphic Design, Livermore
Aimee White Visual Thinking, Graphic Design, Livermore
aimeewhite13
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
shivanshsahu0108
week2.pptx program program program problems
week2.pptx program program program problems
doramira833
Clamp_and_bend_device_exercisee_DSD.pptx
Clamp_and_bend_device_exercisee_DSD.pptx
DhanushJCS1
LRC image social media marketing class design
LRC image social media marketing class design
yeshwimbu
Chapter 5 - 2,Chapter 5 - 2,Chapter 5 - 2
Chapter 5 - 2,Chapter 5 - 2,Chapter 5 - 2
NaveedRehman55
3 bedroom bungalow with all bedroom ensuite
3 bedroom bungalow with all bedroom ensuite
modele dawodu
The_Geometry_of_Natshshshshshsbsure.pptx
The_Geometry_of_Natshshshshshsbsure.pptx
sambal5
brain anatomy physiology 2025 short.pptx
brain anatomy physiology 2025 short.pptx
MohamedHany892810
Corneal_Edema_MCQs_with_answes click here
Corneal_Edema_MCQs_with_answes click here
priapria0901
Guildford Flames Adam Long Helmet Design Challenge 2025
Guildford Flames Adam Long Helmet Design Challenge 2025
Tom Hutchinson
Assignment 1_ studying a roomkjdhfkeqjdhfjeqhfdjkqebf
Assignment 1_ studying a roomkjdhfkeqjdhfjeqhfdjkqebf
kunduanannya2003
Exploring the Diverse Types of Textual Aids
Exploring the Diverse Types of Textual Aids
jenicahmendoza1
strees management for iuyagvdywyyqwdghuvuy.pptx
strees management for iuyagvdywyyqwdghuvuy.pptx
moonahish27
Formal Informal Apology letter.pptxvvvvv
Formal Informal Apology letter.pptxvvvvv
iqlimajurayeva
presentation title. ............................................................
presentation title. ............................................................
FOOLKUMARI
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Ayesha khan
overview visual graphic design for SHS.pptx
overview visual graphic design for SHS.pptx
KarlVincentNonog
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Dr. Rema
Aimee White Visual Thinking, Graphic Design, Livermore
Aimee White Visual Thinking, Graphic Design, Livermore
aimeewhite13
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
shivanshsahu0108
week2.pptx program program program problems
week2.pptx program program program problems
doramira833
Clamp_and_bend_device_exercisee_DSD.pptx
Clamp_and_bend_device_exercisee_DSD.pptx
DhanushJCS1
LRC image social media marketing class design
LRC image social media marketing class design
yeshwimbu
Chapter 5 - 2,Chapter 5 - 2,Chapter 5 - 2
Chapter 5 - 2,Chapter 5 - 2,Chapter 5 - 2
NaveedRehman55
3 bedroom bungalow with all bedroom ensuite
3 bedroom bungalow with all bedroom ensuite
modele dawodu
Ad

Web Typography