TIPS // How to choose fonts for your website?

Transcript

1. How to choose fonts for your website?
3. The perfect recipe for web typography
4. There’s no single recipe for perfect typography... (sorry)
5. It’s about finding a dish fit for the occasion. Rather than make text legible, we need to make it scrumptiously readable. The following principles are important to consider and can help ensure that your typesetting hits the spot.
6. Hierarchy A combination of font size, weight, colour, position, and font selection can be used to achieve hierarchy. It’s the practice of providing focal points to make the text scannable.
7. Contrast It’s important to provide the right contrast between font colour and background. Keep in mind that too much contrast such as white agains a black can also be hard to read.
8. Letter spacing Default letter spacing should be ok for standard text, however it’s recommended to add add 5–12% extra let­terspac­ing to the use of cap­i­tal letters together.
9. Line Length The goal in line-length is is for the reader’s eyes to easily flow from the end of one line to the beginning of the next. 65 characters is often considered ideal for a optimum reading experience.
10. Line Height Line height is the space between individual lines of text, it applies to body text as well as headers. Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one.
11. White space / Negative space The space around the typography including margins and gutters plays an important role as it contributes to a balanced feeling page. It offsets large amounts of text and helps eye flow with ease.
12. When good typography goes bad…
13. ★ Poorly set type can cause eyestrain and frustration to readers. An example of this is when the line length is too wide and causes a reader to lose their place on the following line. ★ If a reader is unable to easily scan an article they may abandon it. This increases bounce-rate which may lead to a negative impact on Google page rank. ★ Lack of hierarchy in a written document can prevent a reader from finding sought after information, reducing their likelihood of returning to the site. ★ Poor typesetting can make a web page look dated and may be seen as less credible.
14. How to keep your typography fresh?
15. Stay fresh, stay new. Stay aware. There’s a multitude of blogs and resources to help you keep your type inline. Trends change over time and it’s important to check out what the competition is up to. Here’s a little something we prepared earlier.
16. Practical Typography An indepth look at best pratices and praticle application for web typography. Typecast & Typekit These resources allow you to test and play with type before taking action. Typekit is even integrated with your Adobe Creative Cloud account to save time and make the job easier! Google Material Design Specification Google has outlined some fantastic approach to type specification, and all matters design. A list Apart – How we read Look at the type, it’s just beautiful. The article is helpful too! Smashing Magazine – Typographic Design Patterns And Current Practices (2013) An in depth study of developments and trends in Web typography reveals interesting statistics, such as 84% of websites use the same fonts in the print and standard style sheets. Tutorials & resources
17. Type we Like A beautiful showcase of Google font combinations and creative uses. Just click or hover to see the font in use. I love typography & Friends of type While primarily used in print design hand lettering can be an incredible source of inspiration for interesting and engaging title fonts in web design. This is a fantastic source of inspiration and might just inspire you to push your type a little further. tips source Visual examples and inspiration