For a couple of projects I have used the Baseline Rhythm Calculator to create a balanced vertical rhythm on the page.

As webtypography.net explains:

“Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.”

and on Add and delete vertical space in measured intervals:

“Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.”

The Baseline Rhythm Generator uses javascript to generate example CSS, which you then can paste in a CSS file.

I have converted the baseline calculations to LESS rules so you can incorporate the grid into your own CSS:

/* Settings */
/* font sizes in pixels - only used for body; will be converted to ems */
@body_font_size:13;
@body_line_height:18;

@factor_h1:8;
@factor_h2:6;
@factor_h3:4;
@factor_h4:2;
@factor_p:0;
@factor_small:-2;

.font_size (@size) {
	font-size: 0em + (@body_font_size + @size) / @body_font_size;
}
.line_height (@size) {
	line-height: 0em + @body_line_height / (@body_font_size + @size);
}
.margin_top () {
	margin-top: 0;	
}
.margin_bottom (@size: 0) {
	margin-bottom: 0em + @body_line_height / (@body_font_size + @size);
}

body {
	font-size: 0px + @body_font_size;
	.line_height (@factor_p);
}
h1 {
	.font_size(@factor_h1);
	.line_height(@factor_h1);
	margin-top: 0;	
	.margin_bottom(@factor_h1);
}
h2 {
	.font_size(@factor_h2);
	.line_height(@factor_h2);
	margin-top: 0;	
	.margin_bottom(@factor_h2);
}
h3 {
	.font_size(@factor_h3);
	.line_height(@factor_h3);
	margin-top: 0;	
	.margin_bottom(@factor_h3);
}
h4 {
	.font_size(@factor_h4);
	.line_height(@factor_h4);
	margin-top: 0;	
	.margin_bottom(@factor_h4);
}
blockquote, h5, h6, iframe, label, p, pre, address, td, th, ul, ol, dl, dd, hr,
table {
	.font_size(@factor_p);
	.line_height(@factor_p);
	margin-top: 0;	
	.margin_bottom(@factor_p);
}
small {
	.font_size(@factor_small);
	.line_height(@factor_small);
	margin-top: 0;	
	.margin_bottom(@factor_small);
}

You can change the scaling factors for headers. You could try a Fibonacci sequence for instance:

@factor_h1:13;
@factor_h2:8;
@factor_h3:5;
@factor_h4:3;
@factor_h5:2;
@factor_h6:1;
@factor_p:0;
@factor_small:-2;

Comments

Leave your comment