7 Typography Tips and Design Rules for Beginners
Typography and design are everywhere and is undetachable from our daily lives. From the milk carton on the dining table to the leaflet you were pushed to on your way to work, or even the newsletter you received from an online signed-up in your email, they persistently appear. How often have you found them nice to keep or decided to discard them into the trash immediately? If you are the one who needs to create one of these, we listed a handful of tips that typography can make your amateur work better, if not more beautiful.
Other designers, amateur or professional, please feel free to comment or add on! The list definitely does not stop here! So here you go, nitty-gritty details being a designer will find their hands itch if not done right.
Create a visual with clear hierarchy to make text speak. Ask yourself, what is the main focus, which are the words needed to stand out from the paragraphs. How can I make it easier for the reader to hear me loud.
Just by resizing text in a paragraph, you make it easier and faster for your reader to read.
There are many ways to build hierarchy: contrast, colour, size, weight, layout. We’ll be discussing all of this, so keep scrolling.
Example of a text with no hierarchy.
Create hierarchy in your text.
2. Which Fonts to pair
Pairing fonts is an art. I always think the contrast is the magic that marries two typefaces together. I have customers who will think their favourite font “Brush Script” will probably look great on their logos! They also think an italic font may pair up when implemented on their taglines. The truth is when the fonts are too similar in style ( in this case italic or cursive), it requires some time to “adapt” looking at them. It is very much like wearing a pair of magenta pink boots with a rose red skirt and a pale orange top. They are from the same warm family but yet “clashed” lining up together.
Customers may often feel that the Helvetica or Futura, Gill Sans or Times New Roman are too boring and not “creative” enough. Without knowing that these fonts have lasted for the few decades or centuries. If not, Apple will not have used Garamond and then to Myriad and later Helvetica and few other classic fonts. While Sony commissioned Akira Kobayashi, Type Director from Monotype to merge Frutiger and Helvetica into SST. The typeface is now Sony’s corporate typeface, and has already been introduced to the website and product packaging and will be employed on a variety of Sony products.
Quick Tip: We love the contrast and dislike ambiguity.
- Stay away from pairing two Serif typefaces. It’s better to pair Serif and Sans Serif (the one with the ‘tails’, and the one without).
- Try not to mix fonts of similar weight. It’s much better to pair super heavy and hairline, than bold and semi-bold.
Another fun way is to play with the space between characters. Or you can try pairing the radically different styles, for example, Sans Serif and Hand-written Script.
Quick tip: Use more than two fonts only if you need to differentiate
Don’t Pair Fonts that are too similar.
Pair Bold and Light fonts from the same family for good contrast.
Sans Serif and Display Serif fonts look great too as a pair.
3. White Space
Design elements need some air to breathe. But I know we are all squeezing for space on an A4 paper. There is always that much of information we want others to read and by trying to make them visible, we make the text real big. And what’s more, we think the reader will be bored, so we added pictures ( a lot of them) by filling up every single space we have on a leaflet or presentation. Remember the clue: Less is More. Human eyes are attracted to brighter spots, meaning the white space on paper is more attention seeking than the grey chunks of text and heavy blocks of images.
Cramping up design elements together is usually one of the most common typography mistakes, so take note of it.
Busy & Cluttered designs are hard to read.
White space is essential for a good layout
Align your text in an orderly way for easy reading, keep consistency with the alignment, eg two blocks of text can align at the top or bottom if they are placed side by side. Draw an imaginary grid as a guideline for alignment of text and graphics. If they are along the same axis, try to align them, if not, position them with distinctive distance instead of few mm of spacing. Avoid protruding the outer walls of the grid. Most of the time, align elements to the left, centre or right side.
Quick tip: Fix a margin all round artboards, have the top margin set perhaps 1.5 times more.
All text should not exceed this invisible grid. Images are allowed to stick out of the grid and all the way out to the edge of a page.
When there are two or more elements, use the same alignment grid.
The purpose of typography is to make the copy readable, not just beautiful. But what determines readability?
For functional readability :
- Avoid fancy font type for body text
- Avoid really tiny font that even a good eyesight can hardly see
- Have enough contrast especially against the background colour.
- Appropriate tracking (space between characters)
- Comfortable leading (space between baselines)
- Use a comfortable size like 9 to 12 but not too big or smaller. Yes, there are always cases that the spaces available are not enough for all the information.
- Busy-free background
- White breathing space around
Avoid having text against a busy background, if you really have to, add a shadow, or a coloured and transparent black/white box to make the words stand out. Bold the text if need to.
Try every way possible to make wordings readable.
Many font families like Berthold Akzidenz Grotesk allows you to choose from different weights, from hairline to Bold.
In creative typography, implementing colour contrast is important. We can split it into three contrasts: by value, saturation and hue.
As any typography guru will tell you, consistency is gold. Be humble, stick with no more than a couple of fonts per layout as the typefaces may 'clash' in styles. Limit effects like shadows, bevels, outlines and gradients, etc. Too many effects look messy an incoherent.
If you know someone who has bad typography sense, let him read this!