Typography for Fluent icons

microsoft / fluentui-system-icons

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

https://aka.ms/fluentui-system-icons

MIT License

5.74k stars 502 forks source link

Typography for Fluent icons #49

Open wayne-shih opened 4 years ago

wayne-shih commented 4 years ago

Hey ya, love the new icons! First found out about this when you guys released the figma communty doc. So glad to see this repo for android/ios(/master) being released.

Was wondering a few things re typography in the icons...

I see there's currently a mix of using custom type (eg. Access Time, FPS 960) vs ones that are typeset in Univers(?) (eg. Cellular 4G, Text Number List LTR)
- Is there a plan to make this consistent?
- & potentially open sourcing it too (if you look at OpenMoji -- they've released a basic latin and numeral character set for use in their emojis https://openmoji.org/styleguide/#typography) Having a similar one for Fluent would be a good addition as part of Issue #44 if external collaboration guides are produced

— —

All icons below shown as at Release 1.1.29 0cf1b6500225c81edf80593fc365557f5b90a528

mdtauk commented 4 years ago

A basic set of Letters and Numbers could be developed for use with these icons - to aid consistency and help make the icons feel cohesive.

jasoncuster commented 4 years ago

Hey @wayne-shih & @mdtauk - thanks for the follow up. Yes, there's definitely some clean up that's on our list for sure when it comes to type. We will be leaning on the custom set that is in there so far to build off of, and cleaning up the straggler type (looking at you Segoe UI).

Also want to note that the calendar icon with the type, is dynamically added to our products, and is just an example of how it looks in Android. I'm hoping we can address this soon, but you know how time is right now - it's so slippery...haha.

mdtauk commented 4 years ago

For a cross platform Icon set, not leaning on one platform's font is useful, but scope for dynamic icon generation (Icon frame with text overlayed or masked) is useful to design for.

Apple has a neat solution for it's icon font - in that the stroke widths are not designed for pixel grids, but to match the text stroke widths, and would be hinted. - but that ties the font style to icon style, in a way that Cross Platform is not considered.

jasoncuster commented 3 years ago

Hey gang, note we're actively working on this in the last few updates. Please keep watching and let us know if you're digging the updates.