The Golden Rules of Typography

What makes typography ‘good’? And, more importantly, what exactly is it? Broadening your designing mind to the different applications of ‘good’ typography will enhance the way you make websites and change the way you look at others.

The basic definition of typography is: the art and technique of arranging type. Essentially how text looks on a page. From how far apart the letters or words are, to their alignment, contrast to draw the eye or repetition of bullet points, colours or lines. Typography is an important part of any site, but most people don’t think about it; font is font, what does that have to do with web design? When it comes to websites, typography can make or break your design; the positioning and visual attributes of the text on your site is what either draws the eye, or repulses it. Text gives a website personality, and at the end of the day it’s what you spend most of your time looking at.

Though there’s no written rules of how to use typography to enhance your web design, a few do’s and don’ts are always helpful. Of course, the right kind of experimentation and going ‘off book’ can make a website very unique and aesthetically pleasing, but just remember: you can’t break the rules without knowing what they are first.

Font and Alignment Creates Character

Choosing what font, or fonts, to have on a website makes a big difference. Times New Roman gives an air of professionalism, whereas Comic Sans tells the reader that you’re a little more fun loving. Whatever you want your website to say, and whatever voice your website has, the font you use will help convey that; it’s not just about the pictures you use or even the content. The right font gives your website personality, or at the very least makes it appealing and easy to read. You don’t want to scare a potential customer or client off with awkward and ugly writing, the element on your website that you want a potential customer or client to be looking at.

Alignment of text adds to the character as well as what font it has been right in. A section of text that is right or left aligned gives a more sophisticated look to a website, rather than text that has been centred. Usually if a block of text is left or right aligned, with an interesting graphic, pictures or diagram beside it to compliment what is being said, this enhances the user’s experience and gives them something visually appealing to view.

A brilliant way to test out fonts to see what kind of character they have is by using Sky Fonts. In lieu of purchasing them, it allows you to try out a range of fonts and styles for five minutes, giving you the opportunity to decide how you want your website to read.

Repetition is the Key to Success

In any typographical work, repetition tends to feature heavily. Bullet points, lines, colours and typefaces should stay consistent throughout the text. Of course, this isn’t always necessarily the case, and quite often a single line, sentence, segment or detail is highlighted by an experience designer to draw the reader’s eye. However, elements are made stronger by repeating their functionality and structure; a bullet point list is far easier to read than a block of text, and in its uniformity, it allows the reader to skim the information quickly.

However, don’t forget that though similar styles for sections helps keep a reader’s attention, don’t continue that for all text across the site. The same thing repeated can look good under certain circumstances, but a little contrast can go a long way. Which brings us to…

Contrast Draws the Eye

Contrast is anything that is different to the rest of the page; white text on a black background rather than black text on a white background, for example. Varying the size, structure, weight, direction, fonts or colour of text on a page allows you as a designer to choose what a reader will focus on. Or, at the very least, set up a visual guide. Make sure what you’re pointing out relevant. Contact details, a name, an important fact about a company or a quote from a customer are all points that someone may choose to emphasise them to draw attention to them.

When designing a page, or website, it’s key to make sure that every piece of it looks deliberate. There’s no point in creating something only to have it look as if you accidentally included two fonts that look similar, or colours that don’t match.

Too Many Fonts Spoil the Broth

When it comes to typography, sometimes originality is the key to success. But, more often than not it’s the exploration of similar looking fonts together to really enhance the page’s aesthetic and improve its overall readability. Throwing five different fonts at a page will make it look way too crowded and confusing and is more likely to put a potential customer off. Subtlety is always the way to go when talking about typography; of course, having an element on a page that’s “out there” can sometimes lead to surprising and interesting results, but more often than not sticking to similar fonts works really well.

If you’re not sure whether a page works, stop and take another look, or get a friend or colleague to give you some feedback. Getting another pair of eyes, especially if they’re fresh, can give you another perspective that will be vital to understanding whether it works or not. If there’s too many fonts, try and tone the amount down on each page and if they don’t fit, try and find some other fonts in the same family. Serif with serif, sans serif with sans serif and so on.

The Hierarchy of Text

Essentially grouping the right things together in the right place.

Hierarchy on a page involves several things working in tandem, including headers, content, positioning and typeface. On most websites, there will be a distinction between header one, header two and main text content; header one will be larger and sit at the top of the page and header two will sit between sections of text. When thinking about the hierarchy of text on a page, you must first look at what parts you want separated, and what parts you want joined together. Elements that are similar in style or content should go under the same header two, grouped closely together, whereas elements that aren’t related should be separated enough that the reader understands that the two elements aren’t connected.

Size, spacing, colour and height are good ways to show hierarchy on a page and guide a reader’s attention and eye. Anything that contrasts text will make it work, so be on the lookout for ways to make pages even more interesting and much easier to read.

So, what can typography do for your website?

As you can see, the answer is 'quite a lot'. Typography isn't just about fonts, there's a plethora of elements that go in to making a page on a website look good. Of course, these aren't the only things you need to know about typography, but they're important things to consider when designing a website. At the end of the day, the text on the page is what a reader is going to be looking at the most; though images and the navigation are used, the text is a major part of any website. Thinking about typography is key to not only making your website look good, but making it readable as well. Dissecting your typography and planning beforehand shows the people visiting your website that you've thought about your typography, and that you haven't slapped some text on hoping it looks good.

Always think about what you're doing before you do it, and your website will be better because of it.