Font-icons

Justin Obara obara.justin at gmail.com
Mon Mar 25 12:42:53 UTC 2013


Here's an example of a clock that I believe is made using font ligatures.
Each time on the clock face is represented by a ligatures such as "08:40:20" (hh:mm:ss).

http://timepiece.inostudio.de

Thanks
Justin

On 2013-03-24, at 2:14 PM, Colin Clark <colinbdclark at gmail.com> wrote:

> Hi Arash,
> 
> It looks like this is a proprietary font, so I don't think we'll be able to use it. 
> 
> Also, I think we need to be careful not to assume that just because there is "some text" that it will be accessible to screen reader users in any meaningful way. One of the keys to making graphs and charts like this more accessible to those who want alternatives to visual information is provide a "reasonable equivalent." I'm not entirely convinced that "25+5+100+45+23" is a meaningful, descriptive alternative to the chart which is rendered from this data.
> 
> For things like decorative or navigational icons, I can see the potential for this approach. But for richer presentations such as charts and graphs, I think it's probably not viable in most cases. Unless I'm missing something, I think we're better off rendering these using Canvas or SVG and providing descriptive labels for them.
> 
> Colin
> 
> ---
> Colin Clark
> http://fluidproject.org
> 
> On 2013-03-22, at 12:18 PM, "Sadr, Arash" <asadr at ocadu.ca> wrote:
> 
>> Hi all,
>> 
>> I found this font that easily creates graphs by using ligatures. "OpenType features are used to interpret and visualize the data. The data remains as editable text, allowing for painless updates."
>> (https://www.scribbletone.com/typefaces/ff-chartwell) 
>> I think that this takes our advantages with ligatures to another level, and could make many elements more accessible. 
>> I have also attached an image to the JIRA, showing how it works.
>> 
>> Arash
>> 
>> On 2013-03-21, at 1:48 PM, "Sadr, Arash" <asadr at ocadu.ca> wrote:
>> 
>>> Hi Everyone,
>>> 
>>> We had a community workshop discussion a few weeks ago about font icons and talked about few options (e.g Font Awesome, IcoMoon, symbolset), and decided to explore them more.
>>> 
>>> Creating icons is fairly easy, and there are a lot of free font-icon sets online. The issue is not the icons, but an application that gives us the ability to create a font out of our icons, and a way to create metadata such as ligatures for them. 
>>> 
>>> The reason why we think Icomoon http://icomoon.io/ is our best option for now, is because it provides us with a free offline application that gives us the ability to add our own icons (vectors) to their free icon sets. It also gives us the option to create ligatures for those icons.
>>> 
>>> I have created a JIRA “Using Icomoon to create font-icons to be used as icons and elements for UI options” (http://issues.fluidproject.org/browse/FLUID-4934) about this, and have added some questions and thoughts.
>>> Using Font icons is great because we can easily: 
>>> 	• Change the size and color - Shadow their shape 
>>> 	• Have different icon sizes in the same font 
>>> 	• Do everything image based icons can do, like change opacity or rotate. 
>>> 	• Add strokes to them with text-stroke or add gradients/textures with background-clip: text; 
>>> 	• Convert them to text 
>>> 
>>> We are also going to have some drawbacks: 
>>> 	• We cannot have two-toned icons. 
>>> 	• We cannot have other languages in metadata, and space is not allowed between the words in the metadata. 
>>> 	• Alignment could become an issue 
>>> 	• IE8 and IE9 do not support font-icons with ligatures. 
>>> 
>>> At this point, I have a few questions that I think need to be answered before we could explore further:
>>> 
>>> 
>>> 	• Can we fix the issue with IE8 and IE9?
>>> 	• What happens if we could not find a way around IE8 and IE9?
>>> 	• Do we support other language and text inputs, and would it be a problem if we could not use them?
>>> 	• Are ligatures going to work with screen readers in our supported browsers?
>>> 
>>> 
>>> I have created a font icon pack with ligatures, including some of our icons that you could download from the JIRA and play around with. I also have attached an image, showing icons as fonts, and their abilities.
>>> 
>>> It would be great to hear your feedback and thoughts on this issue, and also on the JIRA, since it is my first one.
>>> 
>>> Arash
>>> 
>>> _______________________________________________________
>>> 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
>> 
>> _______________________________________________________
>> 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
> 
> _______________________________________________________
> 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




More information about the fluid-work mailing list