Chykalophia Logo Color

5 Pointers About Typography Your Site Will Love

At the heart of all good web design lies careful attention to the provision of a first class UX. Your website needs not only to look great, but also to be easy to find, access, and navigate. To a large extent, this comes down to your UI. The easier it is for visitors to use your website, the more likely they are to engage with your content and develop a positive opinion of your brand.

Yet another huge part of optimizing your website for its audience is your approach to
typography. The text that appears throughout your site ties the whole aesthetic together, and can easily make or break a design strategy.

Happily, great typography is within everyone’s grasp. It’s simply a case of knowing what to look out for, and what sort of adjustments you can make if you notice these issues. Here are a few pointers to get you started, and some guidance on why these features can make such a difference to your website’s success.

1. Select Appropriate Font Pairings

Choosing the right fonts for your website is a huge deal. After all, they will be used and
viewed throughout your website, and if they are confusing, ill-fitting, or simply tough to read, then your visitors may choose to go elsewhere.

Different fonts evoke a variety of sentiments and expectations, so while there may be a huge range to choose from, you will likely find that when you come to choose fonts for your website, you can quickly narrow down your selection.

In general, it’s good practice to use two different fonts on your website. Too many variations can make your content appear disjointed, while using the same font for everything just isn’t all that exciting. However, having a second, carefully selected font enables you to break up your site’s visuals, without taking away from the cohesion of your overarching aesthetic.

Of course, your two fonts should also be complementary, fitting with each other, and with the overall style and personality of your web design.

Top tip: if your website is built using Shopify, for example, look at integrating web fonts to give you a wider choice of typographic styles to choose from. Here’s a useful guide.

2. Understand Hierarchy

When scanning a page, you instinctively rank the importance of each feature according to certain factors. This can dramatically change not only the order in which you read each item, but the weight of importance you attribute to them. Effective use of hierarchy enables you to target your message more effectively, while simultaneously making it easier for the reader to navigate your content. Here are a few factors to consider:

  • Scale – as a rule, larger text tends to convey a greater sense of urgency and importance. For example when copywriting, headings and subheadings tend to take a larger font. This improves scannability, and breaks up large bodies of text. But you can even vary the size of individual words to catch the eye, emphasize the key point of your CTA, or just convey a bit of excitement.
  • Color – If you decide to use multiple colors for your onsite fonts, think about how they
    interact with your website’s design as a whole, and consider the impression your color choice gives. Colors are not only associated with importance, but also specific
    functionalities, so be particularly careful with this aspect of your typography.
  • Position – in general, the more prominently placed text is, the more eye-catching and
    important it is likely to appear. There’s a reason headlines and titles tend to be at the
    top of the page, rather than buried somewhere within your copy.
  • Individuality – any feature that simply stands out for being different is likely to appear
    more important and relevant to the reader. Even the ‘small print’ benefits from this, as
    although it is not intended to be the first thing the user reads, it is immediately
    identifiable because it is significantly smaller than anything else.

3. Check For Kerning Errors

For some people, kerning is an alien concept, a mythical bugbear that plagues only other
people. To those others, it is the single most maddening typographical issue that they could encounter.

Kerning refers to the spacing of your text. Not alignment or tracking, although these are
definitely important as well, but the spaces between each letter and its neighbors. If these spaces are distributed inconsistently or unintuitively, text becomes far more difficult to read, and can be jarring to those who are particularly aware of it.

The reason this is so important is that the eye interprets words using primarily their length, combined with the first and last letters. Poorly kerned text is harder for the eye to segment effectively, resulting in reduced reading speeds, and a greater chance of misinterpretation.

Ultimately, aside from making your website easier to read, accurate kerning looks neater,
more professional, and more coherent. There are a few handy tools and tricks you canemploy to check your kerning is accurate, including flipping your text upside-down. Because this disassociates the meaning of the text from its appearance, it is easier for your eye to detect spacing issues.

4. Be Consistent

While clear, readable, and appropriate typography is essential, it is even more important to remain consistent in your choices. You may settle on an unconventional font, unusual
alignment, or even a new approach to visual hierarchy. However, your decisions can all lose meaning if they lack consistency.

By sticking to a cohesive design structure, you make it clear that there is purpose and
thought behind your typographical selections. In contrast, if your website is a mishmash of different styles, then it may seem like you have no plan, nor any particular message to
deliver.

5. Break the Mold

This might seem like a contradiction to point 4, but in reality the two go hand in hand. Having a consistent, well-structured design and carefully selected typography means that when you shake things up, it will have all the more impact.

For example, this could mean trailing off the end of your copy with a gradually decreasing
font size, or highlighting the first letter of each paragraph in a specific color. Remember that typography is just one more aspect of web design, and it pays to be a little off the wall and creative.

This is not to say you should simply throw out the rules and do everything completely
differently. However, finding ways to integrate your design objectives and the personality of your brand into your typographic style is a brilliant way to make your website memorable and unique. Remember, a tiger doesn’t lose sleep over the opinion of sheep.

Great typography will always be subjective, but the above tips are a good foundation to work from. Ultimately, you will need to consider factors such as the style and personality of your brand, in addition to the expectations of your audience, before you can make any definite decisions.

However, with that out of the way, you will soon begin to develop a more instinctive
understanding of typography. This in turn will enable you to make continuous improvements to your website, experiment with varying approaches, and create consistent, coherent content that converts.

This article is written by:
Victoria Greene is a branding and growth expert who runs a blog called Victoria Ecommerce. Here she shares tips with growth hackers and business owners looking to boost engagement and sales.

Sign up for our Next Draft newsletter

Get our top branding, UX and website resources for your business straight to your inbox.

Resources Page Mega Email Signup

This will add you to our Next Draft list where we send out useful content around branding, marketing, and all things website that help inspire growth for you and your business. Of course you can unsubscribe anytime.

Get started on a branding or website project with us.

GET ON A CALLBook a brand, ux, or web audit