Helping you with digital solutions.

8 Point Grid System

If you’re a web designer, you are probably familiar with grid systems. They are used to align text, images and other content for responsive and pleasant user experience. 

The 8-point grid system, specifically, has some interesting attributes that make it stand out from other systems.

But why use a grid system in the first place?

Let’s discuss this first before diving a little deeper.

Why Use A Grid System?

Bootstrap has enabled web designers to improve countless webpages, though its main drawback is that there is no consistent unit of measurement. This leads to inconsistencies developing between different pages. The problem worsens when there are several developers working on that same project.

Designs that use Foundation or Bootstrap may be simple to get up and running, but if you look a little closer, you may find certain components degrade its overall design, particularly when used among other elements. Again, it comes down to consistency. 

If you make an edit to an element’s position here or there and pass it on to another developer, they may not share the same vision. The next time you lay eyes on it, the elements may have shifted based on the other developer’s interpretation.

However, a grid system ensures consistency each and every time. There’s no guesswork as to where a certain image, button or line of text should go.

The best grid system to use is the 8-point grid system. Use multiples of 8 to space out each element and size them appropriately to the page.

Why The 8-Point System?

The multitude of devices available today means there is a wide variety of screen sizes to think about, making web design more complicated. By using an even number for sizing and spacing, it is far easier to consistently scale elements across all devices.

For example, odd numbers are tough to render on 1.5x resolution devices as it results in a half-pixel offset.

But why 8 points specifically? Why not use 6 points or 10 points?

Most screen sizes are divisible by 8. This makes it easy to scale to the required size. On the other hand, 6-point systems could overload the design, while 10-point systems could be very limiting for a designer. 

At the end of the day though, it’s up to you what size works best for your audience. After all, the grid system is only good if it can be easily followed by the entire team.

Advantages Of 8-Point Grid System

There are three perspectives to take into account here: the developers, the overall design team, and the end-user.

In terms of developers, the 8-point grid system allows fewer decisions to be made while keeping elements consistent. For the teams, it ensures easy communication i.e. no one fussing over every pixel. With everyone using the 8-point system, there’s no need to keep measuring every element size and spacing.

Finally, for the end-user, it suggests the page belongs to a trustworthy, professional brand, no matter what device they use to view the page.