Vertical rhythm is a principle of typographic and graphic design whereby elements are vertically aligned in a consistent way. This gives rise to a visually attractive, hierarchical and harmonious end result. Vertical positioning is affected by the heights of elements, as well as the margins between them and the line height of text. Modular scales are widely used solutions for implementing vertical rhythm. They are most commonly based on specified base numbers and multipliers. The base number is the size of the smallest individual element, and the multiplier is used to derive the sizes of all of the larger elements. The multiplier is often based on the golden ratio or other standardised ratios used in graphic design.
Vertical rhythm online
A functional vertical rhythm also forms the basis for finessed online service design, even though designers do not always use it as a matter of course. Responsive websites that scale to the screen size have introduced new challenges to the implementation of vertical rhythm, as text of the same size no longer works when moving from a mobile phone screen to a 30-inch desktop monitor. Taking mobile devices into consideration in design is becoming the prevailing practice, but designs for large screens are too often overlooked. In part, the problem is that not all visual designers are familiar with the technology for rendering websites in browsers.
This problem has been debated online for several years now, and numerous different tools are available. The following are examples of these:
There does not seem to be a single perfect solution to this problem. We decided to make our own prototype of a light tool with the aim of improving mutual understanding between designers and developers.
The tool facilitates the work of designers and developers
The tool is based on root em (rem) units. Many software packages used for design do not currently enable rem units to be used directly, so the tool provides designers with the opportunity to test various vertical rhythms and translate the rem units into corresponding pixel measurements. The tool generates minimalist responsive CSS code for the technical implementation. This solution may not be perfect for every situation, and more complicated appearances require deviations from the tool's simplified CSS styles. The aim was to create the most simple solution possible to offer designers enough control without making the tool too complicated.
The tool is available here: vertical-rhythm.crasman.fi.
