Home >Design >Web Typography

Web Typography

Date post:18-Aug-2015
Category:
View:103 times
Download:1 times
Share this document with a friend
Transcript:
  1. 1. BRIEF INTRO ON WEB TYPOGRAPHY by /Olga Voskoboinikova @dVosk
  2. 2. A PERSONAL STORY What music and typography have in common.
  3. 3. WHY SHOULD WE CARE ABOUT TYPOGRAPHY 95% of the information on the web is written language. Oliver Reichenstein, 2006
  4. 4. 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
  5. 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. Its there to set the right tone. It creates a context for your brand. https://www.communications.gov.au//importance-typography-branding
  6. 6. WEB TRENDS
  7. 7. http://thenextweb.com/dd/2015/07/24/6-design-trends-taking-over-the-web
  8. 8. http://thenextweb.com/dd/2015/07/24/6-design-trends-taking-over-the-web
  9. 9. Yep, of the web design trends is about typography.
  10. 10. CURRENT STATE
  11. 11. 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
  12. 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. 13. OPENTYPE http://caniuse.com/#search=woff2
  14. 14. NEGATIVE SPACE, CAPITAL LETTERS & LETTER SPACING
  15. 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. 16. Why our UX hiring postcard is poorly designed.
  17. 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. 18. GOLDEN RATIO References: &http://www.pearsonified.com/typography http://gregrickaby.com/using-the-golden-ratio-and-rems
  19. 19. VERTICAL RHYTHM http://24ways.org/2006/compose-to-a-vertical-rhythm
  20. 20. TYPOGRAPHY, SCREENS & DEVICES
  21. 21. 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)
  22. 22. There are more tempo markings, as there are screens.
  23. 23. 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