20 Design Rules

Just like with any profession or discipline, design comes with some rules.

While breaking design rules is allowed and even (in some circumstances) encouraged, it’s important to at least be aware of the rules you are breaking so you can break them the right way.

From typography to layout, right through to colour and special effects, this list runs through a few basic rules, tips, tricks and guides to some common errors and how to banish them from your design.

01. Don’t Forget To Kern

Somebody once said that if you truly hate someone, teach them how to recognise bad kerning. A shoddy kerning job is one of the cardinal sins in the world of design, so it’s an important skill to nail down early on.

Kerning is the adjustment of space between characters. It doesn’t sound like much, but a good kerning job can make a world of difference. The ultimate goal of kerning is to ensure that the space between each letter is visually even to make for a neat and orderly piece of text.

While we’ll run over a few typographical mistakes in this list, be sure to also check out these 20 other typographic mistakes that you should avoid at all costs.

02. Don’t Disregard Readability/Legibility For Aesthetic Reasons

I’m sure I’ve said this a million times, but the primary purpose of design is communication, so it makes sense that the readability and legibility of your type is a top priority.

So, what hinders readability and legibility? Well, a number of things can affect how much effort your reader has to put in. A common example is too low of a contrast between the text and background, keep contrast high to prevent this issue.

Another common mistake is the overuse of capital letters. Not only do capital letters make the reader feel like they are being YELLED AT, they also hinder the eye’s ability to distinguish letterforms. This is because when executed in caps, each letter has the same x-height and block-like shape, whereas in lowercase, the letterforms are more uniquely shaped, allowing for the eye to more easily identify each letter and word.

One other mistake is type size, the usual offender being type that is too small. Consider your audience, would they have a difficult time reading this type? If you’re unsure do test prints and ask for others’ opinions, while your eyes may read it perfectly fine, others may not.

The takeaway is predominantly this: just because it looks good, doesn’t always mean it communicates well. Treat your type with care!

03. Keep Your Line Lengths Short

Have you ever struggled to get through an otherwise interesting magazine article? Or perhaps lost your place each time you tried to go to a new line? This may be the fault of badly structured line lengths.

The golden number for body copy line lengths is a minimum of six words per line and an average of about 30-40 characters (including spaces) on each line. Any less and your sentences will be too choppy, any more and you risk your sentences becoming tedious and difficult for the eye to get through.

04. Have Purposeful Hierarchy

Just like within a lot of natural orders, a strong and purposeful hierarchy is a pretty powerful tool. Within the realm of design, hierarchy concerns the arrangement of visual elements in order to signify importance. So, the more important elements are made to hold the most attention through scale, colour, type etc. and the least important elements are made to hold less attention.

An element that hierarchy is most evidently used in is typography, so let’s look at an example of hierarchy using some type. In the included example, have a look at the way the first invitation is laid out, all the type is given the same size and weight, making all the information hard to gather in a quick skim. The example to the right, however, has had a little bit of hierarchy introduced to the type. Even with just the smallest adjustments to the colour, weight and size of certain elements, the information becomes way easier to digest and make sense of.

05. Practise Appropriate Word Spacing

As a designer, dealing with a body of type is almost an inevitability, and it’s not always easy. There are lots of rules and elements to take into consideration, and here’s a pretty important one: word and letter spacing. There are two main points of spacing we’ll run over: tracking and leading.

Leading is the adjustment of space between vertical lines of type. There are a lot of things that determine what leading you should use – from your choice of typeface, how much text you have to work with etc. But, a good rule of thumb is this: longer line lengths often require a bit more leading than shorter line lengths.

While kerning is often done manually, when you have a large body of text and a tight deadline, there often isn’t time to manually adjust each space, which is where tracking comes in handy. The tracking tool adjusts the space between characters and words in a more general way than kerning. Tracking is a great way of getting rid of rivers or awkward line lengths in type. In body text, like with leading, a good rule to stick by is to keep longer line lengths tracked ‘loosely’ and shorter line lengths tracked a bit ‘tighter’ for maximum readability.

Another handy rule of thumb for word spacing is, for smaller bodies that are more reasonable to manually alter, a common practise is to imagine a lowercase ‘i’ in between each word and adjust your space accordingly, but of course this all depends on the typeface and the situation etc.

06. Use The Correct Alignment

You have almost definitely encountered the basic alignment tools before, whether you have been in the game for years or are yet to step anywhere near the game. There are four different kinds of alignment: left aligned, right aligned, centered and justified. Let’s quickly run through when and where we can use these.

Left aligned type is the most common form (note how even this text is aligned to the left) and for a good reason. It’s the most easily legible and gives a nice, neat left edge to the text. When in doubt, left align.

