This problem drove me to distraction when I first started using @font-face fonts to set my web typography free. It's not particular to responsive designs, it can happen with any heading that has a @font-face font applied. Here's a portion of a design composite I was working on:
When I had built the site, the relevant markup was as follows:
<div class="intro">
<h1>We're Bridestone: <span>providing <b>beautiful</b> quality <i>natural</i> stone products.</span></h1>
…more code…
</div> <!-- intro:END -->And here was the relevant CSS:
.intro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-size: 2.63636364em;
line-height: 1em;
}
.intro h1 span {
font-size: 0.545454545em;
font-family: CaudexRegular, "Times New Roman", Times, serif;
font-weight: normal;
}However, although I was using @font-face so that I could use exactly the same font as the composite, the header still looked a little messy in the browser:
Hopefully you can make out that the We're Bridestone text doesn't match the composite. It's thicker, which degrades the clarity!
It turns out that the problem relates to font weight. Unless explicitly stating the font-weight property, many browsers will apply a standard font-weight (typically, 700) to any heading elements. The solution therefore is to always define the font-weight of any
@font-face fonts used in heading elements. For example, in this instance, I amended the CSS to:
.productIntro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-weight: 400;
font-size: 2.63636364em;
line-height: 1em;
}This then overrides the font-weight value that the browser would ordinarily use and as shown in the following screenshot, the design finally matches the composite in the browser:
The @font-face method of web typography is, on the whole, great. The only caveats to be aware of when using the technique with responsive designs are in relation to the font file size. For example, the And the winner isn't... site is using three custom fonts—Bebas Neue, Bitstream Vera Sans, and Collaborate Thin. At worst, if the device rendering the page required the SVG font format, it will require an extra 70 KB of data, compared with using the standard web safe fonts such as Arial. These fonts are also fairly lightweight—others are not! Be sure to check the size of custom fonts if you want the best site performance.
Tip
A truly responsive type unit on the way?
Amongst the current working draft of the CSS3 Fonts module is reference to viewport relative fonts (http://www.w3.org/TR/css3-values/#viewport-relative-lengths). The vw unit (for viewport width), vh unit (for viewport height) and vm unit (for viewport minimum; equal to the smaller of either vm or vh) could be crucial time savers in the years to come. Sadly, at present there is no browser support apart from Internet Explorer 9.