HTML and CSS Reference
In-Depth Information
.adjust {
font-size-adjust: 0.5;
}
The Nobile font is defined by
@font-face
rules in an external style sheet. The
<body>
of the page contains
the following HTML:
<p><span>b</span><span class="adjust">b</span></p>
Both letters are wrapped in
<span>
tags that add a one-pixel red border around them. The second
<span>
is
modified by the
adjust
class, which sets
font-size-adjust
to
0.5
.
Figure
5-10
shows what aspect_ratio.html looks like in Firefox.
Figure 5-10.
You need to change the value of font-size-adjust until both borders are equal in height
Because Nobile has a higher aspect ratio, the second border isn't as tall as the first. To find the font's aspect
ratio, you need to change the value of
font-size-adjust
in the
adjust
class and refresh the page in the browser
until both borders are the same height. In the case of Nobile, this happens when
font-size-adjust
is set to
0.57
.
So, that's its aspect ratio.
Although finding the aspect ratio of your first-choice font involves a little guesswork, it's easy enough to do,
and it's a one-time operation. All that's necessary is to add
font-size-adjust
to the same style rule as your font
stack, and set its value to the aspect ratio of the first font like this:
body {
font-family: Nobile, Verdana, sans-serif;
font-size-adjust: 0.57;
}
