Web Typography: These Tips Will Make Your Website Look More Professional

Spacing: Change the letter-, word- and line-spacing in your headlines. The bigger your font gets, the bigger the spaces between letters, words and lines. This is a problem, as it creates the illusion that your headlines are disjointed and that the letters are floating. To help unify your headlines, shorten the white spaces just enough so that the headline can be read clearly. In doing this, you are also adding weight to the headline, creating a contrast with the body of the text.

Font Sizing: Stop sizing your text with Px and PT. Pixels (Px) are a static measurement and cannot be adjusted by the reader to their preferred size. Points (PT), is comes from a print design background. Don’t use this on the web. Instead, start using EMs. Ems is a relative measurement, and a website’s typography set with Ems can adjust as the reader zooms in and out.

Leading: Add extra space between lines. By doing this, the body of your texts becomes less crammed, less overwhelming, and therefore easier to read. As a general rule, you can set line heights to 150% the size of your text.

Serif or Sans-Serif: Use serif font for headlines, and sans-serif for the body. Serifs, as we talked about before, have the tails, which help to guide your eyes along the letters and through the words. They also look elegant. Sans-serif fonts, like Helvetica, don’t have these accents. These appear more clear and modern. Serifs don’t look as clear in smaller fonts, as the detail is lacking, therefore the serif shows up a lot more in the headlines, and less so in the body. Sans-serifs are easier to read in small fonts because they are more simple. I have to admit that I sometimes break this rule, but hey, nothing is set in stone ☺.

Ellipsis: Use ellipsis instead of three periods. Three periods are too far apart to cause an interruption in the text. Use …, for the correct ellipsis symbol.

Typography Contrast: Use proper sizing for different typographical elements on the page. Often the default sizing styles in content management systems like WordPress, are too exaggerated. Yes, the main heading needs to be the largest, but there is no need to have extreme differences.

Number Of Fonts: Same as in print typography don’t use too many font styles. Maximum two will be fine – one font for headings and one for the body. Actually, using just one font family on the website can be very pleasing.

Paragraph Alignment: Never use justified text on web page. It will space-out the words awkwardly and it will make it much more difficult to read. Use only left alignment for main body. At times centered text might also work, depending on the overall design.

Visual Hierarchy: Create a strong visual order or hierarchy for readers to be able to navigate quickly and with ease. It gives them a visual guide to quickly find specific content they’re looking for. A good visual hierarchy will take into account the size, color and spacing as well as the use of white space on the webpage.