Right aligned type does what it says on the tin, it aligns the type to the right. This is mostly used for decorative purposes within branding or small pieces of type in certain publications. Right alignment isn’t recommended for large chunks of text, though as it can get hard for the eye to follow, the ragged left edge makes it slightly more difficult to find a new line.

Centered text definitely has a wide variety of uses. Posters, invitations, branding etc. Centered text makes it easy to balance out a bit of type and make for an aesthetically pleasing type arrangement. However, again, it’s not recommended for larger bodies of type as the lack of a neatly aligned edge makes it tricky for the eye to move from one line to the next.

And finally we have justified type. Justified type can be deceptive, it seems like the perfect alignment module – a neat left and right edge, what more could you ask for? In some cases justified type is fantastic, novels are a common example. Justified text has its issues though, mainly in terms of spacing. As you can see in the graphic, towards the end of paragraphs where there are fewer words on each line, the justify tool will often spread the type awkwardly from left to right, leaving awkward word and letter spacings.

07. Always Use A Grid

Developing some basic grid skills is probably one of the first steps any fledgling designer should undertake. A well-implemented grid is a bit like a fairy godmother, it can transform your design from something average to something clean, clear and effective.

Grids come in many shapes and sizes and you can build them to be flexible, adaptable and to suit your design. Grids help designers align elements on the page in relation to each other which often produces a neater, more logical design. Check out the sample grids in the included graphic, a two, three and four column grid can be used to help arrange type and imagery in various ways.

The fewer columns your grid has, the more uniform your design will be. Your elements may have a strong sense of alignment, but you won’t have as much flexibility as you would with a grid with a few more columns. Again, in the graphic, check out the 4 column grid to the right, some elements stretch over a few columns and others remain within the set columns, allowing for a few different size text boxes and images without abandoning the alignment. Play around with a few different grids and find what works for you and your design.

08. Always Design For Your Audience

Most designs start out with a brief, even if it is a personal project, a designer will often (consciously or subconsciously) brief themselves with the basic information. One of the more important elements of a brief is the question “who am I designing for?” Every design has an intended audience, the people that will be viewing the design and receiving the communication, so it makes sense to keep them in mind.

Take a look at the examples of design for specific audiences. The example on the left doesn’t quite fit the mark for this brief and audience. The target market for a children’s concert poster is children and their parents, so a sophisticated, black and white design probably won’t attract the right attention or send the right message. The example on the right, though, suits the content and audience much better. A bright and colourful design with recognisable graphics is more eye-catching and keeping in tone with the demographic and event.

Remember that while your design may look good, it might not be the best possible communication for your audience. When in doubt, always refer back to the brief.

09. Avoid Widows And Orphans

An easy way to take your design from amateurish to polished and professional is to recognise and eliminate typographical widows and orphans. The odd few widows and orphans are bound to pop up in any type-based design you undertake, it’s almost inevitable, but recognising them and dealing with them is the important step.

For those of you who aren’t familiar with the concept of widows and orphans, let me quote Drew de Soto’s explanation from ‘Know Your Onions: Graphic Design’, “A widow is a term for a line of text that belongs to a paragraph and has moved over to the next column. An orphan is similar, but a single word on its own on a line, poor little thing.”

There are a few ways you can deal with widows and orphans. First of all, if you have been given the okay, you can manually edit the text to adjust the line length to remove the problem altogether. Another tip, as is demonstrated in the graphic, is to place a soft return (press shift + return) on the word in front of your orphan, to bring it down a line. Another technique as demonstrated in the graphic is to adjust your textbox or column sizes to allow for type to move around enough to get rid of the orphans and widows.

10. Have A Logical Colour Palette

Colour is a powerful tool for designers, so it makes sense that a carefully arranged and consistent palette would be an important step in all design endeavours.

When compiling a colour palette, it might be worth looking into colour theory and past uses of colour. Colour theory dictates that certain hues can certain effects on consumers, i.e. orange is thought to stimulate an appetite, which is why orange is a commonly used in fast food designs.

While switching things up sometimes can pay off, be sure to make educated moves when experimenting with colour. For a very simple example, have a look at the two generic logo types in this graphic, one for a florist that specialises in romantic bouquets, and one for a paintballing centre that promises a messy and exciting time. On the left, each logotype has been given a colour scheme that quite obviously doesn’t work, and on the right, a more appropriate one.

There are certain codes and conventions when it comes to colour, and while experimenting and thwarting expectations can make for a punchy design, be sure that your use of colour isn’t too distracting or confuses your message.

11. Have A Consistent Font Palette

Just as you have a palette of colours, so should you have a carefully selected palette of fonts. Also like colours, certain fonts have certain ‘moods’ or ‘emotions’ associated with them – you probably wouldn’t use Curlz MT for a law firm branding.

A lot of designers recommend that 2-3 fonts should be a maximum in most cases to avoid overcomplicating the design. Try to choose fonts that complement each other and your communication to make for a logical and effective design. For a handy guide to pairing fonts, be sure to check out these 10 golden rules.

