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.
<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>