Thoughts on icon fonts?

[Kevin Grandon]

Hi All,

I'm currently working with UX on a prototype of utilizing an icon font. Using an icon font would have the following advantages:

1 - Better performance. I profiled and noticed that on average an icon font would save roughly 6 ms per icon replaced.
2 - Better scalability. As they are vectors, they could scale to any device size/dimension seamlessly. No need for @2x images.

Implementation wise, it would look like this:

1 - A new font file is generated from SVGs, and packaged with the other MozTT fonts.
2 - The font would be loaded from the system level, and we would map icon CSS to the private use unicode range.
3 - There should be a transparent migration for apps, as we can simply update the building blocks. Or potentially we could force apps to include a new small CSS file.

If this looks good, next steps would be to build out the prototype more and file bugs for components/apps which should take advantage of the icon font. I'd love to hear what you guys think of this approach.

Thanks,
Kevin Grandon

[Eric Shepherd]

On 2013-03-19 01:15:40 +0000, Kevin Grandon said:

> If this looks good, next steps would be to build out the prototype more
> and file bugs for components/apps which should take advantage of the
> icon font. I'd love to hear what you guys think of this approach.

Please keep me apprised; if this actually happens, it would obviously
impact the Firefox OS UX guide documentation, and likely other docs as
well.

Thanks,

--
Eric Shepherd
Developer Documentation Lead
Mozilla
Blog: http://www.bitstampede.com/
Twitter: @sheppy

[Tim Chien]

Agree that icon font could be good approach.

However, loading font in the system level risk of creating another
platform-specific Wingdings <http://en.wikipedia.org/wiki/Wingdings> font.
If we are not planning to ship a font to the general web, I will strongly
against doing so. At least, platform font available to general web should
not contain PUA code points, but instead the Emoji code points, if possible.

We need to figure out how to share assets between apps without repackaging
it in every application.zip. It's harder to figure out but it's the right
approach.

<http://en.wikipedia.org/wiki/Wingdings>

On Tue, Mar 19, 2013 at 9:15 AM, Kevin Grandon <kgra...@mozilla.com> wrote:

> Hi All,
>
> I'm currently working with UX on a prototype of utilizing an icon font.
> Using an icon font would have the following advantages:
>
> 1 - Better performance. I profiled and noticed that on average an icon
> font would save roughly 6 ms per icon replaced.
> 2 - Better scalability. As they are vectors, they could scale to any
> device size/dimension seamlessly. No need for @2x images.
>
> Implementation wise, it would look like this:
>
> 1 - A new font file is generated from SVGs, and packaged with the other
> MozTT fonts.
> 2 - The font would be loaded from the system level, and we would map icon
> CSS to the private use unicode range.
> 3 - There should be a transparent migration for apps, as we can simply
> update the building blocks. Or potentially we could force apps to include a
> new small CSS file.
>

> If this looks good, next steps would be to build out the prototype more
> and file bugs for components/apps which should take advantage of the icon
> font. I'd love to hear what you guys think of this approach.
>

> Thanks,
> Kevin Grandon
> _______________________________________________
> dev-b2g mailing list
> dev...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-b2g
>



--
Tim Guan-tin Chien, Senior Front-end Dev., Mozilla Corp. (Taiwan)

[JOSE MANUEL CANTERA FONSECA]

Sounds like an interesting approach. From a development perspective, the
only concern I have is the flexibility and the ability to respond to icon
changes using this approach. From what I have understood this approach
would mean that every time a system icon changes that would need to be
packaged in MozTT, thus that would require in essence a Gecko change.

Am I right?

best


El 19/03/13 02:15, "Kevin Grandon" <kgra...@mozilla.com> escribió:

>Hi All,
>
>I'm currently working with UX on a prototype of utilizing an icon font.
>Using an icon font would have the following advantages:
>
>1 - Better performance. I profiled and noticed that on average an icon
>font would save roughly 6 ms per icon replaced.
>2 - Better scalability. As they are vectors, they could scale to any
>device size/dimension seamlessly. No need for @2x images.
>
>Implementation wise, it would look like this:
>
>1 - A new font file is generated from SVGs, and packaged with the other
>MozTT fonts.
>2 - The font would be loaded from the system level, and we would map icon
>CSS to the private use unicode range.
>3 - There should be a transparent migration for apps, as we can simply
>update the building blocks. Or potentially we could force apps to include
>a new small CSS file.
>
>If this looks good, next steps would be to build out the prototype more
>and file bugs for components/apps which should take advantage of the icon
>font. I'd love to hear what you guys think of this approach.
>
>Thanks,
>Kevin Grandon
>_______________________________________________

>dev-gaia mailing list
>dev-...@lists.mozilla.org
>https://lists.mozilla.org/listinfo/dev-gaia
>



________________________________

Este mensaje se dirige exclusivamente a su destinatario. Puede consultar nuestra política de envío y recepción de correo electrónico en el enlace situado más abajo.
This message is intended exclusively for its addressee. We only send and receive email on the basis of the terms set out at:
http://www.tid.es/ES/PAGINAS/disclaimer.aspx

