Align type in block elements to baseline

**akiryk** · Mar 30, 2011 14:07

I want to show two letters in different fonts side by side for a typography quiz I'm making. The two letters sit side-by-side using the markup sample below, but they aren't aligned on a baseline (the baseline of Verdana 'a' is lower than baseline of Garamond 'a'. Assuming that I keep the structure of two <div> elements, can I align them with css? I'm attaching a screen shot showing how I want it to look.

Code:

<html>
<head>

	<title>Type Test</title>
	
	<style type="text/css" media="screen">
		body {
			font-size:200px;
		}
		
		#one {
			float:left;
			font-family:garamond;
		}
		
		#two {
			float:left;
			font-family:verdana;
		}
	</style>
</head>
<body>
	<div id="one">a</div>
	<div id="two">a</div>
</body>
</html>

**Paul O'B** · Mar 30, 2011 14:47

You'd need to leave them as inline elements and then you can align them to the baseline as required.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    font-size:200px;
}
#one {
    font-family:garamond;
    vertical-align:baseline;
}
#two {
    font-family:verdana;
    vertical-align:baseline;
}
</style>
</head>
<body>
<div><span id="one">a </span> <span id="two">a</span> </div>
</body>
</html>

User Tag List

Thread: Align type in block elements to baseline

Thread Tools

Display

Align type in block elements to baseline

Bookmarks

Bookmarks

Posting Permissions