One of the most important visual elements of any website is the typography. Although there are a multitude of factors regarding a well-designed typography style, you should really put an emphasis on using a style that not only suits your brand identity that leads to more clicks… but to more conversions as well.
While everyone wants a website that reads well, this is much easier said than done as the saying goes. There is an abundance of text options available today and designers can find themselves struggling to find just the right typography style that will maximize their client’s brand’s potential.
Want your website typography to stand out? Here are the best tips we can give you… let’s go!
Use fonts that appeal to your demographic
Sounds straightforward right? It initially does, but it’s a tricky art to master and it applies to all areas within brand design.
Start by researching your key demographics.
– What most appeals to them?
– What information are they really looking to digest?
– What style will help them digest it most easily?
For a website targeting a younger audience, using bold sans-serif headings may be most advantageous. For websites touting an expensive luxury service may find that visitors are more drawn to pleasant serif & script styles that add a more refined touch to the site overall.
When choosing your ideal font, first take the font weight into consideration. Some will read better when made bold, while others will look & feel awkward… even illegible.
Similar to selecting a color palette, decide on 2 or 3 fonts to build your site around and ensure that each has a role, is clearly unique and that they all complement and partner well together. In other words, don’t choose 3 basic sans-serif fonts.
Space your words carefully
Having your sections look their best means spacing your words & letters spaced out more (or less for that matter) in order to have your text looks its best, Keep in mind that a lot of fonts are meant to be used for the body of the text, so they may look awkward when used in headers.
It’s often beneficial to slightly reduce the spacing on header fonts¬ — this is to draw less attention to the whitespace between the letters.
The amount of whitespace you do have between lines of text — referred to as “Leading” — is a critical factor to consider when writing larger paragraphs. Adjust leading to the proper amount so users can more easily follow larger text blocks. Not only does it make it easier to digest, you also prevent alienating potential customers.
Bigger is better… right?
Generally speaking, when it comes to website text, yes. Keep in mind that when it comes to the average person who’s shopping online, looking for information or simply perusing the web, internet traffic is ruled by mobile devices.
Header text (should be noticeably larger than sub-header text)
Sub-header text (should be noticeably larger than paragraph text)
For paragraph text, it’s crucial that your text not be too small to read on smaller screens. The rule of thumb for mobile devices it to have a body font size of 16px — any less and your text could appear illegible and any more could create awkward line breaks as the text tries to adapt to smaller screens.
Shorter strings of header text will present differently on mobile. They should, however, still appear slightly bigger in order to stand out from the paragraph text. You can do this by increasing the font weight to a bolder typeface.
Strike a contrast
Designers often tend to underestimate the importance of good color contrast — in other words, how the text color stands out from the chosen background color or image. They often lean towards aesthetic typography choices without considering the functionality first & foremost.
Does the choice in text color read well to the first-time visitor?
Does it meet accessibility standards?
Color choices that don’t meet these criteria will cause any website, new or otherwise, to suffer. So, don’t be that guy.
The paragraph text contains the highest volume of information on your website. So, it must be legible for all users. Need help on measuring legibility? The Website Content Accessibility Guidelines (WCAG) are published by the W3C (short for World Wide Web Consortium) to help designers with a wealth of accessibility issues, not the least of which is text contrast.
Playing matchmaker, with the right fonts
As I mentioned earlier, decide on 2 or 3 well matched fonts. Ensure that they work well in tandem and not appear awkward or bland when seen together.
A good of thumb is to choose fonts from the same font family — this is essentially a group of fonts designed to complement each other. Many font families have a wide range of font types (serif, sans-serif, script) and font weights (regular, light, bold) that you can experiment with.
When building the initial design of the site (or any digital design for that matter), it’s best to start by choosing a serif font accompanied by a sans-serif font from the same font family. That’ll get things going and you can experiment from there.
And finally, always keep an eye on your line length
Dumping too much text in one place is a bad, bad idea. Long lines of text will not only bore visitors, but disrupt the overall flow of the website in general. One of the best ways to reduce both is to limit the length of lines.
Aim to strike a balance between readability and the content being conveyed. Shorter lines not only help break up information for easier reading, but they also keep the eyes from having to travel farther across the screen.
Since the majority of your visitors will be on mobile devices, keep the line length even shorter to achieve optimal readability.
