Servage Magazine

When we consider the user experience in our web designs through texts, we first consider the typographical elements and their impact in our designing. Any content in western culture is read from the left and top of the page and goes to the right and bottom. This left to right tendency has led us to create horizontal rhythm; whereas, top to bottom conveys vertical rhythm.

Vertical rhythm

Good readability comes through the vertical arrangement of typefaces along with image alignments. We can say we are soothing our audience with a good visual presentation of UI elements through symmetry and familiarity in UI components. This inherent nature of human reception, forces web designers to stay away from too much abstraction and complication in the designing of web pages. Perhaps, this is the reason we prefer grid based designing while aiming for consistency in placement of all components of our design.

How to Create

Generally speaking, rhythm is understood as a regularly repeating pattern of movement or sound. Therefore, to create vertical rhythm, we need to create a pattern of UI elements in such a way that they repeat in a consistent manner. Our hope is to create feelings of positive experiences when our users view them.

In text, we have two important elements to play with: fonts and lines. Fonts have many properties such as size, style (i.e. bold, italic, underline etc.), arrangements (like left, right, center, justify, etc.), height and spacing. Whereas lines have just height and spacing type properties to work with.

To create good vertical rhythm, you must maintain consistency with font type, style and size across the entire page. Ideally, you do this with your entire website as well. The same is true for line height and spacing between the text blocks and images. Let’s explore an important rule for creating better vertical rhythm. In all browsers, most typical fonts show a 16 pixel height of their characters. For line height, we have an undefined rule of 1.5 multiplication factor from the font height. For instance, if our font has standard 16 px height, then our line should have 1.5 times 16, which equals 24 pixel line height. This creates good readability and user experiences.

Thus, if we take 24 px line height as the standard, we can follow this magic number in all our design styles, including the size of images, the spacing between images, as well as in the margins. For instance, you have image of 250 pixel height you need to scale it to either 240 px or 264 px as those are multiplications of 24. The same rule will work with side margins for the text blocks and images. You will keep the distance of 24 px between the two images, either horizontally or vertically.

If you keep this magic number in the CSS structure, your job of designing will become more fluid and easy. However, it may be challenging to design vertical rhythm without the latest tools in programming. We can use various applications or software to design vertical rhythm rapidly and easily.

• Typecast App is an amazing tool for font designs. With this tool, you can experiment with plenty of type font combinations and settings with consideration for best format of proper baselines.
• Modular Scale is another tool offering good vertical rhythm design techniques, where you find a sequence of numbers relating all elements with one another, in relevant ways.
• Baseline.js is another opportunity, if you prefer browser based designing using JavaScript overlay on your web pages.

References & More Reading

Improving Layout With Vertical Rhythm
Technical Web Typography: Guidelines and Techniques