Probably the most well-known rule of typography is to use a grid when designing. But that’s not your only option – playing with and challenging the typographic grid can lead to great designs too , as long as it’s done right!

There’s a long history of playing with the grid, and the ability to do so successfully is a mark of skilled designer. Take a look as we take you through some famous examples and give you tips to help you start playing with your own grids:

PostModern

Left: Swiss Style poster by Josef Müller-Brockmann. Right: Post-Modernist Poster by Wolfgang Weingart

The modern typographic grid as we know it was established by the Swiss Style (also known as the International Typographic Style) of graphic design in the early 20th century.

By the 1970’s, the Post-Modern typographic style had emerged as a reaction against the Swiss Style and its rigid grid. In Post-Modernist designs, the grid was used more flexibly to create more complex and decorative designs. The Post Modernist designers never fully rejected the grid, but they certainly pushed its limits.

Continuation

Sex Pistols Album cover by Jamie Reid, Magazine, ‘Emigre’ Spread, ‘Ray Gun’ Magazine cover

Other graphic designers continued to push the boundaries of the grid with styles like Punk, New Wave and Digital Expressionism. Some designers, like David Carson (far right), seemed to reject the grid completely. Even in these post-modern designs you can see that the designers still used the grid as a starting off point, deviating from it to achieve a more dynamic effect in their designs.

Today the grid is still important, but there are still a lot cool ways to play with it, especially in web design:

webdesign

Clockwise: The Amanda Project website, Ed Fella’s website, Kutztown Communications department website, MTV‘s website

All of these websites are playing with the grid. Some are more subtle about it than others, but they all deviate from a strict grid to achieve a specific look without sacrificing usability.

It takes an experienced designer to play with the grid and make it work, so before you start breaking your grids you need to learn how to use them well. That’s what famous designers do best: they learn the rules by heart, and then they break them and do it beautifully.

Here’s our guide to learning your grids. So take a look at it and then follow-up with our techniques to start mixing those grids up :

1. Stair-Stepping

cannes-2013-landscape-poster-n1445-1

Stair-stepping type was prolific in post-modernist design and is still used to great effect in this year’s poster for the Cannes Film Festival.

2. Tilt your text

1610_full

The tilted text in this Nike ad looks un-apologetic and sassy – just like the woman it describes.

3. Wrapping text

wrap

Text wrapping can really liven up your grid!

4. Illustrating Areas

Illustrated

This side-scrolling website has some really eye-catching illustrations that make web development seem more fun and approachable. Using illustrations in web and print design can balance out and overlap rigid grid layouts, giving compositions a playful look.

5. Overlapping Objects

Screen Shot 2013-09-25 at 2.42.53 PM

In Frank Chimero’s dynamic portfolio website, he overlaps images of his work instead of displaying them in the more traditional grid portfolio style.

6. Use the edge of the page

Brochure-Design-005

Don’t be a slave to your margins – let your text run off the edge of the page like in this bold college brochure.

7. Enclosed shapes

bloodland

The sharp rectangles enclosing the text look like shards of glass, hinting at violence and excitement in the plot of this mystery novel.

8. Embrace asymmetry

bottom

The asymmetry of the typography gives this label a rustic look – which works in the marketing of its organic products.

9. Collage

invitation

These sweet wedding invitations look even more personal and handmade with text and design elements applied like a collage.

10. Pull-Quotes

pull-quote-1

Pull-quotes break up the structure of a column of text, making it easier to read a large chunk of information.

11. Integrate handwritten type

chipotle

Adding handwritten type adds interest to the grid and can make a big corporation like Chipotle seem less mainstream.

These are just a few of the many ways to add interest to your grid compositions. The list doesn’t end here!

Have you ever broken your own typographic grid? Show us how you did it in the comments below.