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;
Search WWH ::

Custom Search