12. Never Use Display Fonts For Body Copy

Using a display font for body copy is a bit like wearing a ballgown to the supermarket – it’s not the right time or place, it can be confusing for others and it just isn’t a very smart move.

Display fonts are fonts that are better suited to smaller areas of text, rather than body copy. They are usually a bit flashier than typefaces designed for body copy purposes, and thanks to this flashiness, they often better suit a short title, sometimes a subheading, but never a bulk piece of text.

Check out the example graphic that uses the decorative display font ‘Yellowtail’ for body copy. Since the typeface was designed with aesthetic value in mind, rather than legibility or readability, it gets tiring and tricky to read after a while. It is far better to balance it out with a typeface that is designed for body copy purposes, like ‘Georgia’. There’s a time and a place for display type, and body copy is not that place.

13. Never Stretch Type

This is a very simple rule, it’s easy to understand, easy to remember and easy to execute: do not stretch your type. In any case. Fonts are (most of the time) built with careful care and attention to the shapes and proportions of each letterform, so to distort this by stretching it can just take away from the effectiveness of the font.

A lot of the reason people often stretch their type is they need it to be slightly taller or wider than it currently is. There is a solution to this that doesn’t involve distorting your type. There is an endless supply of just about any kind of font you could ever want, there are tall fonts (I recommend Bebas Neue), wide fonts (have a look at Silverfake) and everything in between, all at your disposal. Some may cost you, but finding that perfect typeface can just be priceless.

14. Avoid Colour Discord

More commonly referred to as ‘colour clashing’, colour discord commonly occurs when two colours that are widely separated on the colour wheel are paired together. Discordant colours create a muddy or ‘vibrating’ effect that makes it a struggle for the eye to find the line between each colour.

A pretty simple way to avoid colour discord is to use hues that have a fairly high degree of contrast, check out the graphic for an example of contrasting colours. The eye can easily pick up on the line between each colour, and there is little to no ‘vibration’ or muddiness as there is in the discordant colours to the left.

Some designers, particularly advertisers, lean into the effects of colour discord, as they feel it creates an eye-catching design. So, while avoiding colour discord for your more aesthetically-pleasing designs is generally recommended, this is not to say that it is entirely impossible to bend the rules of colour discordition in your favour.

15. Don’t Think Of White Space As Empty Space

White space is one of those diverse and effective tools that can add something special to your design. Well used white space can have many beneficial effects for your design. It can help put more focus on a specific aspect of your composition, it can let your design ‘breathe’, it can help balance out your elements or it can add some sophistication to your design.

Another thing that white space can do is add meaning to your design without adding in another physical element. Have a look at this sample graphic, a fake poster for some noise cancelling headphones. The ad on the left uses little white space, it fills up all the space with graphics and type. The second ad, however, uses white space strategically. By making the headphones the focus amongst a sea of white space, the “100% noise cancellation” is made more visual and the product is put in focus without compromising any of the information.

In this case and many others, it’s important to recognise that the white space is not empty space, it does not need to be filled with a graphic or a texture or some type, it’s doing its job just like every other element. Don’t disregard the idea of white space, experiment with incorporating it into your design and see if it can work for you.

16. Don’t Follow Design Trends

Sometimes design can be a bit like fashion, experimental trends come by, are insanely popular for a while, then slowly fade out. Once those trends have passed, all the outfits and items of clothing you curated around that trend suddenly become dated and no longer effective.

Design works in a similar way, new styles or methods become popular for a while and everybody jumps on the bandwagon because its new and exciting and easy to replicate. But as quickly as trends come, trends also leave, so that logo you designed that was meant to last for years, suddenly becomes dated.

This is not to say that you should turn a blind eye to trends, though. Keep an eye on what’s popular when and try to figure out why it’s popular. A pretty prolific trend only recently was the X-shaped logos. You might know what I’m talking about: those crest-like logos that placed illustrative symbols or letters around an X. These were pretty popular for a while because they were simple and (when done right) looked good. But, because they became more widely used, the trend ended up passing just as quickly as it came.

Something to take away from trends is an act of analysis – whywas it popular, what could I take from these logos to enhance my designs? In the case of the X-shaped logos, maybe you could take away the idea of geometric lines to shape your type, as can be seen in the graphic. By all means, learn from trends and try to set them, but don’t jump blindly aboard just any bandwagon.

17. Use The Right Tools

Just like a handyman wouldn’t use a hammer to screw in a screw, a designer should know what tools are correct to use in certain situations, and more importantly, what tools are not.

