Font Icons for OpenProject

Keeping track with the rapid development of technical devices is not easy for the people in charge of the user interface design.
The devices’ screens become larger and larger with even higher resolutions and reveal all flaws of the user interface.
Even the small but very detailed screens of mobile devices are posing challenges.
Unless the application icons are included in various resolutions, which makes page loading times multiply, they become blurry when zooming in.

OpenProject suffered from these weaknesses as well.
The icons were very small, not really in line with the rest of the polished user interface and zooming did not improve the view at all.
Moreover, the promised simplicity of customizing the application to make it fit any corporate design or personal preferences, could not be realized as easy as it was strived for.
Adjusting the icon colour was a painful procedure of recolouring the single image files one by one.

Now all of this belongs to the past. Finally, the old images are exchanged for a more stylish monochrome set, embedded in an icon font set.
Besides, we adjusted some views for larger screens, which also includes resizing the common font elements.

What does that mean for you as an OpenProject user?

• Improved performance: Loading one rather small font file is much less time-consuming than loading dozens of files or sprites.
• Customization: You want to give your OpenProject a personal look? - Simply change the font colour via adjusting the CSS, and that’s it.
  The same applies to shadows or whatever you want your icons to look like.
• Scalability: No matter what size of the icon you want to have a look at: it will be nicely sharp.
  No extensive search for all files and recolouring them.
• The improved interface: besides the ‘crispiness’ of the font icons, we took care, that the usage of the symbols across the application is more consistent.
• Software made for enterprises: Using font icons improves the accessibility of your application. The font icons can be given a tag which will be read by a screenreader. This is especially useful for stand-alone icons, which do not have a written notion and would be ignored by a screenreader otherwise.
• Multi-browser compatibility: Fonts are supported equally among the different browsers, whereas there could arise conflicts with partly transparent images. Fonts do not have these problems.

The OpenProject core does now contain a font set, which does also cover current plugins, like meetings, scrum and cost+reporting.

What’s next?

• The first set of font icons is already included in the new Rails 3.2 core. We are now exchanging the whole icon set with fonts for the contet and also for all OpenProject plugins.

Credits?

• The icon for the paperplane was taken from steadysets.com.
• The OpenProject icons come from Le Moign Vincent and his fabulous Minicons icons on webalys.com. Minicons Free Vector Icons Pack is licensed under a Creative Commons Attribution 3.0 Unported License