Fluid font project proposal

[Jonathan Hung]

Hi Tony,

We have considered ligatures, but opted for the icon-font approach instead
because it was more flexible and provided good accessibility with minimal
markup.

The biggest downside of ligatures is that it can only substitute a single
word with a glyph (or icon) - so any string consisting of multiple words or
has punctuation could not be substituted using a single ligature. We often
run into this situation, so it is less attractive to use ligatures. There
are work-arounds by using roles / aria-label / aria-labelledby, but ATs may
interpret these implementations in less-than-desirable ways.

Right now, icon fonts satisfies our requirements of being easily resizable,
themable (for contrast), accessible, and reasonably easy to implement.
Ligatures, has its uses if you're working with only single words.

I can get more detailed with examples of markup if you like to see that.

Thanks for asking this question! This was something we had internally
talked about early on, but never articulated properly. Hopefully this helps.

- Jon.

On Mon, Nov 17, 2014 at 2:08 PM, Tony Atkins <tony at raisingthefloor.org>
wrote:

> Hi, Jonathan:
>
> Love the idea.  I have been using the C4A icon font plus a few extras in
> the Preference Terms Dictionary.  Have you given any thought to ligature
> support?
>
> Cheers,
>
>
> Tony
>
> On Thu, Nov 13, 2014 at 4:10 PM, Jonathan Hung <jhung at ocadu.ca> wrote:
>
>> Hi everyone,
>>
>> In the Fluid project, we have been using font icons widely in our UI's
>> over the past year. Currently, when a project needs icons we:
>>
>>    - duplicate a font from another project;
>>    - create a new font from scratch;
>>    - or mix-and-match existing glyphs with new glyphs by either
>>    importing multiple fonts in the markup, or by creating another font set
>>    that contains all the glyphs.
>>
>> The unintended consequence is that this creates a maintenance issue when
>> designing, deploying, and using icon fonts.
>>
>> Dana, Justin and I discussed this and would like to put forth the
>> following proposal for discussion:
>>
>>    1. Create a new repository on github which stores SVG files used to
>>    generate fonts.
>>    2. Use a grunt plugin (like grunt-webfont
>>    <https://www.npmjs.org/package/grunt-webfont>) that generates fonts
>>    from SVGs
>>
>> Using github helps solve the maintenance issue, and the grunt plugin
>> helps with the deployment of fonts.
>>
>> This system should also be able to handle generation of multiple icon
>> sets from a configuration file, and allow users to specify their own
>> Unicode PUAs (the unique IDs used in CSS to reference a specific glyph) so
>> that icons have predictable and stable implementation in deployment. We
>> will need to investigate these requirements more closely.
>>
>> I have filed this issue / proposal under
>> http://issues.fluidproject.org/browse/FLUID-5555
>>
>> If a reasonable solution can be found, a similar approach could be
>> implemented in other projects.
>>
>> We welcome your comments.
>>
>> - Jon.
>>
>> --
>>
>> *JONATHAN HUNG*
>>
>> INCLUSIVE DESIGNER, IDRC
>>
>>
>>
>> *T:* 416 977 6000 x3951
>>
>> *F:* 416 977 9844
>>
>> *E:* jhung at ocadu.ca
>>
>>
>>
>> *OCAD UNIVERSITY*
>>
>> Inclusive Design Research Centre
>>
>> 205 Richmond Street W, Toronto, ON, M5V 1V3
>>
>>
>>
>> www.ocadu.ca
>>
>> www.idrc.ocad.ca
>>
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at fluidproject.org
>> To unsubscribe, change settings or access archives,
>> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
>>
>
>


-- 

*JONATHAN HUNG*

INCLUSIVE DESIGNER, IDRC



*T:* 416 977 6000 x3951

*F:* 416 977 9844

*E:* jhung at ocadu.ca



*OCAD UNIVERSITY*

Inclusive Design Research Centre

205 Richmond Street W, Toronto, ON, M5V 1V3



www.ocadu.ca

www.idrc.ocad.ca
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20141118/f9f7a013/attachment.htm>