BBC icons font
Implementing design always comes with a cost. With the rate of changes needed to maintain the rapidly growing BBC's website, these costs can rapidly become unsustainable.
Icons can be a surprisingly costly design element. Despite looking simple, an icon is an abstract visual representation of a piece of information - and in order to make that information accessible for non-visual users (the visually impaired, search engines) it must be simultaneously expressed as text information hidden from view using elaborate code. This means that implementing a suite of over 50 icons - like those introduced by the BBC's Global Experience Language - is an unwieldy, slow & fragile process.
To improve this situation, I utilised increasing browser support for embedded webfonts to convert the suite of icons into a typeface - allowing the icons to sized, coloured and interacted with directly in the webpage using CSS.
- Concept, font creation, HTML & CSS patterns
Adapting the icons
The first step involved importing the icon vectors from numerous documents into a single font file. Then they were scaled down to proportionally match the dimensions of the GEL typeface - Helvetica - when set in the same em-size. Outlines where then tweaked to optimise the glyphs to the pixel grid at common display sizes to encourage crisper aliasing.
Rather than assigning the icons to standard latin or numerical text characters, the icons are mapped to slots within the Unicode Private Use Area. These slots were specifically created to hold characters that fall outside of common linguistic use, such as logos and typographic ornaments.