There are many elements of web design that can impact your site’s performance. We have spoken about how colour, in particular, can be a make or break aspect. Yet, an element that is always overlooked and is just as involved in the design process is typography. On average internet users only read 28% of web page copy. So, whether your web page succeeds can rely a lot on the readability of your fonts and typefaces.
Each font and typeface has its own uses. But which one is best for your web design? Luckily, I have done some research around typography and web design. I have also appropriated some psychology articles. This together will show you how typography can improve the user experience of your web design. Thus, resulting in a better website. After all, the goal of every web design should be to provide the greatest user experience.
For the sake of this article, we will be only be covering the four basic types of fonts and typefaces. These are serif, sans-serif, script and decorative. For more typefaces and font types you can always view the resources linked below.
Serif.
The main characteristics of a serif type font are the lines at the top and bottom of each letter. Some people like to call these feet. These lines or feet used in the design are to encourage you to read on. There are four classifications under the serif type font. These are old style, transitional, modern and Egyptian. Popular serif fonts include Times New Roman, Garamond and Georgia.
Do:
- Use serif fonts in your headings. All these fonts are still eligible even when made larger. Furthermore, the feet will help lead the reader on into the body of your article or text.
- Use serif fonts with other font families. According to a recent study, users actually like the contrast between the two on the same page. But make sure your serif font is still large and eligible.
- Steer clear of Times New Roman and Garamond. Due to overuse, these fonts have become stereotypical fonts of the internet. Opt for a more unusual font instead like Savoy or Dedot.
Don’t:
- Use serif fonts if you are a modern, innovative company like a technology start-up. Serif fonts have a stigma attached to them that they are old fashioned. For instance, the Times New Roman typeface is always described as out-dated.
- Use serif fonts as your main body of text. Serif fonts can be hard to read when presented in large amounts of text, particularly on the web. Additionally, these fonts are hard to read at the standard web page font size of 16 pixels.
- Just use serif fonts. Serif fonts together look too similar. They don’t create much excitement around a web design. To avoid user boredom try combining your serif fonts with other font types.
Sans-Serif.
Sans-serif fonts are serif fonts without the line details or feet. The inspiration behind the sans-serif font is the purity of geometric forms. There are three different classifications under sans-serif. These are humanist, transitional and geometric. Sans-serif fonts are also the most popular fonts on the web. Some popular sans-serif fonts are Helvetica, Gill Sans and Futura.
Do:
- Use sans-serif fonts as your main body of text on your website. Sans-serif fonts are still readable in large quantities and in various font sizes. This includes the standard web page font size of 16 pixels.
- Use sans-serif fonts with any other font family. Due to the neutral and plain nature of the sans-serif, it can be pleasing to look at in any combination.
- Steer clear of Comic Sans. This font is infamous all over the internet. Comic Sans doesn’t fit the brief of many websites as its purpose was for speech bubble text. Therefore, probably not appropriate for your website.
Don’t:
- Use sans-serif if your website is about food. Psychological studies have proven that sans-serif fonts don’t encourage appetite. In fact, they don’t encourage much as they are a completely plain and neutral font type.
- Just use sans-serif fonts. Using fonts that are too similar together can become rather boring. It doesn’t create an interesting contrast and bores readers. This can lead to users not wanting to read on.
Script or Calligraphic.
This type of font imitates real handwriting or calligraphy. There are many different classifications in this font type. This includes brush script, English round hand and rationalised script. Some popular script fonts are Bullucia, Lobster and Coronet.
Do:
- Use script or calligraphic fonts in headings. When enlarged many script and calligraphic fonts look elegant and aesthetically pleasing. Just make sure you make them large enough to be eligible. I would recommend having script font headings scaled to at least 20 pixels.
- Use script or calligraphic fonts with serif and sans-serif fonts. The contrast created is popular amongst internet users alike.
- Steer clear of script and calligraphic fonts like Brush Script. It is cliche in the design world and has become stereotypical and boring. Instead, opt for a more interesting script typeface like Cookie.
Don’t:
- Use script or calligraphic fonts on your website if you are a fact-based business. Script fonts don’t give off a reliable or direct feel. They are artsy and creative which isn’t appropriate for non-creative businesses.
- Use script or calligraphic fonts as your main body of text. Script or calligraphic fonts can be hard to read when presented in large amounts of text. Additionally, these fonts do not translate well in the standard web page font size of 16 pixels.
- Combine script or calligraphic fonts with decorative fonts. This combination can be overwhelming for the reader. A mix and match of too many stylistics is unprofessional and unorganised.
Decorative.
The design of these fonts leaves a striking visual impact. They are less about readability. There aren’t any classifications in this font family. That is why so many fonts are under the decorative family. All decorative fonts carry a purpose. Some popular decorative fonts are Broadway, Stencil and Banco.
Do:
- Use decorative fonts in your logos of your web design. Decorative fonts give your company credentials more personality and help define your branding.
- Use decorative fonts with serif and sans-serif fonts. The decorative fonts provide the most neutral fonts with a bit more excitement. This results in a pleasing web design.
- Steer clear of over the top decorative fonts or fonts that are not even in a language such as Webdings. Although fun and creative nobody can read your content. Which, to be honest isn’t practical for any website.
Don’t:
- Use decorative fonts as your main body of text. Decorative fonts can be hard to read when presented in large amounts of text. They do not translate well into the standard web page font size of 16 pixels either.
- Use decorative fonts if you are aiming for a website with a more serious tone. Decorative fonts tend to be light-hearted and not seem as formal or professional.
- Combine decorative fonts with script or calligraphic fonts. This is an overwhelming combination. There are too many styles and can be hard to look at.
So there you have it. All the basic font types and how they can affect your web design. Whether they affect your site through aesthetics or psychology. However always remember that these are guidelines and not strict rules that you have to adhere to. Your typography should revolve around your business. Everyone’s business needs are different and companies have different personalities. Therefore different choices of typography are inevitable. Just think about your business and what message you want to send out to your customers.
If that wasn’t enough and you want to read more about the psychology of typography here are some of my favourite articles:
And as always if feel like you need an extra helping hand with your web design don’t hesitate to get in touch. Happy designing!
The post How Typography Affects Your Web Design appeared first on 3mil.