[JOSE MANUEL CANTERA FONSECA]

El 19/03/13 05:05, "Tim Chien" <timd...@mozilla.com> escribió:

>Agree that icon font could be good approach.
>
>However, loading font in the system level risk of creating another
>platform-specific Wingdings <http://en.wikipedia.org/wiki/Wingdings> font.
>If we are not planning to ship a font to the general web, I will strongly
>against doing so. At least, platform font available to general web should
>not contain PUA code points, but instead the Emoji code points, if
>possible.
>
>We need to figure out how to share assets between apps without repackaging
>it in every application.zip. It's harder to figure out but it's the right
>approach.

Oh yes. Totally agree. Furthermore, 3rd party app authors would also need
to use them.

>
><http://en.wikipedia.org/wiki/Wingdings>
>
>
>On Tue, Mar 19, 2013 at 9:15 AM, Kevin Grandon <kgra...@mozilla.com>
>wrote:
>

>> Hi All,
>>
>> I'm currently working with UX on a prototype of utilizing an icon font.
>> Using an icon font would have the following advantages:
>>
>> 1 - Better performance. I profiled and noticed that on average an icon
>> font would save roughly 6 ms per icon replaced.
>> 2 - Better scalability. As they are vectors, they could scale to any
>> device size/dimension seamlessly. No need for @2x images.
>>
>> Implementation wise, it would look like this:
>>
>> 1 - A new font file is generated from SVGs, and packaged with the other
>> MozTT fonts.
>> 2 - The font would be loaded from the system level, and we would map
>>icon
>> CSS to the private use unicode range.
>> 3 - There should be a transparent migration for apps, as we can simply
>> update the building blocks. Or potentially we could force apps to
>>include a
>> new small CSS file.
>>
>> If this looks good, next steps would be to build out the prototype more
>> and file bugs for components/apps which should take advantage of the
>>icon
>> font. I'd love to hear what you guys think of this approach.
>>
>> Thanks,
>> Kevin Grandon
>> _______________________________________________

>> dev-b2g mailing list
>> dev...@lists.mozilla.org
>> https://lists.mozilla.org/listinfo/dev-b2g
>>
>
>
>
>--
>Tim Guan-tin Chien, Senior Front-end Dev., Mozilla Corp. (Taiwan)

[Josh Carpenter]

Is it possible to target individual characters for replacement by images? eg: we utilize flat icons inside a font as much as possible (tabs, buttons, settings etc) for exactly the good reasons cited, and when we inevitably need fancier icons in specific places, we target the character for replacement with a nice PNG. That seems like it would also degrade gracefully.

--
Josh Carpenter (PTO March 19-26)
Sent from mobile

rnow...@gmail.com wrote:

>Kevin,
>I´ve been doing some test with icon fonts, I think it´s the way we should go for future releases, not only for scalability, and easy to change colors via css which is great, but also because of icon maintenance. We have to rethink how to store icons in a shared folder, because every time an icon changes we need to check each app and replace whitin different folder structures.
>The only limitation is how some icons are designed, for instance setting icons have a gradient color, a drop shadow and an inset shadow. Both the gradient and the inset shadow are not supported in css3.
>But for other cases like headers and toolbar icons, which are in plain white color icon fonts works great.
>
>Arnau

[Kevin Grandon]

Initially I would start only with building blocks, and expand as possible. The "primary action" and "media" icon sets are probably the place to start. These are all flat icons and would be good candidates for an icon font.

This would give us ~100 icons and should cover almost all of building blocks.

[ARNAU MARCH CASTILLO]

Josh,
Both methods could be use together and choose one or another depending on de case, let´s say we use flat icons for tabs, we could create a font with all required icons, each icon will be linked to a letter or a css class.
But for settings we don´t need to use that font, and leave the css as is.

Arnau

On Mar 19, 2013, at 3:49 PM, Josh Carpenter <jcarp...@mozilla.com>
wrote:

> Is it possible to target individual characters for replacement by images? eg: we utilize flat icons inside a font as much as possible (tabs, buttons, settings etc) for exactly the good reasons cited, and when we inevitably need fancier icons in specific places, we target the character for replacement with a nice PNG. That seems like it would also degrade gracefully.
>
> --
> Josh Carpenter (PTO March 19-26)
> Sent from mobile
>
> rnow...@gmail.com wrote:
>
>> Kevin,
>> I´ve been doing some test with icon fonts, I think it´s the way we should go for future releases, not only for scalability, and easy to change colors via css which is great, but also because of icon maintenance. We have to rethink how to store icons in a shared folder, because every time an icon changes we need to check each app and replace whitin different folder structures.
>> The only limitation is how some icons are designed, for instance setting icons have a gradient color, a drop shadow and an inset shadow. Both the gradient and the inset shadow are not supported in css3.
>> But for other cases like headers and toolbar icons, which are in plain white color icon fonts works great.
>>
>> Arnau
>> _______________________________________________
>> dev-gaia mailing list
>> dev-...@lists.mozilla.org
>> https://lists.mozilla.org/listinfo/dev-gaia
> _______________________________________________
> dev-gaia mailing list
> dev-...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-gaia