Typography is often neglected on websites. This is a shame, because by improving your typography, you'll improve both your website design and readability. In this article, I have compiled 10 extremely useful typography tips that will help you to make your website looks better.
Correct line height
One of the most common web typography mistake is definitely an incorrect line height. Line height define the height of a line of text, so it have to be set according on the font size.
As a rule of thumb, I always add 7px to the font size when setting line height on texts (with 12 to 15 pixels font size)
body{ font-size:14px; line-height:21px; /* 14px + 7px */ } Correct title margins
Another common mistake is an incorrect margin around titles. A title is related to a paragraph, it is not a separator between two paragraphs. This is why a title should have a wider margin on top than on its bottom.
Don't use too many different fonts
In order to keep your website readable and professional, you shouldn't use more than 3 different fonts. Using too many fonts can be confusing for the reader and will make your website look cluttered.
On the other hand, using fewer fonts keeps your website clean and readable. You can use one font for headings, one for the text, and eventually another one for the logo or the subtitles.
Use monospaced fonts to display code snippets
If you're a developer (like most persons reading this blog) you probably want to display some code snippets on your blog. If yes, please use a monospaced font to do so. So, what's a monospaced font? It's a font whose letters and characters each occupy the same amount of horizontal space.
So, which fonts should you use to display code snippets on a website? Courier is by far the most popular, but what about giving a try to most recent fonts such as Consolas or Monaco? And if you want even more choice, you should definitely have a look there.
Care about contrast
Even if your website have a great typography, another point to consider is contrast. If your page background is grey (#999999), then do not use a dark grey text (#333333) otherwise your content may be hard to read, especially for older people or people with visual disabilities.
Generally, excepted if your site is about hacking, black hat seo or gothic rock, you should use a light background and a dark font to keep a bright contrast and increase your site readability.
Keep underlined text for links
Since I've started using the internet twelve years ago, the default style applied to links by browsers is a blue text with an underline. Althought the blue is often changed to another color, the underline has been since recognized as the generic style for links. This is why you should never use underlined text for other things than links. Otherwise, this can be very confusing for your readers.
Create a library of styles
A simple and effective way to make your website visually stunning is create specific styles for specific usages. For example, what about creating a .warning CSS class to display warnings to your readers?
Hierarchize titles and text
In order to improve readability, creating a hierarchy consisting of titles, intro paragraphs and regular text is important because they allow your readers to visualize your articles and quickly access to the part that they're interested in.
Don't be afraid of white space
One of the best typography tip I've received is "Don't be afraid of white space". White space is not blank space nor unused space, it make your design clutter-free and professional. Many people love Apple's website for that reason: It's sophisticated but simple, and have lots of white space.
Use the right symbols
An important point to consider if you're looking to improve your typography is the use of the rights symbols. For example, double prime symbols are often used instead of quote symbols.
Note the difference betwen the double prime verison:
He said "Hello".
And the same text, using quote symbols:
He said "Hello".
Better, isn't it? If you're a WordPress user, you'll probably be happy to know that your favorite blogging platform automatically transform double primes into smart quotes. Otherwise, you should use HTML entities as shown below:
He said &s;ldquo;Hello”.
Posts
