Typography and its importance in Web Design - Μυρτώ Θεοδώρογλου

WordCamp Thessaloniki 2019

Η τυπογραφία είναι ένα από τα πιο θεμελιώδη στοιχεία του Web Design, που μπορεί να καταστρέψει κυριολεκτικά ή να δοξάσει έναν ολόκληρο ιστότοπο μαζί με την εμπειρία του χρήστη. Μαθαίνοντας πως να την εξελίσσετε, θα σας οδηγήσει σε έξυπνα και κομψά σχέδια που ξεπερνούν τις βασικές ανάγκες και γίνονται μικρά κομμάτια τέχνης, διασφαλίζοντας ότι οι ιστότοποί σας θα είναι αξέχαστοι για ευχάριστη εμπειρία και αισθητική τους. Μέσω της ομιλίας θα συναντήσουμε όλους τους κανόνες και τα πράγματα που δεν θα κάνουν καταλαβαίνετε και οδηγείτε την τυπογραφία σε οποιοδήποτε είδος σχεδίου ιστού.

Typography is one of the most fundamental elements in Web Design, it
can literally destroy or glorify a whole website along with the user’s
experience. Learning to master it will lead you to smart and classy
designs that exceed baseline needs and become little pieces of art,
making sure that your websites will be memorable for pleasant experience
and aesthetics.

Through the talk we will encounter all the rules and do’s/dont’s that
will make you understand and lead typography in any kind of web design.

Transcript

1. UX typography and the
2. If there were such a thing as the Web Developer’s Dictionary, you’d probably find the word typography defined as “The bane of your existence.” Brenda Barron
3. Time flies when you’re reading beautiful text brain focus must remain on the content, not on the effort required to read it how typography affects conversions Gestalts’ principals DO YOU AGREE? DO YOU AGREE? similarity continuation closure proximity figure&ground Good typography boosts cognitive performance
4. it’s not only about the looks, typography will set the mood try to deconstruct all the elements of a website what you get at the end is text + images it conveys a feeling
5. γιατί; bad website typography = bad business ποιος που ποτε ποιος που ποτε font size weight color shape alignment
6. Typography must invite the reader into text, reveal the tenor and mean- ing of the text, clarify its structure and order and link the text with other existing elements. make him feel cozy in your website Robert Bringhurst major outcome at CRO, session, SEO = =
7. ! “καλή” τυπογραφία; e, o, c kerning > click here > click here legibility legibility + readability ? italics+serifs CAPITALS ARE NOT AN OPTIMAL CHOISE WHEN THE LENGTH OF THE TEXT IS BIGGER THAN A TITLE, THEREFORE USE THM WISELY LOW CONTRAST ALSO!
8. !DISPLAY fonts! alignment VISUAL HIERARCHY readability DO NOT under any circumstances DISTORT alignmentalignmentalignmentalign- mentalignmentalignmentalign- mentalignmentalignmentalignment alignmentalignmentalignmentalign alignmentalignmentalignmentalignmentalig mentalignmentalignmentalignmentalignmen alignment fancy sales, usability ≠ the typeface should complement the text, not OVERPOWER it
9. learn to look of a web page gets read a right typeface should keep people reading typography accounts for over of the design 20% 90% only
10. reading about typography’s importance at a website with exceptionally bad typography the words written on a website are the digital voice of a company or person that funny moment typography maintains the site’s consistency
11. let’s talk numbers! !
12. market research! formal informal larger smaller serif sans serif consistency hierarchy alignment point size ≥ 14 pixels font color | contrast >> colorable whitespace (watch out for devices!) links | be able to tell a difference line lenght | 45-80 characters (mobile 30-40) | 10-15 words max 2 fonts | opposites attract NO.BLINKING.TEXT. NO.BLINKING.TEXT. NO.BLINKING.TEXT. ? !
13. pt. 14 pixels MIN 18-21 pt. optimal! learn to use em! avoid placing text on top of busy images (always consider smaller screens!)
14. join the cult of the whi te spa ce
15. line length
16. 2 typefaces max When in doupt, use one typeface typefaces Remember to convey the feeling
17. Use one typeface in various weights stay away from unreadable fonts! typefaces Montserrat Gotham Proxima Nova
18. typefaces
19. alignment
20. tracking & kerning AVE AVE
21. visual hierarchy there’s a reason that headings are called headings!
22. 2Χ 4Χ Learn to skip weights Double size when you can
26. s u m m a r y U S E A P R O P E R L I N E L E N G T H 1 . 2 . S C A L E Y O U R H E A D I N G S 3 . S E T T H E L I N E S PA C I N G 4 . 5 . 6 . S E L E C T A T Y P E F A C E F I N D T H E F O N T+ S I Z E A D D W H I T E S PA C E A T T E X T+ H E A D I N G
29. n o w a d a y s
30. it’s amazing after all! i typography
31. thank you very much