12 Website Typography Tips & Examples

1

Try to keep the number of font sizes used to a minimum, 2 is recommended but 3 at the most. Avoid using fonts of the same classification (2 serif fonts) and if unsure about pairing fonts stick to one. (For more on pairing fonts see Font Pairing Tips)

When Using Too Many Fonts

They Fight For Attention

Make it difficult to read and can make a mess of your design.

So Limit the Number of Fonts You Use to 2 or 3 at the most.

2

When using a single font make sure to choose a font family with multiple weights, such as Open Sans, Lato, Montserrat, Prompt or Source Sans Pro and that look good at various sizes for easy readability on various devices.

Prompt Thin (100)

Prompt Extra Light (200)

Prompt Light (300)

Prompt Regular (400)

Prompt Medium (500)

Prompt Semi Bold (600)

Prompt Bold (700)

Prompt Extra Bold (800)

Prompt Black (900)

Prompt Regular 30px

Prompt Regular 28px

Prompt Regular 26px

Prompt Regular 24px

Prompt Regular 22px

Prompt Regular 20px

Prompt Regular 18px

Prompt Regular 16px

Prompt Regular 14px

Prompt Regular 12px

3

When using different weight fonts make sure there is enough difference between them, so you generally want to skip a weight. Go from light to bold or medium to extra bold.

Header Semi Bold

Body text is regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4

Good size for body copy is 16px, which on screen is about the same size as a printed book. Text heavy pages body copy should be a little larger, 18px is a good size. Secondary font should be 2px smaller, so 14px.

16px is a good size for body copy when you have a mix of copy and images.

14px is a good size for secondary copy such as photo captions.

18px is a good size for body copy when you have page heavy text. 

5

Titles should be at least twice the size of the body text for contrast between the two, so if body text is 16 then titles should be 32px. If using sub headers make sure there is enough difference in size between the header and body.

Header 32px Semi Bold

Body text is 16px regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

6

Avoid using all caps for body text. All caps is fine for content that requires minimal reading, such as a short title or logo, but is difficult to read when used in paragraphs.

WHEN TEXT IS ALL CAPS FOR BODY COPY OR PARAGRAPHS IT IS VERY DIFFICULT TO READ AND EVEN MORE DIFFICULT TO READ WHEN IN BOLD.

7

Avoid wide blocks of text. People are used to reading at most the width of a letter. So around 700 – 750 px wide or 45-75 characters on a line to.

Narrower blocks of text like this are easier to read
Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. Pastry sesame snaps candy jelly chocolate cake dragée icing. Jelly beans jelly-o apple pie liquorice marzipan cotton candy topping dessert icing. Sesame snaps cake jujubes dragée carrot cake candy canes chocolate cake. Candy cake marzipan topping sesame snaps liquorice marshmallow.

Wider blocks of text like this are more difficult to read
Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. Pastry sesame snaps candy jelly chocolate cake dragée icing. Jelly beans jelly-o apple pie liquorice marzipan cotton candy topping dessert icing. Sesame snaps cake jujubes dragée carrot cake candy canes chocolate cake. Candy cake marzipan topping sesame snaps liquorice marshmallow.

8

Good contrast between the font color and background color can avoid eye strain. According to Web Content Accessibility Guidelines (WCAG) small text should be at least 4.5:1 while large text of 24px and up should be at least 3:1.

This is an example of good contrast

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is an example of poor contrast

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

9

Avoid or limit using red and green text. Around 320 million people are colorblind, 95% being men. 98% of those with color blindness have red-green color blindness.

Limit the use or Red and

Green for text and titles

10

Avoid scripts or decorative fonts that are difficult to read. If you have trouble reading them on a desktop, they will be impossible to read on a mobile device.

Scripts fonts difficult to read on desktop

Will be impossible to read on mobile

11

Justify left, it’s easier to read or centered for title and one or two sentences. Right justified and fully justified is difficult to read on screen.

Left Justified Easy to Read

Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. 

Justified Hard to Read

Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. 

Right Justified Hard to Read

Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. 

12

Line spacing: 130% – 150% is ideal. 140% is used the most

Good Line Spacing

Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. 

Too Little Line Spacing

Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. 

Too Much Line Spacing

Cookie lollipop brownie sweet roll dessert lemon drops chupa chups cake. Tart jelly beans muffin candy canes. Caramels macaroon chocolate bar caramels. Marshmallow soufflé cookie pie soufflé candy canes. Apple pie icing chupa chups cheesecake candy canes marshmallow. 

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Skip to content