Mark Hurrell

Interaction Designer

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