11 techniques for breaking the typographic grid

Rebecca Creger

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.

The author

Rebecca Creger
Rebecca Creger

Rebecca was born and raised in the Bay Area, where she currently lives. She has a BFA in Design with a Visual Communications emphasis from UC Davis. Her passions include travel, design, pasta, and hanging out with her Beagle, Spud.

Related articles

How to create more fun and playful typography

How to create more fun and playful typography

Good typography may be hard work, but designers shouldn’t forget to have some fun with it! While crafting fonts and typographic characters can sometimes feel stiff and overly mathematical, we want you to help you find the joy in creating more expressive and playful typography. Of course, this approach is great for children-oriented design projects—but let’s not limit ourselves. After…

6 tips for better typographic hierarchy in web design

6 tips for better typographic hierarchy in web design

Have you ever looked at a design and thought, “Something doesn’t feel right”? If you can’t put your finger on what it is, the odds are good it’s an issue with your visual or typographic hierarchy.  When you cram content onto a page with a muddied mass of line breaks, bolded letters and italics—you’re sure…

Digital Fonts: A condensed history

Digital Fonts: A condensed history

More than ever before, designers today are tasked with designing with digital tools, for digital environments like web pages. The digital-to-print connection, once paramount, is now only one task among many. This change affects all aspects of design, but perhaps none more than typography, where the readability of digital fonts depends so much on the…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%