12 Typography Tips You Need to Know

Typography is a key feature of graphic and web design, so it’s important you know all the tips for typography to create great design. Typography also plays a role in communication for design, so it’s essential to have your typography in check to create effortless reading. Poor typography turns visitors off from looking at your website. So here are 12 typography tips you need to know.

Keep the Number of Font to a Minimum.

You don’t want to use more than 3 fonts on a website, the reason being it makes the site look unstructured and unprofessional. So, keep in mind too many type sizes and styles at once can also wreck any layout, so in general limit the number of font families to a minimum, two is plenty but ideally one is often sufficient, and stick to them throughout the entire website. If you do decide to use more than one font type then make sure the font families complement each other.

Logical Hierarchy.

It is one of the most important functions of type. Distinguishing font sizes and selections helps show a logical content order within the website design. It helps readers to identify the priority order to read the content and understand it, you can’t communicate effectively without a logical font hierarchy.

Adjust Line Spacing.

This is often neglected, not adjusting your line spacing correctly will not help your readers moving from one line to the next. These unpleasant gaps can be avoided, by either some clever maths to make sure your values are directly proportional to your font size, or you can simply do it by feel. You also need to consider different sized screens, for a desktop you may think you need to make the headings several times bigger for user clarity, but on a mobile, that will push text down, breaking the flow of body text leading to excessive scrolling.

Compare and Contrast.

Colour balance, black and white and shades of grey all affect how your fonts will read. You want your font to be readable but also you want the website to be visually pleasing. Laying type over photography, graphics, patterns or illustrations is an exercise that must be taken seriously to establish and maintain the text readability.

Limit Line Length.

The right amount of characters on each line is key to the readability of your text. It shouldn’t be your design that dictates the width of your text, it should be down to legibility. You should have around 60 characters per line if you want your users to have a good reader experience, for mobile devices around 30 – 40 characters per line. In web design, you can achieve an optimal number of characters per line by restricting the width of your text blocks.

Consider the Reader.

You need to think about how the user interacts with the display. Off the desktop there’s less space to play with, so your typography should scale with regard to reading. You should think about how people will consume the content and adjust the typography accordingly, because at the end of the day, your visitors are what matter the most. People tend to hold their mobile devices closer to their faces, so considering scaling down the typography from desktop to mobile may be a good idea. As a large font on a desktop mobile can be hard to read and annoying for visitors has they must scroll further to get all the information.

Choose a Typeface That Works Well in Various Sizes.

Users will access your website using different sized devices that have different screen sizes and resolutions. So, be sure to choose a typeface that works well in multiple sizes and weights to main the readability and usability across all the different devices. Most importantly, your typeface must be legible on the smaller screens, so avoid fonts that use cursive script, because although they are beautiful they are difficult to read when they are small.

Use Fonts with Distinguishable Letters.

To many typefaces make it too easy to confuse similar letter forms, specifically “I”’s and “L”’s and poor letter spacing like “r” and “n” can look like an “m”. So, when choosing your type, make sure you check the types out in different contexts beforehand to ensure it won’t cause an issue for your users.

Avoid Colouring Text in Just Red or Green.

Colour blindness is a common condition, so it is recommended you use other cues as well as colour to indicate important information. So, using an asterisk to mark important information in conjunction with colours will help to indicate to someone that may be colour blind where the important information required is. You should also consider avoiding the use of red and green colours on their own to point out important information because red and green colour blindness is the most common form of colour blindness.

Don’t Minimise Spacing Between Lines.

There is a special term for the spacing between two lines of text, which is leading or line height. By increasing the line height, you increase the vertical white space between the lines of text. This will generally improve the readability of the text, however there is a fine line between the text being too close together and too far apart, you want it to be just right to get the best readability experience for visitors. As a rule, line height should be about 30% more than the character height for good readability, so always keep this in mind.

Avoid Using Blinking Text.

Firstly, content that flashes or flickers can trigger seizures in susceptible people, so you want to avoid using blinking text at all times. But it also acts as a distraction and an annoyance to other users in general, their focus will go straight to the blinking text rather than the information they need, which will start to annoy them.

Avoid All Caps.

All caps text is okay when it doesn’t involve reading a lot such as; acronyms or logos. But when you use all caps throughout your message it makes the message and information harder to read for users. All caps text will put users off reading the information because they find it difficult to read, meaning they will take longer to the read the text and therefore you have a higher chance of users getting annoyed or bored and not wanting to read on.