4 pt grid type sizes full#

If you’re deciding on the spacing between two headings on a website and don’t use a grid to align to it, you’re presented with a huge number of options.

We already touched on consistency but let’s take a closer look at that too. Instead of randomly choosing a number for spacing elements apart, we’re presented with a limited number of options to choose from. Removing these micro decisions so that work can be done faster and with greater consistency. The advent of the design systems allows teams to do the exact opposite. If you’re working on a web design project where none of the colours, sizing or spacing has been defined, every time you need to use a colour or define the sizing or the spacing of an element you need to make decisions. Let’s take a look at the “removing decision making” first. The benefits of using a baseline grid in a digital design tool like Sketch are nicely summed up in our GitLab’s design system 2:Īdhering to a baseline grid allows us to be more efficient by removing decision making while maintaining a consistent rhythm between components and typography. But through the years I learned about different techniques of improving the quality of my work, and using grids was one of them. Optically aligning things as they felt right. I’m a self-taught designer and at the beginning of my career, I used to do things more “by my feeling”. Why should designers even bother? That’s a legitimate question. Why vertical rhythm?Īt this point, it might seem that setting up a baseline grid and then aligning elements to it is a lot of trouble and work. And Sketch, Figma and other digital design tools replicate that well. This way, type on the web falls straight in the middle of the lines in a baseline grid. Increasing line-height on the web increases spacing on the top and bottom of the text, unlike in print, where space is only added at the bottom. Just a quick note on line-height in CSS as it’s different from line-height (or leading) in print. And finally, in the second part, we’ll at examples of aligning type and UI components to the grid we created. Then we’ll jump straight into setting up the grid, what defines it and how we decide on the numbers that our grid will be based on. I also want to take a quick look at why using the baseline grid makes sense and what the benefits are. But now I want to take a look at how designers can use the baseline grid and establish a vertical rhythm in Sketch.

4 pt grid type sizes full#

Even I wrote a full chapter on this in my book which you can read as a blog post on this website. A lot has been written about the baseline grid and vertical rhythm on the web. Sketch was the first proper digital/web design tool and is still the most popular among designers these days (with Figma quickly catching up). InDesign allowed aligning type to a baseline grid but using InDesign for web design work is like using a hammer to drill a hole (but believe me, I’ve seen people use InDesign for web design projects). They were adopted for it, but not designed for it. But what about digital design tools? We were still using Photoshop and Illustrator back in 2007 and those weren’t really tools for digital/ UI design. We can now use Sass mixins to easily define the grid, the margins, and the padding consistently. But that was a while ago and we-mostly web development practices and tools-have come a long way since then. Revisiting the article now, it feels a bit clumsy to define the grid, the margins and the padding in fixed pixels sizes to make all the alignment work.

The first major article that talks about aligning type on the web to a baseline grid was the one by Wilson Miner for A List Apart back in 2007 1. Designing with a baseline grid in Sketch speeds up the visual design process, enables designers to produce consistent mockups and establishes a consistent vertical rhythm in the designs.