Welcome to WebmasterWorld Guest from

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Tired of calculating your vertical rhythm?

Let's work on this together.

1:01 pm on Oct 22, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:June 26, 2007
posts: 88
votes: 0

I made a very (VERY!) simple php script to aid me in maintaining my vertical rhythm. I would love for you all to make it better, more efficient. So feel free to expand and improve on this!

We rename our stylesheet with a php extension and call it from html thus:

<link rel="stylesheet" href="css/typography.php" type="text/css" charset="utf-8" media="screen" />

Next you put this at the top of this style sheet:

<?php header("Content-type: text/css"); ?>
function Rhythm($FontSize, $BaseLineHeight, $MarginTop, $MarginBottom, $BorderTop, $BorderBottom)
// Calculate the new line-height
$NewLineHeight = $BaseLineHeight / $FontSize;
//How much is 1px in ems?
$PixelBase = 1 / $FontSize;
// Calculate how much the borders are in ems
$emBorderTop = $BorderTop * $PixelBase;
$emBorderBottom = $BorderBottom * $PixelBase;
// Calculate how much the margins are in ems
$MarginTop = ($MarginTop * $NewLineHeight);
$MarginBottom = ($MarginBottom * $NewLineHeight);
// Subtract the border widths from the margins
$MarginTop = $MarginTop - $emBorderTop;
$MarginBottom = $MarginBottom - $emBorderBottom;
// If the line-height is smaller than the font-size, double it
if ($NewLineHeight < 1) {
$NewLineHeight = $NewLineHeight * 2;
echo "line-height: " . $NewLineHeight . "em;\n";
echo "margin-top: " . $MarginTop . "em;\n";
echo "margin-bottom: " . $MarginBottom . "em;\n";
echo "border-bottom-width: " . $BorderBottom . "px;\n";
echo "border-top-width: " . $BorderTop . "px;\n";

And you use it like this:

#maincontent p {
font-size: 1.4em;
<?php Rhythm(14, 20, 1, 1, 0, 1); ?>

The first argument is the current font-size in px.
The second argument is the (parents) line-height in px.
The third and fourth arguments are the margins (top/bottom) in multiples of lineheight (so 2 would mean 2xline-height).
The fifth and sixth argument are the borders (top/bottom) in pixels.

I output the border widths in pixels because I usually use 1px borders (if any) and they tend to show up rather thicker in some browsers when I use ems. Which I think is ugly.

The fontsize is not output but simply declared on it's own in ems. (Because I cannot figure out how to do this generically).

1:21 pm on Nov 3, 2008 (gmt 0)


WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 31, 2003
votes: 2

Not a lot of takers, eh Bert36?
The last time I seen a vertical rhythm chart was way back in my IBM RPG programming days. I never did understand what in the world a vertical rhythm was for anyway. Probably why you don't see a lot of responses here yet ;)

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members