Author Archives: Simon

It’s easy to get obsessive about typography and vertical rhythm, especially when using my plugin that shows you exactly how close to the lines you are.

One of the biggest challenges in maintaining a solid vertical rhythm is form elements. I have tried too many different ways to get them to fit into the flow of text–including countless combinations of padding, margins, borders, line-heights and font-sizes–but unfortunately they simply do not behave themselves consistently cross-browser.

Which is why I had a bit of a double facepalm moment when I realised exactly how easy it could be. Simply wrap them in a containing element and give that element a minimum height:

<div class="form-container">
	<label for="input-element">My Label</label>
	<input type="text" id='input-element'>
</div>

Usually I just go for double the line height:

.form-container {
	min-height: 3em; /* Assuming line-height of 1.5 */
}

/* If you're using LESS/SASS, it's even easier */
.form-container {
	min-height: @lineHeight * 2;
}

Obviously, if you change the font-size of the containing element, this will break your vertical rhythm (you’ll have to re-calculate the min-height based on the new line-height, itself based on the new font-size).

But if you’re using the same font-size, then this is all you need to make sure that everything sits vertically where it should.

If you want more space underneath or above your form container, you could simply use another line-height unit:

.form-container {
	min-height: @lineHeight * 2;
	margin: 0.75em 0;  /* Assume 1.5 line height, divided by 2 */
}

Everything that comes after it will sit on the same line as everything that comes before it.