The Most Powerful Tool in a Designer's Toolbox

With web design becoming more forward thinking by the day, it’s clear to see that most design is driven by powerful imagery. However, we can’t lose sight that typography really is the big lynchpin that holds all the design together, as around 95% of every website is dominated by content and typography is the art of displaying this content. Many factors, such as typeface choices, type size, type hierarchy, line spacing, alignment and colours all play a massive part in guiding users through a site experience.

The advent of Google fonts, Typekit, CSS services and other technologies have turned corners and now marshal a new wave of typefaces; some of which don’t necessarily fall into the serif or san-serif typeface categories. The massive 8000kg elephant in the room is Google, now showcasing thousands of web fonts for the price of zilch. Most novice designers succumb to the common pitfall of wishing to make something personal and unique by cherry-picking ten of their favourite typefaces and then bombarding their webpages with them. If any designer is harbouring this notion, there’s a lot erase from memory. Too many designers attempt to save their designs without realizing they’re actually pouring fuel onto the fire.

There’s plenty of flashy and flamboyant graphics, jazzy illustrations and colourful theatrics to be witnessed, but the content is the single most important thing users are after so typography really should be given its due status. If the presentation is not nailed to upmost perfection, the content’s readability and perception will be hampered and will dampen any experience for your visitors. A risk you’ll probably not be willing to take.

Hitting the right mark for your typography, whilst having the subtlety of using it, really is the cornerstone for successful web design. No-one said it was going to be easy to grasp though but here’s some pointers for helping you learn the ropes!

Less is More For Typefaces

Choosing the right typeface for the job is like opening up the wardrobe and choosing your outfit for a particular occasion - you should decide upon a typeface according to the kind of message you’re wanting to convey. It’s suggested to stick to a minimum number of typefaces- two or three is a sufficient number to work with, making sure you use them consistently and uniformly as too many will make your style poorly defined. Some sites work well by using many typefaces as an artistic statement but as a general rule of thumb, the number of typefaces should be limited as it aids hierarchy and tone without steering visitors away.

Size Really Does Matter

Many designers have tuned themselves to work with small type sizes in line with more minimalistic website designs that have recently conquered the web, yet the sole purpose of content is there to be read and if small sized typefaces are utilised, you’ll end up alienating a huge number of site visitors as they really don’t want to spend their time squinting at the screen. Not only this, but small type sizes prove even harder to read on the screens of mobile phones and given the unprecedented rise of mobile browsing, it’s all the more crucial to get it right across a range of platforms. For body text, the minimum type size should be around 12 point, or 14 to 16 better still.

The Almighty Power of Type Hierarchy

As well as being visually striking and also retaining usability, it’s an important must to establish a typographic hierarchy, used consistently throughout your website and the most effective way of achieving this would be to differentiate between the different elements of the content, using varying type sizes, headings, sub-headings and paragraphs to break up text into manageable chunks. Users don’t like to sift through heavy content that’s not ordered and they have a short attention span for reading web content.

If you come across a 2000 word plain text article, whether it’s the most interesting of topics, you’ll probably struggle to get through it. Fine-tuning it here and there, with some logical ordering such as change of type sizes and typeface choices, the article you’re reading half-heartedly will suddenly transform itself from something lukewarm into a glowing report and a thing of beauty and you’ll be hooked, right up until the last word.

Lines and Letter Need Some Space

The spacing between your lines of text is a real deal breaker for good typography. Generally the larger the space between the lines (known as leading) the more readable and easier on the eye the content becomes and it’s really as simple as that. It’s worth noting that line spacing that’s too large could mean that bodies of content look isolated and lines that are restricted in space are unreadable and is sure enough to scare your visitors away! Ideally, the line spacing should be around 0.3em-0.5em larger than your type size, although this could be dependent on your design. Alongside this, a generous amount of space between the letters of text (known as tracking) will increase readability. Like line spacing, if the space is too small or large between the letters, readability will be compromised.

The Architecture of Type Layout

Type alignment shouldn’t be ignored for web design. Commonly four types are available to use: ranged-left, centre, ranged-right and justified. All have different qualities and aesthetic risks when used but generally for web design, control could be out of your hands if you decide to opt for a justified text alignment. Justified text will be optimized to fit into a clean shape, which makes it great for books and newspapers but it doesn’t quite cut it for web. Lines may create ugly gaps due to cramming into a desired shape whereas the other alignment options give you more flexibility for your site. Choose wisely.

Colours That Go Hand in Hand

Getting the correct colour palette for typography and background is central to web design. The black-on-white norm has widespread use, and all for good reasoning. The simple fact is the stark contrast between the two colours makes it easy for users to read content. It’s all about finding the balance between which colours compliment each other and don’t have a head-on clash with one another. Make certain to choose colours that contrast well, especially if you want to keep visitors glued on reading all of your heavy-text content!

In a nutshell, typography sets the tone for your site and when it’s done well it will add a great deal of credibility. Good typography should flow seamlessly across the page and when your website does turn heads and garner the attention of visitors; it really should be for all the right reasons. Maintain uniformity and you’ll see user experience rocket and conversion rates will soon be soaring through the roof!

Charlotte Allen