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.