Tips: How to choose fonts for your website?

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. Tutorials & resources
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.

17. Visual examples and inspiration
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