Line spacing and mixed font sizes
Anyone who knows if it is possible to maintain consistent line spacing with CSS even if you are using different fonts on the line? Below is an example where the second paragraph has more line spacing than the first. I've tried setting row-height to 0 for a "huge" range in CSS, but that doesn't seem to be enough.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Line Spacing Test</title>
<style type="text/css">
body {
font-size: 14px;
line-height: 1;
}
.huge {
font-size: 64px;
line-height: 0;
}
</style>
</head>
<body>
<p>Here is a line using normal font size.<br />
Here is another line using normal font size.</p>
<p>Here is a line with a span with <span class="huge">huge</span> font
size.<br />
Here is another line with a span with <span class="huge">huge</span>
font size.</p>
</body>
</html>
source to share
You can set consistent line spacing by setting it large enough to accommodate even the largest font you use. By spec, setting line-height
on a block element sets the minimum line height. Things get tricky for inline elements, but it boils down to the fact that browsers ultimately determine line heights of lines and thus spacing.
However, in some browsers you can convince the browser to use your height, eg. adding
span { display: inline-block; height: 16px; }
source to share