Website typography is an important aspect of small business web design but one that is sometimes overlooked. Whether you have decided to make some updates to your existing website to keep up with trends or have made the decision start a new website for your business in order to better your online presence you’re making a good decision.
As advances in web design increase, it’s important to keep up to date. Your website’s visitors will expect your page to load and run smoothly without frustrations and hindrance’s. One of the best ways to make sure you're business website is user friendly is to first ensure that your font types are legible as well.
There are a few tips and tricks that you should bare in mind when choosing appropriate font types.
With website typography, you want to be sure that it’s readable. If it doesn’t have great legibility, then you risk losing your readers in this case it could be a prospective customer! Anyone visiting your website should be able to read through your website easily and without getting lost or confused.
A good way is to define a hierarchical structure in your text including headings, subheadings and body copy. Text that is more important should be larger and should go down in order of importance. As something important to note Google recommends at an absolute minimum your main body text should not be less than 16 pixels to be considered mobile responsive.
Another good tip is to keep your blocks of text small. A text block is basically how many words are displayed per line. Wider text blocks look more like paragraphs. Adhere to smaller text blocks that display less than 100 characters per line or even less than 80 is ideal for good readability. Anything more than that is harder for visitors to track with their eyes, and most certainly avoid creating walls of text with no clearly defined paragraphs or sections that’s a big no no!
Also don’t forget to consider those who are accessing your website using mobile devices or tablets.
Give your text enough space to increase your website’s readability. You want to choose a font type that is clearly legible. If a font type that you choose is hard to read and the letters blend into one another, then your potential client is going to spend too much time struggling to read what is written rather than on comprehending your products or services. This may cause frustration to the point that the visitor may leave your webpage altogether. Also try out different kerning on subheadings to create a more interesting look.
You will find that letter spacing or font kerning as it is known, will vary between font types but can also be adjusted via your web pages css style sheet if need be to maintain consistency. When choosing a font, make sure that it displays well at different font sizes, some fonts – in particular free fonts can have a tendency for the ligatures to become jagged and ratty looking at larger sizes therefore losing their crispness, so check the font and choose carefully.
As a final note also think about the line height (height or spacing between lines of text) you’d be amazed how simply adjusting this parameter alone can increase readability – that bit of extra white space in between lines can really make a difference to an otherwise difficult type face or block of text.
Consistency is really the key here as you don’t want to have too many fonts on your website. Try to keep the number of fonts per page as low as you can. Having too many different fonts just looks ridiculous and cheapens your brand. As a rule of thumb it’s best to stick to no more than 3 fonts. You really won’t want any more than that. Use the same font type for all headings, and another one for subheadings and page headers – again consistency is best. You don’t want for example your menu to have different fonts and sizes on each page!
If you are loading a lot of external fonts on your web page then this will most certainly impact on your page loading speed. Always consider performance when choosing font types. If a page is slow to load, then this is a red flag to user experience and can lead to visitors leaving the page they arrived on (higher bounce rates).
The resolution of your font is also an important factor as some font types don’t work well at certain sizes and with certain screen sizes.
If you don’t already have branding guidelines, then you should choose fonts that best compliment your brand’s image best. If you’re a beauty salon, then you might want to choose sassy or elegant fonts. But if you’re a consultant or professional, then you might want to choose a more conservative or professional style font. Eyeball it and if it fits with your brand then that is best.
You’ll want to have web safe fonts on your site that will ensure all visitors can view the font correctly. Some fonts require that the font be already present on the end users system known as system fonts – to get around this and ensure the best compatibility across different computers and devices you can:
These things will help to ensure your preferred typeface is displayed correctly across a broader range of devices.
Many years ago in the early days of the web, sites were littered with awful fonts - remember these?
Stay away from cheap & tacky fonts like this! Also serif fonts tend to be a little harder to read on some devices so use sparingly the same go's for script fonts - never use those in the body copy, however headings are fine so long as it is legible.
Follow these helpful tips and tricks above to ensure your type face and web design work well for all end users. Your web designer can suggest things to create more interest in your website text by font styling and using the correct mix of contrasting colours, letter spacing, line height and a combination of these and more. And if you need assistance, be sure to get in touch as I’ll work with you to provide the web design services that you need!
