— BY REMON — IN Design tips

Baseline grids in digital UI design

What is a baseline grid?

Originating in the world of printing, the baseline grid and is often to create the layout of newspapers, magazines, and books. It is used to create a vertical rhythm in between pieces of text. Using this method ensures all text aligns in the same way on all pages. This concerns the spaces between main titles, subtitles, captions, buttons and body text. The grids make texts more pleasant to read. Most of us use vertical grids in columns to align design elements, but we rarely use something to horizontally align our text. A baseline grid is an incredibly powerful tool to use to create hierarchy in your text and layouts.

grid-systems-book
An interesting book I read and can highly recommend deepening your understanding of grids is
the book Grid Systems in Graphic Design by Josef Müller-Brockmann.

Why use a baseline grid?

A baseline grid has supporting lines that help you to align everything horizontally with the same space. Examples could be a main menu with icons, a submenu, a body text, or a H1 heading title. Or consider the alignment of a text in a CTA button that always uses the same spaces in your design system. Using a baseline grid speeds up the designing process, and perhaps more importantly, increases the consistency of your designs. Other advantages are:

  • The structure and guidelines make it easier for frontend developers to read the design
  • A baseline grid provides a good way to scale up a page for different mobile devices
  • Increases the aesthetic beauty of the website
  • Provides a good way to scale a page for different devices
  • Efficient for creating components in Figma or Sketch
  • Enables faster decision-making regarding the distances between text elements
baseline-grid-8px-design

How can you use it?

A grid is a system of horizontal lines with specific spacings in between them. I like working with an eight-point grid for websites myself, but this is a personal preference. Working with an eight-point grid means that all horizontal lines have a space of 8px between them, with which your text is aligned. This horizontal grid system gives you the option of setting the space between elements with spacing intervals of 8px (8, 16, 24, 32, 40, etc.). I personally use a canvas with a width of 1440px. For pages that require a lot of text, such as blog pages, you can also use a 12px grid. This creates more space between the texts, making them more readable. Ultimately, the most important thing is that you’re able to neatly align everything. Whether you do so using 4px, 8px, 12px, or 24px is less important, and depends on the complexity of the user interface and the device on which you would like to design.

Don’t be afraid to step out of the grid
The rules for grids are easy to follow. They’re especially important at the start of your design career. But some design concepts exist to draw more visual attention or emphasise certain elements. Sometimes, it’s important to let go of the grids; to ‘break out of the grid’. Taking certain elements out of the grid can highlight them. Marketing sites or portfolios can, for example, benefit from this.

For mobile apps
You have to deal with smaller resolutions when creating the design for a mobile app. You can use an 8px grid for this or a 4px grid (for more complicated mobile UI design), depending on your personal preference. Be aware that it’s more important to stick to a grid when working on the design for a mobile app. Visitors expect buttons, items, and menus to be positioned logically and to be easy to press. Users have been accustomed to grids by other apps they use daily, such as Instagram, Facebook, or Twitter.

Side tip: If the user interface is less complex, start with a 12px grid. If the UI design is a little more complicated (using different types of texts or design components, for example), it’s best to opt for an 8px grid.

Setting up a baseline grid

Below, I’ll show you have to set up an 8px baseline grid for a website in Figma, the design tool I am currently using.

  1. Click on the plus icon of ‘Layout grid’ and then click on rows in the top left.
  2. You can then set the count to auto. (This will ensure the lines will automatically follow suit if the canvas is lengthened or shortened.)
  3. For the colour of the lines, I use red with a transparency of ten percent.
  4. Set the type to top and choose 8px for the height, then set the offset to 0 and the gutter to 0.
baseline grid 8px settings
setting up a 8px baseline grid in Figma

You now have a baseline grid in Figma. Easy, right:)?

Type scale system

A type scale system combines perfectly with a baseline grid. You can use one to hierarchically align your design and content by giving text elements (such as H1, H2, H3, body text, etc.) fixed values, thus making sure they are consistent on every page of your design system and that you only need to make changes in one place. You can find a good article about type scaling here.

  • 1.200 — Minor Third
  • 1.067 — Minor Second
  • 1.125 — Major Second
  • 1.200 — Minor Third
  • 1.250 — Major Third
  • 1.333 — Perfect Fourth
  • 1.414 — Augmented Fourth
  • 1.500 — Perfect Fifth
  • 1.618 — The Golden Ratio

Below is a small part of the type scale system that I always use for my design projects.

type-scale typography
Small part of a Type scale system, that I always use for my design projects.
Tip: Do you sometimes spend a lot of time working out what the line height should be to create a type scale for an 8px baseline grid? That’s not a problem. You can use the tool The Good Line-Height to calculate it quickly. In this way, it will always fit on your grid.

Scale ratios

There are various scale ratios that you can use. They are most easily categorised into small, medium, and large scales.

Small scales (less than 1.2) are best for mobile apps, the mobile responsive version of the website, and complex user interfaces.

Medium scales (between 1.15 and 1.333) are perfect to organise and create hierarchy. (Think of organising subheadings and the body text for desktop website landing pages and blogs.)

Finally, there’s the large scales (1.333 or larger). These are more difficult to work with and effectively implement. They are best used to create your portfolio website or for websites that want to stand out and have progressive branding.

To apply scale ratios in real life in design projects, you can use Google material design’s type scale system or this tool type-scale. There is also a Figma plugin for this here.

baseline-grid-8px-ui-design
Here I use a baseline grid in Figma for a e-commerce concept

Key Takeaways

  • Adapt your grid to the complexity of your UI design
  • Don’t be afraid to break the grid and step outside
  • Make yourself a grid starter file in Figma or Sketch
  • Great hand-off for Front-end developers

Author picture

Hi! I'm Remon Leijtens

I hope you got value out of my writing. If I can help in some small way on your design journey I’d love to hear it – comment below, email me or tweet at me.

You can also find me on: Dribbble / Instagram / Twitter


Comments

Add a new comment

Your email address will not be published, Required field are marked*