johnhunter/font.html

## font.html
<!DOCTYPE html>
<html>
<head>
    <title>How browsers set vertical spacing</title>
    <style>

    body {
        margin: 20px;
        font-family: Times,'Times new roman';
        font-size: 16px;
        line-height: 1.2;
    }

    .box {
        background-color: rgba(255, 255, 51, .2);
        font-size: 120px;
        line-height: 100%;

        /* positioning context */
        position: relative;
    }
    .content {
        background-color:  rgba(255, 51, 51, .2);
        display: inline-block;
    }

    .line {
        position: absolute;
        left: -10px;
        right: -10px;
        top: 0;
        height: 0;
        overflow:hidden;
    }
    .baseline {
        border-bottom: 1px solid red;
        top: 99px;
    }
    .font-body {
        position: absolute;
        border-top: 1px solid blue;
        border-bottom: 1px solid blue;
        top: 16px;
        height: 108px;
        left: -10px;
        right: -10px;
    }

    .gecko .baseline {
        top: 90px; /*-9px*/
    }
    .gecko .font-body {
        top: 7px; /*-9px*/
    }

    </style>
    <script>

    (function(doc, ua){
        console.log(ua);
        var bc = doc.documentElement.classList;
        if (/gecko/.test(ua)) {
            if (/webkit/.test(ua)) { bc.add('webkit') }
            else { bc.add('gecko') }
        }
        else {}
    }(document, navigator.userAgent.toLowerCase()));

    </script>
</head>
<body>

    <p>Times 60px/100%</p>

    <p>Note at 60px font-size there is a 9px difference in the baseline between webkit and gecko</p>

    <div class="box">
        <span class="content">Figure</span>
        <span class="content">eight</span>


        <div class="line baseline"></div>
        <div class="font-body">&nbsp;</div>
    </div>

    <div>
        <ol>
            <li><a href="http://www.w3.org/TR/CSS21/visudet.html#leading">W3C Visual formatting model details: Leading</a></li>
            <li><a href="http://typophile.com/node/13081">Vertical Metrics How-To</a></li>
            <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=402473">Mozilla bug gives some info on font height</a></li>
        </ol>

    </div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>How browsers set vertical spacing</title>
	<style>

	body {
	margin: 20px;
	font-family: Times,'Times new roman';
	font-size: 16px;
	line-height: 1.2;
	}

	.box {
	background-color: rgba(255, 255, 51, .2);
	font-size: 120px;
	line-height: 100%;

	/* positioning context */
	position: relative;
	}
	.content {
	background-color: rgba(255, 51, 51, .2);
	display: inline-block;
	}

	.line {
	position: absolute;
	left: -10px;
	right: -10px;
	top: 0;
	height: 0;
	overflow:hidden;
	}
	.baseline {
	border-bottom: 1px solid red;
	top: 99px;
	}
	.font-body {
	position: absolute;
	border-top: 1px solid blue;
	border-bottom: 1px solid blue;
	top: 16px;
	height: 108px;
	left: -10px;
	right: -10px;
	}

	.gecko .baseline {
	top: 90px; /-9px/
	}
	.gecko .font-body {
	top: 7px; /-9px/
	}

	</style>
	<script>

	(function(doc, ua){
	console.log(ua);
	var bc = doc.documentElement.classList;
	if (/gecko/.test(ua)) {
	if (/webkit/.test(ua)) { bc.add('webkit') }
	else { bc.add('gecko') }
	}
	else {}
	}(document, navigator.userAgent.toLowerCase()));

	</script>
	</head>
	<body>

	<p>Times 60px/100%</p>

	<p>Note at 60px font-size there is a 9px difference in the baseline between webkit and gecko</p>

	<div class="box">
	<span class="content">Figure</span>
	<span class="content">eight</span>


	<div class="line baseline"></div>
	<div class="font-body"> </div>
	</div>

	<div>
	<ol>
	<li><a href="http://www.w3.org/TR/CSS21/visudet.html#leading">W3C Visual formatting model details: Leading</a></li>
	<li><a href="http://typophile.com/node/13081">Vertical Metrics How-To</a></li>
	<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=402473">Mozilla bug gives some info on font height</a></li>
	</ol>

	</div>

	</body>
	</html>