Your online audience connects to you through your content, whether it’s a journal publication, a blog post or a tweet. Because it is such an important touchpoint, we tend to focus exclusively on our words and message – but poor formatting of your content will cause your audience to ignore all your carefully chosen words.
The internet is a busy place. If content is not optimally organized on a page, a user’s eye may skip an important section header or be confused where to start reading at all. On some platforms, like social media, the content formatting is done for us. But when we are writing and designing for our own platforms and website, we have to consider several design aspects.
Start becoming a formatting master by looking for margins, alleys and grids.
Take a look at these two pieces of content – which do you prefer?
Clearly the one on the right. The content is the same…but one is overwhelming, while the other is inviting.
The areas of “nothing” surrounding the content are called margins, and they cannot be compromised when trying to fit more content on a page. The spacing improves the legibility of the text. When you remove margins, your eyes have nowhere to rest after each line and the text feels heavier and more laborious to read.
History lesson: traditionally in books and printed media, these margins had the additional benefit of giving readers a place to hold a page.
We typography nerds use the term “alleys” and “gutters” when referring to vertical white space between text. The distinction between the two is significant in print design, but not as much for digital.
Wider alleys between columns reduces the amount of visual tension in your content. This comes at a price of reducing the amount of space that you can dedicate toward text, so you need to find a balance between white space and effective communication. Also, make sure that if you have multiple alleys that they are all the same width. Sounds like a “duh?!” moment, but it can happen without you noticing.
Now we can recognize and name the space along the outside edges of a page and in between columns of text. But unfortunately, it is not as simple as just choosing a size for your margins and alleys – you need to step back and organize your content within a grid.
A grid lines up your content in multiples of a specific distance. It is important to create a balanced consistency of visual tension for a page – you won’t have elements that are starved for space while others bask in excessive white space. In the example below, you will again prefer the option on the right for content organization versus the cluttered, disorganized option on the left.
But, as Always, Rules Are Meant to Be Broken
The guidelines we set above are not rules to strictly adhere to. Thoughtfully breaking free of them can produce some striking visuals. Doing so requires some more advanced knowledge of layouts, modules and an understanding of the medium the piece will be published on.
For example, Pandora decided to go with a less traditional web layout that incorporates a lot of different elements. When viewed as a whole, you might think it seems cluttered. But this is where understanding the medium plays a bigger role in your typography layout.
If you were to view this webpage in your browser, you would not be seeing the whole page as is shown above. Rather, you would only see a section of the page like the one below. The layout becomes instantly cleaner and the only break from the clean layout is the red solutions list to let you know that there is more content to come.
There are numerous things to consider in the layout of your content, but here are the basics:
- Your margins frame your content and can help improve legibility.
- Alleys and gutters are the shiatsu massages of your content and help reduce visual tension. But as with all things, they need to be moderated. Too many or too wide alleys will cause skinny columns that hold little content and decrease legibility.
- And finally, grids are what hold everything together and organize content neatly. Use the grid to line up different elements and unify the overall tone of the layout.
Contact us if you have any questions or want to learn more!