Iconography

When initially launching the site, an iconfont - compiled through fontello - was used to serve all the icons. The use of an iconfont was expedient and ensured ease of implementation. It also helped keep developing time to the minimum at the time, ensuring the project delivery time was kept within the constrains.

After launch, 3 problems rose quite soon: The styles of the icons were not matching precisely the fonts used on the site, different browsers were rendering the icons in different ways changing stroke/thickness and line-height, and the inline use of specific icons, such as the 'f' for facebook and the 't' for twitter, were interfering with the legibility and readability of the text.

A new set of icons with inline variants was designed to address the legibility and visual coherence issues and a new implementation method - SVG icons - was adopted to address the browser rendering problems.