Five Tips for Better Typography
When designing online, people often overlook the need to careful consideration of font styles, sizes and colours. How you display and position the words on your page can have a dramatic impact on how long people stay on your site, and how much they take in.
If you follow our five simple steps below, you will see a dramatic improvement in the look and feel of your designs. You’ll benefit from readers spending a little more time browsing through your pages.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
1. Use headings
Unlike a novel or a textbook, people rarely read your page word for word online. They scan through the text on the page to find what they are looking for. Using appropriate and regular headings can work wonders and really captivate your reader.
Ensure that you use h1 and h2 tags etc appropriately so that search engines can make more sense of your page and that it’s semantically correct.
2. Split up blocks of text
For similar reasons to the above, it is very important to split up blocks of text. It ensures that readers feel that they are progressing through the text and allows them to logically skip through your article to find what they came to. They are much more likely to stay, read through and locate what they needed when your text is easy to navigate and scan.
3. Line length and spacing
The length of your lines (the measure) is particularly important when designing your website to ensure legibility. A general idea is to try to keep your lines around 2-3 alphabets in length, or 52-78 characters. This isn’t always possible depending upon the layout of your website. It is often a good idea to ask people to read a page of your site in a few variations to see which one they read quickest, or find easiest to concentrate on.
Line spacing is also important (the vertical distance between lines). This can be altered in CSS, using the following rule:
p {
line-height:18px; }
[/code]
Altering this can have a dramatic effect on how easy your page flows, and the legibility of text. Experiment and decide which settings look best for you!
4. "Style your punctuation"
By default, punctuation on the web is plain and a little boring. A good example of this is double quotes. By default, they are straight and vertical - not showing the reader whether they are at the beginning or end of a quote. With a little alteration, using the codes “ and ” respectively can give you curly quotes and result in text looking akin to those in this section heading.
5. Limit different fonts
A general rule we employ is not to use more than three fonts on any one page. One for headings and titles, one for subsection headings and one for the main body of text. Design Shack uses only two fonts throughout the website. Minimalism is key to keep the reader from being cluttered and confused, but used correctly different fonts can help to seperate sections and enhance the flow of the page.