Vertical rhythm is a powerful tool for creating consistent and visually appealing user interfaces and in fact user-friendly digital environments.
Just like a good song, a good web page has to have rhythm.
Rhythm is achieved when design elements are organized into repeatable patterns which allow the final design to look professional and consistent.
Vertical rhythm is a powerful tool for creating consistent and visually appealing user interfaces and, in fact, user-friendly digital environments. Vertical rhythm sets up a clear visual hierarchy of elements that lets the user scan the content in a glance, while making designers’ and developers’ job easier. What a win-win!
In this post, we are going to clarify what vertical rhythm is about, how to set your baseline grid and what are the benefits it brings to user experience.
Vertical rhythm is a concept that derives from typography and that refers to aligning a body of text to a grid of evenly spaced horizontal lines. In print design, the designer uses a baseline grid in order to create vertical rhythm and give unity to the design (in typography, the baseline is the imaginary line upon which a line of text rests). Similarly, a web designer sets an imaginary grid of evenly spaced, horizontal lines, and alines every element on it. This structural consistency improves readability, and makes the layout harmonious and organized as the viewer scrolls the page.
Picture 1 - A combination of horizontal and vertical rhythm is at the base of a well structured web page design
Before starting to design a web page, it is good practice to establish a solid baseline grid with a good vertical rhythm. Beside making designers’ life easier and the hand-over of the project to developers smoother, the benefits are all for the users and they lie in the Principle of Repetition. In the case of vertical rhythm, the repetition occurs in the evenly spaced horizontal lines of the baseline grid.
But why is repetition important? As Espen Brunborg puts it in this article, it has to do with how our mind works and how we use pattern recognition to decipher the world around us. Pattern recognition allows us to store similar or identical elements, such as shapes, colors or distances, in a pattern library and helps us to analyse outside stimuli. If a stimuli doesn’t lie in that pattern library, our brain will need significantly more power to process it. That’s where a precise design structure, whether horizontal or vertical, comes in hand.
Let’s look at the example below.
Picture 2 - Inconsistent shapes and spaces (right) requires more processing power than a regular use of the same (left)
In the first example, the irregularity in shapes and distances breaks the flow of pattern recognition, while a regular and consistent structure naturally supports the legibility and cognitive interpretation of the design. Establishing a solid baseline grid is a great method to achieve just that.
Now let’s look at what vertical rhythm does to a content
Picture 3 - when vertical rhythm is applied the content becomes more legible
Now that we know the importance and the benefits of vertical rhythm for a good user experience, let's talk about how to nail a pixel-perfect baseline grid.
Typically, web designers tend to first set out the grid and then make the type work with it. At Contrast use a better approach by starting from the content, and working out the baseline grid from that. Adopting the content-first approach means that the first step in our design process is to analyse all the content that is currently in use on a website. Then, we set an appropriate font that works well with that content, and find a good font size, line-height, and paragraph length for the body text. The result will be a more content-centred web page design.
Let’s describe an example; Based on our research/analysis, we chose the font ‘Noto Sans’ for our project, set the body text size to 18 pixels, line-height to 24 pixels, and the paragraph’s maximum width to 560 pixels (for a bit geekier read, find out how to figure out those numbers on ‘The Equilateral Triangle of a Perfect Paragraph’)
Picture 4 - Text credit WIRED UK
The line-height is the starting number of our baseline grid, but 24 pixel is too large and doesn’t account for the flexibility needed in web design. If we divide 24 by 2 we’d get a baseline grid of 12 pixels, which would already work better for a web site containing long paragraphs of text and images, such as a blog.
Picture 5 - Text credit WIRED UK; Picture credit Giles Keyte/20th Century Fox
So let’s try again! If we divide 24 by 3 we get 8 pixels. Now, that’s an optimal size for a sufficiently flexible grid to apply to all those web pages that have lots of different styles of text, various components and complex layouts with more than one column. The finer you go, the better flexibility you get for your content (Picture 6).
Picture 6 - Text credit WIRED UK; Picture credit Giles Keyte/20th Century Fox
But don’t be restricted by your baseline grid. Rhythm is not meant to be rigid, and just like any rule it can be bent - or even broken. For example, the Beatles used shifting meters in the famous "Strawberry Fields" (You can dive into music theory with our music expert Tom later, for now let’s stick to web design)
If you adopt vertical rhythm at an early stage in the design you’re off to a good start and to a great web page. Vertical rhythm is a tool that prevents inconsistencies in the design’s structure, making the designer's job easier and the hand-over to developers much easier. But first and foremost, by following a vertical rhythm, you are utilising one of the most powerful instruments in a designer’s toolbox – repetition. The result is a beautiful design that will improve user experience throughout your web site.