Typography is a very important aspect of any text that should not be overlooked anyway. Qualitative and optimized typography not just improves your web design, but makes your content readable. Here are our top 10 tips to improve the typography of your website which in turn will improve your web design overall:
Line Height
Probably the most popular typographic mistake is incorrect line height. As a rule of thumb, when you are setting the line height, add 9px to the font size (12-15px). For example, if the font size is 12px, the line height should be 21px (9+12).
Margins Around Titles
Incorrect margin is another very common mistake. Try to make the margin wider on the top than on the bottom.
Use a Limited Number of Fonts
The Golden rule of professional design is no more than three different fonts should be used to make a website readable. Using only 3 fonts makes your website look more orderly.
Code Snippets
This advice only concerns developers who want to display some code on their blogs. We suggest you use monospaced fonts for displaying codes. A monospaced font is a font with the same amount of horizontal space occupied by both letters and characters.
Contrast
Even if the topography on your site looks perfect there is one thing that can ruin everything – contrast. Try to care about it. Don’t use bright text colors on dark backgrounds. It is really a big turn-off for your readers.
Imagine a classic example – black background with white text – it is a horrible nightmare for readers as per many experts. The recommended contrast is always the use of light background with dark font color.
Contrast issues also scare away people with visual disabilities, which makes it a prime concern for web designers.
Underlined Text
Don’t confuse your visitors by making words that you want to pick out underlined. The blue color of the text with an underline is usually used for links only.
Library of Styles
The creation of libraries of styles is a good step for making your website look amazing. You should create specific styles for specific usages. For instance, you can create “warning CSS” for displaying warnings to your visitors.
Titles and Text
Create a hierarchy of text and titles in your articles. A good readable article has headings before each new regular text paragraph, which allows the reader to visualize the article entirely.
The hierarchy of content also allows readers to jump to a particular part of the text they want easily.
White Space
Many professional websites have lots of white space. It makes the site look professional, with nothing extra, just a clutter-free design. To ensure you should visit Apple’s official website. So, use white space in your design to make it look sleek.
Symbols
Use the right symbols to improve the typographic. For instance, you should use quote symbols instead of double prime symbols to make your text look better. If you are a WordPress user, you won’t meet with this problem – it automatically transforms double primes into quotes.
Shouldn’t line height be determined by a percentage rather than a fixed value? I mean shouldn’t a text block’s line height be relative to its font size? If I’m using a 9px font for an aside element, but my body copy is 14px, would you still recommend adding 9px to each to determine the line height of each of those blocks of text?
I always prefer using fix values than percentages and yes you should try by adding 9px first and if the output seems to be ugly – you can always amend it to a figure that fulfills your requirement.
Adding 9px usually works but it is not always the case!