Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 5dc1495f05
Fetching contributors…

Cannot retrieve contributors at this time

209 lines (116 sloc) 10.308 kB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fake Bolding of Web Fonts | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="If you are like me, you would have been (ab)using Google Web Fonts for your custom font needs. In which case, you most certainly would have tripped &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/fake-bolding-of-web-fonts.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/html5please-api.html" title="Html5please API">&#x276C;</a>
<a class="next" href="/moving-to-sf.html" title="Moving to SF">&#x276D;</a>
</nav>
<header>
<time datetime="2012-03-02T11:26:00-08:00" pubdate><span class='month'>Mar</span> <span class='day'>02</span> <span class='year'>2012</span></time>
<h1 class="entry-title"><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></h1>
</header>
<div class="entry-content"><p>If you are like me, you would have been (ab)using <a href="">Google Web Fonts</a> for your custom font needs. In which case, you most certainly would have tripped on this problem: Faux Font bolding.</p>
<p>Most browsers synthesize the bold weights of fonts that do not posses a bold weight. For example, the font &#8216;Helvetica Neue Light&#8217; does not have a bold version available. If you use <code>font-weight: bold</code> with that font, browsers will artificially create a bold weight and <a href="http://jsfiddle.net/nimbu/jaRYQ/">render it like this</a></p>
<p><img src="http://cache.gyazo.com/c0ed78dbdef07d27ce6bdf3319507f1c.png" alt="Rendering of fake bold on helvetica neue light" /></p>
<h2>The Problem</h2>
<p>Now, this problem is exarcerbated when used with web fonts, especially the free open source fonts that are served from a service. Google Web Fonts, for example, <a href="http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Erica+One">serves slab fonts</a> like so:</p>
<pre>@font-face {
font-family: 'Erica One';
font-style: normal;
<b>font-weight: normal;</b>
src: local('Erica One'), local('EricaOne-Regular'), url(&lt;font url>) format('woff');
}</pre>
<p>What this code declares to a browser is: &#8220;Hey, this is the <strong>least weight available</strong> for this font called Erica One. So, if anyone wants a heavier weight, you need to synthesize it just like you would do it to local fonts.&#8221;</p>
<p>Now, the problem occurs if you only want to use this font for your headings. By default, browsers apply <code>font-weight: bold</code> to all headings. But the browsers need to obey the <code>font-weight</code> descriptor that is used in the <code>@font-face</code> rule above! This means, they will try to fake the bold weight of the already-heavy weight Erica One. Alas, the method used for synthetically generating the bold weight is not specced, so each browser does its own magic! Here is the normal weight of a typical slab web font(Google Web Font Ultra) overlaid on top of the synthetic bold generated out of it (<a href="http://jsfiddle.net/nimbu/wcBmD/">here is the code used to generate this graphic</a>):</p>
<p><img src="http://cache.gyazo.com/9bddfbf3f0fd2ead41c22c593239b051.png" alt="Image of the synthetic font" /></p>
<h2>How to solve this?</h2>
<p>There are two ways to resolve this:</p>
<h3>If you are in control of the @font-face rule</h3>
<p>Then the trivial solution is to add a <code>font-weight: bold</code> declaration which tells the browser &#8220;This font is a heavy slab font intended only to be rendered as a bold. Dont create synthetic bold versions for this&#8221;. This would <a href="http://jsfiddle.net/nimbu/Kxk5s/">work universally across any selectors irrespective of what the <code>font-weight</code> value is for them</a>. <strong>This is the recommended solution</strong>.</p>
<p>Unfortunately, this won&#8217;t quite work if you are using one of the recommended options of Google Web Fonts, as you have no control over the <code>font-weight</code> descriptor in the <code>@font-face</code> rule that Google outputs. So we now move to Option 2.</p>
<h3>Set font-weight: normal to all selectors using the slab font</h3>
<p>This is the trivial solution if you are using font services whose <code>@font-face</code> rule you do not have control over. The way I would do this, in Sass is to define it in this manner:</p>
<pre>.slab-serif {
font-family: 'Ultra', serif;
font-weight: normal;
}
h1 {
@extend .slab-serif;
}</pre>
<p>If you are using just CSS, then ensure everytime you set the <code>font-family</code> to be that slab web font you use a font-weight: normal declaration. Aha, this is actually what Google Fonts recommend in the sneaky little box to the right.</p>
<p>In any case, if you can avoid exposing your users to horrific fake bolding, you should. And that is the point of this post: to remind myself to never ever have browsers fake the weights of web fonts.</p>
<p>Note: <a href="http://css-tricks.com/watch-your-font-weight/">Here is Chris Coyier&#8217;s take on it</a>.</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2012-03-02T11:26:00-08:00" pubdate><span class='month'>Mar</span> <span class='day'>02</span> <span class='year'>2012</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2012-03-02-fake-bolding-of-web-fonts.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar"
src="http://a2.twimg.com/profile_images/1696865113/me_normal"
height=48> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/fake-bolding-of-web-fonts.html';
var disqus_identifier = 'http://nimbupani.com/fake-bolding-of-web-fonts.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.