BEST PRACTICES

• • •

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

Don't use system fonts for web.

Don't switch fonts for a hover state.

Don't pair fonts from the same font classes.

Use too many typefaces.

Use all caps sparingly.

Watch out for widows (lonely word) & rivers (justified text).

Don't use web fonts for ios applications.

Use ttt, otf, or woof font formats for web.

Watch out when using blue for text that's not a link.

Don't use drop shadows.

Studies are showing san serif fonts do better for web reads.

No more than 75 characters for paragraph text.

No more than 45 characters for paragraph text for mobile.

Use hanging quotes.

Use size, weight, color, contrast and position for hierarchy.

Don't use crazy themed fonts, ex: Halloween theme.

Never distort a font from it's natural form.

Careful when using gradients for the color of the font.

Avoid justified paragraph text unless you're ready to set type.

Be careful when using small text for web, add good letter-spacing.

Use good contrast for legibility.

Give good white space and don't clutter typographic content.

Dark color text on a light color background is best for readability

San serif with dark colored gray works best for digital long reads.

For ui, use numbers in sentences over words.

Mobile screens have glare in the sun & can make light gray text hard to read.

Left justified layouts will scale better than center layouts.

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

H