Brief intro on web typography. Current state, Web trends, Branding, Fashion e–commerce web fonts, Vertical rhythm and a tempo–screen comparison proposal.

1. BRIEF INTRO
ON WEB TYPOGRAPHY
by /Olga Voskoboinikova @dVosk

2. A PERSONAL STORY
What music and typography have in common.

3. WHY SHOULD WE CARE
ABOUT TYPOGRAPHY
“95% of the information on the web is written language.”
Oliver Reichenstein, 2006

4. “If you think a detail such as typography
won’t influence how consumers view
your brand, you better think twice.”
Monique Craig, marketing specialist from Oneflare

5. 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.
It’s there to set the right tone.
It creates a context for your brand.
https://www.communications.gov.au/…/importance-typography-branding

6. WEB TRENDS

7. http://thenextweb.com/dd/2015/07/24/6-design-trends-taking-over-the-web

8. http://thenextweb.com/dd/2015/07/24/6-design-trends-taking-over-the-web

9. Yep, ⅓ of the web design trends is about typography.

10. CURRENT STATE

11. BENCHMARKING
Common fonts on fashion e-commerce websites
serif/sans – on styleless brands.
Helvetica variants – on other styleless brands.
Futura variants – on old–fashioned 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

12. “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

13. OPENTYPE
http://caniuse.com/#search=woff2

14. NEGATIVE SPACE,
CAPITAL LETTERS
& LETTER SPACING

15. 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

16. Why our UX hiring postcard is poorly designed.

17. MATHEMATICAL
WEB TYPOGRAPHY
References: &http://jxnblk.com/writing/posts/mathematical-web-typography
http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design

18. GOLDEN RATIO
References: &http://www.pearsonified.com/typography
http://gregrickaby.com/using-the-golden-ratio-and-rems

19. VERTICAL RHYTHM
http://24ways.org/2006/compose-to-a-vertical-rhythm

20. TYPOGRAPHY,
SCREENS & DEVICES

21. A TEMPO ANALYSIS PROPOSAL
Presto on super small screens as watches/glasses.
extremely fast (168–200 BPM)
Vivace on phones.
lively and fast (168–176 BPM)
Moderato on tablets.
moderately (108–120 BPM)
Adagio on desktop.
slow and stately – literally, "at ease" (66–76 BPM)
Largo on larger screens.
broadly (40–60 BPM)
Larghissimo on extremely large interfaces.
very, very slow (24 BPM and under)

22. There are more tempo markings, as there are screens.

23. “There is more flavour in type, that if applied well,
transcends content from being merely legible,
to that of being pleasurable.
After all, that’s why we have different typefaces:
each brings with it characteristics that flavour to the words.”
Mark Boulton, 2013