A very common mistake that could be easily avoided with a proper tool selection is rasterized logos. For those of you who aren’t entirely familiar, let me break it down quickly. There are two types of digital graphic files, rasters and vectors. A raster graphic is made up of a grid of many pixels, whereas a vector graphic is instead made up on many lines or “paths”. One of the biggest difference between a vector and raster is the ability to scale the graphic. Since a raster is made up of a certain amount of pixels, at a certain point of scaling, the image will become pixelated (as you can see to the left of the graphic), but a vector (to the right) does not have this problem.

Since a vector can be scaled to just about any size without losing the sharp edge of its shapes, it’s generally the more favourable option for logos, which often have a large range of sized applications, from the side of a pencil to the side of a building. So, to create a logo using a raster graphic limits your brand’s applications, making raster logos a very common but easily avoided mistake.

Going back to the main point, a good designer should not only know the difference between these formats, but also what tools to use when. Raster graphics are commonly created in tools such as Adobe Photoshop and vectors are often born in Adobe Illustrator, so be sure to familiarise yourself with the software, what it can do and what it can create before you launch into a design.

18. Consider Your Medium

Where is your design going? On a poster, a website, bound within a magazine? Knowing the exact specs of your design’s application is such a crucial aspect of your design because it is how your design will most commonly be viewed. If you don’t account for all the details of the medium you are designing for, you risk your design being compromised in some way.

A common mistake is not counting for gutters when designing for publications. A gutter is the space between two facing pages that is left both for readability reasons and also to accommodate for the binding process. In instances where a certain size of gutter is needed for binding, a designer must account for this during their process, and often this means ensuring they don’t place any graphics or type over the gutter. If they do, during the binding process, the design that is spread across the two pages and gutter will run into the seam, distorting the image or type. Check out the graphic for an example of the effects of running type across a gutter that is later used for binding. Try to instead work around the gutter, like the example to the right does to avoid the dreaded pull.

So how do we avoid this? Good old fashioned communication. If you’re unsure, speak to your printer, client or briefer and figure out how much gutter space you need to work around and move from there.

19. Learn The Rules Of Grammar

Grammar can be a tricky thing, there are a lot of hidden rules that you don’t always know you’re breaking until they’re pointed out. Taking the time to learn some of the design-oriented rules of grammar can keep your designs professional and make you feel delightfully smug when you start to notice others’ errors out in the wild. Let’s run through a quick few now.

First of all, ampersands. Ampersands do not belong in body copy, avoid substituting an ‘and’ for a ‘&’. Instead, ampersands are most commonly used for organisation titles (e.g. “Johnson & Johnson”) or stylistically within logo/identity design.

Another common error that is easily fixed is double spaces after punctuation. The simple solution? Don’t. One space is more than enough. If you find that your type still looks a little too squashed, perhaps try adjust your tracking or just switch to a new font.

One more point is hyphens and dashes, something you’re bound to come accross eventually, even within this article there have been a small handful. Basically there are three types of hyphens/lines: the hyphen (-), the en dash (–) and the em dash (—). The hyphen is used to join two words (e.g. “custom-built”); an en dash is used to connect numerical values (e.g. “1984–1998”); and an em dash is the length of an ‘M’ and is occasionally used within sentences to stand in for a comma (e.g. “Grammar is hard — or so I once thought”)

There are plenty of rules to grammar, and while it can seem like a relatively unimportant thing to know, a lot of designers would argue otherwise. It is a subtle but powerful tool that can take your designs to a whole new level of professionality and attention to detail.

20. Don’t Use Too Many Effects

Remember the joy of Word Art? The fun it was to add rainbow gradients, drop shadows, bevelling and a myriad of other effects to your type? Well, the days of Word Art are (somewhat sadly) over, so it’s probably time for you to hang up the special effects.

When it comes to communicative designs, a lot of the time, simple is best, and this can mean repetitively asking yourself “I know I can add this to my design, but should I?” Effects like drop shadows, bevelling, textures and gradients all have their time and place, just not always together.

A common situation where a lot of effects are often used is charts and graphs. Have a look at this graphic that shows a bar graph with a lot loaded into it, a lot of effects, a lot of elements, it’s a lot to take in. The graph to the right, however, shows how taking effects and some elements away from the design declutters the information and makes for a much easier read and aesthetically pleasing design.

While there are some instances where there are certain labels, values or elements that you can’t take out, taking out as much as you can without compromising the communication can refocus your information. Sometimes, less really is more.

To cap this list off, let me just say that in the end, there is only one final rule: there are no rules. As important as it is to learn the fundamentals of design, it is even more important to challenge them every once in a while.

A prime example is legendary designer David Carson who designed for the experimental magazine Ray Gun. In 1994 Carson set an entire interview with musician Bryan Ferry out in Zapf Dingbats, (a symbol-based typeface) rendering it totally illegible, just because he thought the interview was boring. Breaking the rules is sometimes the best way of making a lasting statement and a legendary design.

Set out to learn all the rules so you can break them the right way.