SEO Typography Tips for Websites and Best Practice Guides
Excellent websites communicate well with the user. Most of this communication is via text and poor typography choices and clumsy layouts detract from the user experience. Unprofessional layouts creates the wrong impression. While visual layout details are important more than 95% of most websites are text which conveys the primary information to the users.
Good typography and text layouts helps make the website more readable, attractive and conveys the sense of authority. This is the key to users having an excellent experience with the website, with efficient information transfer. The typography tips and guidelines outlined below will help you maximise the user experience with your websites.
A Simple Good Design Option with Few Fonts is Best
Many website designers make the mistake of adding various fonts to various parts to make the website look more exciting, attractive and fun. However, this is a huge mistake. This makes the website look cluttered, overloaded, overwhelming and too complicated to look at for most users. Minimalism and keeping it clear and simple are the best options for font numbers, variability and text styles. This is especially true when you want interaction with the user.
Context and Your Audience should Drive the Choice of fonts.
Different fonts bring out different moods and appeal to different audience types, including age groups. Depending on what your website is about, you should choose an adequate font. Picking the coolest fonts for your website might not be the best possible thing. Think about what fonts you think of your clients would want to see. It also depends on the theme of your website. Is it for fun, education, entertainment or a reference source for serious information. A website about health will need a different font to one about art or games.
Do not Use All Caps
Text in all caps is hard to read and it appears the text is shouting at you. This will put people off
Scale your Headings - Only Use two Levels
When using headings in your text, do not use more than two levels (say H2 and H3). More levels creates confusion as your users will be unable to understand what you are trying to achieve. This will make the text easier to read and users will understand what the main and secondary levels mean.
Pay Close Attention to Letter Spacings
Excessive white space between letters makes the text hard to read and understand. Also pay attention to the spacing between the words and the sentences. You don’t want the spacing to be too big nor too small. Stick to the standard conventions.
Use Standard Fonts in Preference
It is a mistake to think that using custom fonts will make you look more professional and smart. However, in most cases, it would be best if you stuck to the system fonts that render better on websites. Custom fonts can be hard to read and may annoy your user who may simply be after information that can be easily read. Make sure any custom of fancy fonts you use are fit and proper for your audience and suit the topic and purpose of your website.
Make Sure You Align Texts Properly
Given the emphasis on mobile first design stick to 'left' or 'centre' alignment. Keep your blocks of text and headings small
Use Appropriate Line Lengths
The ideal number of words per line should be around 45-90 characters. This should also be the maximum width of your text blocks.
Use Relatively Large Font Size for Mobile-Ready Websites
Make sure your text is easy to read on mobile devices of various sizes. This may mean the text appears very large on a standard screen. However, mobile ready design should guide your fin size. Various compromises may be required to make your website work on a range of devices and screen sizes.
Make Call-to-Action Text Stand Out
Many text components on a mobile website enable the user to complete various operations, such as a link or a highlighted instruction. Use color and bold text options for Call-To-Action elements from your users. However, avoid coloring text in red or green tones as some people are color-blind. Blue is the standard color for a link of button.
Do not Skimp on Testing on Mobile Devices
Test your typography and layouts on a range of mobile devices with different screen sizes. Modify your choices so that they work well on all screen sizes.