How to choose fontsfor your website?

The perfect recipe for web typography

There’s no single recipe for perfect typography...

(sorry)

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.

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.

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.

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.

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.

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.

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.

When good typography goes bad…

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

How to keep your typography fresh?

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.

Practical TypographyAn indepth look at best pratices and praticle application for web typography.

Typecast & TypekitThese 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 readLook 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

Type we LikeA beautiful showcase of Google font combinations and creative uses. Just click or hover to see the font in use.

I love typography & Friends of typeWhile 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