bowdenweb

Regardless of how you feel about the b and i elements, not only are they included in the html5 specification, they have been giving new semantic meaning. These new definitions assure that i != em and b != strong semantically, but when it comes to browser rendering the pairs are still equals. Considering they have separate meanings, it seems intuitive that their display should also convey the differences, or at the very least that they are different.

Opting for subtlety in design, I have chosen to portray the differences in content semantics by capitalizing on font linking optimization, a smart and elegant technique posted on 456 Berea Street.

For demonstration purposes, I grabbed Panefresco from the super fabulous Font Squirrel, namely because it has 16 styles from which to choose from. For brevity, I’m not going to post Panefresco’s @font-face Kit or my alterations entirely, but you can view the original here and my alterations here. The following font linking css displays the technique, notice how they all have the same font-name but each has its own resources as well as its own unique font declaration(s).

/** Panefresco Regular font weight 100 */
@font-face{font-family:"Panefresco400wtRegular";
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtRegular-webfont.eot");
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtRegular-webfont.eot?#iefix") format("eot"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtRegular-webfont.woff") format("woff"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtRegular-webfont.ttf") format("truetype"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtRegular-webfont.svg#webfontgFFh5vxH") format("svg");
font-weight:100; font-style:normal}
/** Panefresco Italic font weight 100 */
@font-face{font-family:"Panefresco400wtRegular";
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtItalic-webfont.eot");
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtItalic-webfont.eot?#iefix") format("eot"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtItalic-webfont.woff") format("woff"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtItalic-webfont.ttf") format("truetype"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco1wtItalic-webfont.svg#webfontCeET7Ncb") format("svg");
font-weight:100; font-style:italic}
/** Panefresco Regular font weight 250 */
@font-face{font-family:"Panefresco400wtRegular";
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtRegular-webfont.eot");
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtRegular-webfont.eot?#iefix") format("eot"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtRegular-webfont.woff") format("woff"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtRegular-webfont.ttf") format("truetype"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtRegular-webfont.svg#webfontAsSDuy7L") format("svg");
font-weight:200; font-style:normal}
/** Panefresco Italic font weight 250 */
@font-face{font-family:"Panefresco400wtRegular";
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtItalic-webfont.eot");
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtItalic-webfont.eot?#iefix") format("eot"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtItalic-webfont.woff") format("woff"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtItalic-webfont.ttf") format("truetype"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco250wtItalic-webfont.svg#webfontFnMZKWyV") format("svg");
font-weight:200; font-style:italic}
/** Panefresco Regular font weight 400 */
@font-face{font-family:"Panefresco400wtRegular";
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco400wtRegular-webfont.eot");
src: url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco400wtRegular-webfont.eot?#iefix") format("eot"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco400wtRegular-webfont.woff") format("woff"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco400wtRegular-webfont.ttf") format("truetype"),
  url("http://dev.bowdenweb.com/assets/fonts/sans-serif/panefresco/Panefresco400wtRegular-webfont.svg#webfontGS74qLRB") format("svg");
font-weight:400l; font-style:normal}

Note: Panefresco applies font-weight values on 250, 750 and 999, which differ from css specifications that use font-weight values divisible by 100. I’ve spoken about the differences between type design conventions and css conventions before, and this is a perfect example. I’m not taking a side here, just pointing out the obvious. For this example I’ve simply set Panefresco 250 to font-weight:200, Panefresco 750 to font-weight:700 and Panefresco 999 to font-weight:900, but that’s not to say they are correct.

I now have more than enough options to convey semantic meaning to users, while staying within the same font-family, it’s just a matter of styling them. Applying a lighter font-weight value to b than to strong is an obvious solution that I’m actually going to carry over to i and em as well. Personally, I view em implying text with stress emphasis as being both italic and bolded, however I’m usually wrong and moreover, this post is about styling i and b.

After putting the demonstration together, I noticed that even though b and strong have different font-weights, they are not very distinguishable and to compensate I actually set b to bold font-weight:700 and strong above bold to font-weight:900.

You can see view the demo here, or just check out the screenshot below:

So there’s my easy solution to expressing varying degrees of semantics to readers via font linking. Hopefully this will inspire you to embrace a more vivid font design library into your workflows. During the creation of this post, quite a few new ideas popped into mind, hopefully it does the same for you.

Tons of love and gratitude extended to html5doctor, 456 Berea Street and Richard Ishida’s Language Subtag Lookup App, for providing the inspiration and blueprint for this post.