Rhythm in typographical terms defines the vertical spacing of the lines of text. In order to maintain the vertical rhythm, each element should adhere to a base line height or multiple of the base line height. Defining and using vertical rhythm ensures that you don’t get page elements which are vertically out-of-sync – a visually jarring effect.

Scale refers to the relative sizes used for elements such as headings of various levels. The scaling of headings and other elements creates a visual hierarchy, allowing the reader to find out the relative importance of  various text elements in the page before reading the content. Do you ever skim through a page, looking at just the headings to find the part that you’re interested in? (rhetorical question, you know you do).

Gridlover is an online tool to help you with generating CSS rules for typographic rhythm and scale. You use simple sliders to set base font size and line height and a scaling factor for headings. You can adjust the scaling factor for each individual heading level and alter top and bottom margins for elements.

Gridlover generates all the CSS for you to copy and paste into your own stylesheets and supports px, rem and em measurement units so that the rules are useful in even the most fluid and flexible web layouts.