One of the most popular concepts in UI design is the 8pt grid. Sometimes referred to as baseline grid in regard to typography. It is a simple but powerful system for website design.
With the help of this system, it is easier to design websites. Also, it makes the design cohesive, professional, clean, and easy to understand for the human eye.
The baseline grid is the system that covers all the aspects of a website. Many times people address it to typography. But it is more than just that.
Table of Contents
8pt Grid In A Nutshell
In a nutshell, an 8-point grid is a system where you make sizes of different elements such as text, buttons, gaps, sections the way that they could be divided by 8.
You can use any units you want – points, pixels, rem. It doesn’t matter as long as it is 8 like 8pt, 8px, 8rem, etc. So, you can call it an 8px grid.
Also Read: How To Create Navbar
When a design is built with this system, it is cohesive and consistent. Everything looks and feels beautiful. Also, it is easier to design a website or an app.
And it doesn’t matter if you build an HTML website, or use WordPress and other platforms. It applies to UI design in general. You must always start designing websites in design apps.
But it is difficult to explain it in one or two paragraphs. So, let me divide it into sections and explain how it works and how you can create your own baseline grid.
Elements & Sections
First, let’s talk about different sections and elements that you can apply an 8pt grid to. In elements I mean buttons, inputs, navbar, and in sections are hero, images, blocks, etc.
The way you can apply an 8pt grid to any of the elements is that their size should be divided by 8. Let’s take a button for example.
When you create a button, think about this system and choose sizes accordingly. A button size could be 176x64px and text inside could be 32px.
Numbers 176, 64, and 32 can be divided by 8. 176 divided by 8 is 22, 64 divided by 8 is 8, and 32/8 equals 4.
So, this way your design is consistent and cohesive. When you follow this method and apply it to other elements too, your design will be beautiful, clean, and easy to understand.
Padding & Margin
The same goes for margins and paddings. When a margin or padding needs tweak, always try to follow an 8pt grid system.
Make your elements paddings and margins 8px, 16px, 24px, or any other number that can be divided by 8. It applies to images, buttons, texts, etc.
Let’s apply margins and padding to the button we created earlier. Its size is 176x64px and text is 32px. We can apply 16px on top & bottom, and 24px to sides.
This way we will have a button that is built purely with the grid system. It will look beautiful and fit in your design.
Remember, that paddings and margins are very important. It creates spaces between elements which is mandatory for a good web design.
Spaces Between Elements
Spacing is very important between different elements. In UI design it is called whitespace. Whitespace is very important. Elements mustn’t be too close to each other.
It adds space and air to your design. Let your website breathe. And 8pt grid plays its role. Whitespace should follow this system too. Space size between elements should also be dividable by 8.
If our button has another button on the right side or a text above, the space between them should be a number that can be divided by 8. It can be 16px.
This way whitespace gives your design a breathing space. It will look awesome and very good to read for a human eye.
And whitespace applies to all the elements on a webpage – buttons, text, heading, images, sections, forms, inputs, navigation, etc.
Typography
And one of the most important elements on your website is a typography – headings and paragraphs. An 8pt grid sometimes is referred to as a baseline grid when it concerns typography.
Baseline grid system affects three aspects of typography:
- Font Size
- Line Height
- Space Between Paragraphs
And all three must follow a baseline grid. In other words, its sizes must divide by 8.
So, font size can be 16px, 24px, 32px, or any other that is divided by 8. If you want one paragraph to be bigger than one could be 16px and the other 24px.
Also, when you adjust line-height or space between two paragraphs, follow the same rules. And headings are also very important. With it, you can create a hierarchy.
You may ask how to choose sizes for paragraphs and headings. If a paragraph is 16px, you can multiply it by 2 and you get 32px. If it is not big enough, add another 8px and so on until you are satisfied with the hierarchy.
So, when you start designing you should always think about the 8pt grid and build your design following its rules. But how you can apply this system to your design?
Well, it is easy to do, and I will demonstrate it now. I will use Figma for this example but it can be done in every app such as AdobeXD, Sketch, or others.
How To Use 8pt Grid
When you create a frame in Figma, on the right-side panel you will see the Layout Grid section. It works the same way in other apps but names can be different.
Add a new grid. Choose grid instead of columns or rows, and insert 8 in the size input. also, you can change the color of the grid. The first step is completed.
Now, your artboard is divided into small squares. This is a grid and all the squares are 8px in size.
Now, we can build a design with 8pt grid.
For this example, I will create a small section that has a heading, paragraph, and button as you see on hero sections.
First of all, I created a paragraph. I used Poppins font. Font weight is regular and size is 16px. Now here comes the tricky part.
This is what you do for line-height. Make sure the baseline of the first line of a paragraph is aligned to the grid. And now you just tweak the spacing or line-height. I picked 24px and it looks awesome.
The goal here is that all the lines of the paragraph must be aligned to the grid. So there must be an equal gap between lines.
Next, I will create a heading. I will just multiply 16px – which is the size of the paragraph – by 2 and my heading will become 32px which fits well in the whole design. I also made it bold for a cleaner hierarchy.
Don’t forget to align the heading’s baseline to grid and create whitespace between heading and paragraph.
Now let’s add a button below. I created 104x32px button, text inside is 16px and padding is 8px for top and bottom and 24px for each side.
Changed colors, made a background and that is it. I have designed a card with an 8pt grid system that looks professional and cohesive.
You can try it yourself with your desired design app. Try to build different sections with this system and become more familiar. The best section to practice with is the hero section.
You can build a simple hero section with navigation, heading, paragraph, and also you can insert an image.
After some practice, you will get used to it and see how easy and powerful this grid system is.
Conclusion
So, if you want to create beautiful websites, you should try the 8pt grid system. It makes it easier to create designs that work. Your design will be cohesive and consistent.
With this system, all the elements will look cool and work great together. Try to apply it to your design work and see how cool this method is.
