Keeping pace with the changing times, designers first have to understand the typography of a web page to adjust it to create better designs and better visitor experiences. While talking about the latest typography on the web, the term vertical rhythm comes to your mind. But designers find it hard to get it right. By adjusting font size or altering spacing, you can generate the appropriate proportions and set up a vertical rhythm perfectly in motion. Here are a few aspects of this new-age typography that you must know to help take your design to the next level.
Definition of Vertical Rhythm for Your Web Page
Before delving deep into the matter, it is vital to define the term correctly. Rhythm is the regular pattern of movement, and the more consistent it is, the better it becomes. In web design, vertical rhythm is how a single viewer’s eye scans content on a web page. As you read content from left to the right side and from top to bottom, you should always wish to keep your content in a perfect way to maintain consistent visual rhythm on your web page. Keeping vertical rhythm consistent means that you can build a visually relaxing experience, thereby evoking a feeling of familiarity to your visitors. It helps you remove visual barriers as well as make the web content more readable. According to a report of The Huffington Post, having consistency in web design and avoiding too much text are necessary.
However creating perfect vertical rhythm is challenging. In fact, it is quite hard to develop a harmonious relationship between text as well as pictures on a site. While doing this, a number of questions might pop up in your mind. Are the headlines of your web content or the spacing between the paragraphs too small or too large? Making a perfect vertical rhythm is all about getting the proportions right. It is not rocket science and you need to configure it properly.
There are three vital factors that create an impact on vertical rhythm. Here are a few important steps you must follow to develop this rhythm on a webpage. Whether it be designing a website of your startup or redesigning a existing site, you also need to maintain this rule.
Define Font Size and Line Height
Your first step is to define the default font size as well as the line height of the body text of your web page. To allow users to read the text clearly, the space between line heights has to be spacious enough for the reader’s eye to skim throughout the text quite easily. It is wise to go with a line height of the key font size or commonly used font size within your web design.
Measuring the Margins
By default, all web browsers incorporate margins to top and also at the bottom of paragraphs. As a result, vertical rhythm is messed up. Most browsers fix the bottom as well as top of the margin at 1em. However, to maintain a perfect rhythm, the margins and the line heights should be of a similar size. It signifies that spacing between the paragraphs is similar to that of the individual lines. Everything on your web page looks nice and synchronized.
Reset the Margins
Resetting the style sheet is vital for reducing browser inconsistencies in margins, headings’ font sizes, and a few more. There will not be any issue on browser defaults nor any problems on weird default settings. No point in getting anxious if you design the web page with codes, as they will not be affected.
Look after the Heading
Setting a proper heading size is necessary for maintaining vertical rhythm of your webpage. Irrespective of the text type you use, ensure that it should have appropriate line height that are ideally defined for the paragraphs. If you choose 18 pixels, you can achieve it by adjusting ems of different headings and match the line heights effectively.
H1
Make sure that the size of the H1 heading is double the size of the paragraph. To keep the line height consistent with paragraphs, you can set the line height of H1 to be 1.5em. It signifies that H1 line height becomes bigger than H1, so that you can use different margins to compensate for it.
H2
Normally H2 is smaller than H1. If you set 18 pixels as line height, then you must keep the height of H2 to 22 pixels. To keep the line height intact, you have to define the bottom and top of the line height of H2 both as 1.6em.
In a nutshell, developing a perfect vertical rhythm in your web design involves lots of trial and error with diverse theories, as well as mathematical calculations. Learn about the essential tips, so that you can easily integrate this rhythm into your site’s design quickly. Allow all your users to have a good web designing experience.
Image Courtesy: sixrevisions.com
