The Typical Theme

A Resolution Independent Wordpress Theme with Microdata Support

Typical’s Icon Font

Typical uses a custom icon font for the purposes of its ideogrammatic and ornamental design. Many of the glyphs in this font were designed specially for the Typical Theme, including the quill design to denote writing categories. Using icon fonts is currently the most efficient and widely supported technique for supporting multiple resolution variants.

The icon font is subsetted to reduce bloat and served to modern browsers using base-64 encoding 1. This technique embeds the font into the stylesheet, relieving us of an http request and elliminating a type of FOUC 2 experienced while an externally hosted font waits to be loaded.

quill design

Aside from the ideograms — representing things such as Twitter, post categories, RSS and the WordPress logo — Typical makes use of a number of attractive ornaments. These ornaments were converted into an embeddable font format by Michelle Dixon and are based on original woodcut designs used in print. For example, the leaf-like bullets for unordered lists were applied by turning list-style off and inserting the unicode for ‘bullet’ before the text node via pseudo-content:

article ul li:before {
   font-family:'typical';
   content:'\2022';
   padding:0 0.5em 0 0;
   font-weight:normal;
}

Notes:

  1. An article on various Data URI possibilities: http://jonraasch.com/blog/css-data-uris-in-all-browsers
  2. For a generic description of FOUC, see http://en.wikipedia.org/wiki/Flash_of_unstyled_content

The author,

Heydon is the creator of Typical. He is a Web Designer, Developer and Typographer. His icon fonts are available from Font Squirrel and you may wish to use his AngularJS-built lorem ipsum tool, Paragrabbr. Heydon is passionate about semantic HTML and web typography. He has written about User Experience Design and coding for Smashing Magazine.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>