Get our posts emailed to you with our monthly newsletter, subscribe here.
When creating new sites or prototypes, designers often start by using a handy layout grid to help them maintain a consistant and organised layout. Often the invisible vertical grid or rhythm is overlooked during the design process, leaving the typography and overall reading experience a UX nightmare for the unsuspecting user. In today post, I wanted to bring your attention to vertical rhythm in design.
Vertical rhythm is the structure and flow of content in your layout, maintaining a good vertical rhythm will allow the user to easily read and digest your content, your design will look much more balanced as the content will flow much better vertically down the page. We often pay a lot of attention to maintaining a horizontal rythem by using grids, but often, we totally overlook the vertical rhythm of our content.
The tools I have today are a collection of vertical rhythm grids and overlays that will help you maintain the correct content baseline, I have also included CSS baseline calculators that will allow you to generate and preview different vertical rhythm CSS settings in your typography.
Fluid Baseline Grid
The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
This handy vertical rhythm tool will help you compute CSS that has a consistent vertical rhythm.
Gridlover is the tool to establish a type system with modular scale and vertical rhythm to build upon.
Vertical Rhythm Tool
Create a consistent vertical rhythm for your web design. This handy tool does the maths for margin-top, margin-bottom and line-height and creates CSS rules for a consistent Vertical Rhythm
Baseline Rhythm Calculator
Baseline Rhythm Calculator is a nifty tool that allows you to create and preview your baseline grid on the fly.
Grid – A JS Bookmarklet
Baseline.js is a jQuery plugin that helps you to maintain vertical rhythm set by a typographic baseline, even when adding inline images with awkward sizes.
#grid inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.
Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography.