Getting your typography right is key to ensuring your client can get the best out of your web design. As well as being aesthetically pleasing your choice of type needs to be functional. Choosing the most elaborate font is no good if the content can’t be read.
Typography crimes are common and you’ve probably come across many of them before, in fact, you’ve probably committed some. Below we’re looking at the top ten and how you can avoid them.
Follow the Trend
There are fonts which are universally known to be unpopular such as Comic Sans and Brush Script so your web designs should naturally avoid these. The most common font on the web is Helvetica, some would consider it overused and there are other alternatives such as Times New Roman and Myriad Pro which do just as good a job. When putting together your web design you need to put thought into your chosen font. Research and find a font which suits your client’s image.
Use Web Fonts
You may have found the perfect font, it suits your client perfectly but you need to pay to download it. It simply isn’t worth the effort. You should always use one of the many standard web fonts to ensure the end-user will have said font installed on their PC. What’s the point in picking a perfect font if no one but you can view it?
Pick and Choose Selectively
There are thousands of fonts to choose from and it can be easy to get carried away. There are some unfortunate websites where a different font is used for the Heading, Subheading, Body, Bullet Points. It looks unprofessional and it’s important you pick a set of fonts for your project and stick to it. We’d recommend 2 to 3 for your headings and body and perhaps a third choice for the subheadings. Simplicity is the key to good typography.
One for Body, One for Headings
There are fonts which have been designed to be used for titles and headings whilst others are meant for body text. The standard option is to choose a bolder, more noticeable typeface for headings, usually a sans-serif or decorative font. Serif fonts are the ideal option for body text as they’re designed to look and read better in bulk.
Stick to the Rules; Heading, Subheading, Body
Each segment of text in your web design relates to the next. You need to consider them all as a whole. The rules are simple. Provide a clear heading, a subheading or subheadings if necessary and body text. Each should be clearly indicated through the chosen font and additional signals such as bold, italics and underline.
Don’t Mess with the Font
Fonts are designed by professionals, the typographer knows what they’re doing so if you start stretching the size of a font to make it fit into your designated space, you’re going to have a problem. If you need to simply switch the font, some such as Helvetica have condensed alternatives if you need to squeeze them into a tight spot.
Don’t Mix your Signals
Signals such as italics, bold and all caps are used to emphasise on important parts of your content. However, you can’t use too many of them or the user won’t have a clue what’s important and what isn’t. Most web development and web design projects will only need one signal used consistently.
Choose Colours Creatively
Working in web design you should already have a keen understanding of what colour schemes work and which don’t. Colour has the potential to make or break your text. You need to ensure the contrast between text and the background colour is high, otherwise, the design won’t be readable. Choose colours that complement each other and avoid dark on dark or light on light.
Don’t Justify for the sake of it
Aligning the body of your text so it looks aesthetically pleasing can be hard but the answer isn’t simply to justify every time. Poor justification results in what are known as ‘rivers’ of white space which run through the middle of the text and make it hard to read. You need to try and achieve good or clean rags instead.
Rags are what occur when you don’t justify the text. The edge of each paragraph will look slightly ragged and you need to avoid it looking completely messy or your design won’t look fresh and inviting.
Avoid Orphans and Windows
That statement sounds strange out of context but when working with text and typography, it’s pretty straightforward. Orphans are single words which appear on their own, taking up a whole line. They’re messy and should be avoided at all costs.
Similarly, windows refer to a single line from a paragraph carrying over to a new column. It looks messy and can be hard to read when the end of a section is carried over to the next.
The main thing with typography is to play around a bit, do your research and choose fonts and styles which match the brief without being unreadable and ruining the end-user experience.
