Stop Spending Hours Tweaking Your Element Spacing, Create Professional Print Quality Layout With A Baseline Grid
Post Contents
The Problem With Browser Layout And Design
Professional Print Designers know using a grid system of horizontal lines for layout is an essential practice.
For some reason, this graphic design standard seems to be lost on most web design. Or, at least it’s rarely used in websites for content layout.
This is a great opportunity for you to stand out from the crowd by creating your content in a method that is proven to be more pleasurable to the human eye, even on a subliminal level.
This set up will instantly give your content a more professional and polished look.
Using a baseline grid we will optimize white space and use the vertical space between lines to create a content flow that is more naturally readable.
While using the baseline grid, all of our elements including titles, body text, captions, or any other visual elements will have their attributes set in a consistent number divisible by a specific number.
Establish Your Vertical Grid Number
You could use any number you want, but common choices would be things like 4, or 8.
For this example, we are going to go with 4.
So our font sizes, line heights, padding, and margins are all going to be derivatives of 4, like 12, 16, 20, 40, 44, 52, etc.
If our baseline grid was set to 10, we would need to make sure all of our fonts, spacing, line heights, etc were divisible by 10. Not 5, not 2, it would have to be 10. So 10, 20, 40, 70, etc.
Creating Global Styles
We are establishing a large bottom margin of 28 pixels and a small bottom margin of 16, both are derivatives of 4.
It would be a good idea to remember these and use them globally.
I’m currently setting these globally in the site settings > custom CSS.
Alternatively, you could use the selector feature in the Elementor CSS within each widget. That method is convenient but will cost you later trying to find all of your CSS. Keep it separate.
Creating Grid Systems
For our headlines, for instance, our H2, we are going to go with a pixel setting of 44, with a line-height a little larger, so we are going to go with 48, we could go with 52 or some other derivatives of 4. We will go ahead and add our large bottom margin of 28.
For the first section – Before or after-title line we’re going to set a font size of 12, line-height of 12, and a bottom margin of 16.
For the Summary text, we are going with a font size of 20, line-height of 28, and then the standard large margin-bottom that we established earlier which is 28.
For the body text section, we will set our paragraph styles. For this one, we are going with a font size of 16, and a line-height of 24. We will use the larget 28pixel margin-bottom.
For the footnote, we will go with a smaller font of 12, line-height of 16, and a bottom margin of our large 28px.
Adjusting images and buttons
For the image, we just need to set the bottom margin, which according to our rules, needs to be either 16 or 28 pixels. We will use 16.
For the button, we are going to do the same thing by removing all of the default paddings.
We will set the font size to 12, 16, or 20. In this case, we will go with 16.
Next, we will set the padding to be in steps of 4 so we will go with the right and left 20, top and bottom 12.
Setting column padding
One last step is to make sure our column padding and any possible margins are set to fit the grid as well.
In this case, we will set all the padding around our content to 36px.
Tools You Can Use
If you are using a layout program like InDesign, Crello, or my favorite Adobe XD you can make your grid visible for easier adjustments.
If you are creating your designs inside of Elementor, my first recommendation would be to create your designs in XD or a similar program first.
That being said, once you are in Elementor, the Elementor Master Oooh Boi, has a fantastic Elementor design plugin, Steroids For Elementor that display a grid in your browser window, along with many other awesome features.
Final Thoughts
These are my personal notes from watching a fantastic video by Oooh Boi. you can find the Elementor Video here!
Do you use Baseline Grid in your designs?
Do you have some suggestions to help others get started?
Let us know in the comments.
