fluentui-system-icons icon indicating copy to clipboard operation
fluentui-system-icons copied to clipboard

Published 20 hours ago • verified publisher icon microsoft

Typography for Fluent icons

Open wayne-shih opened this issue 5 years ago • 4 comments

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

wayne-shih avatar Jul 14 '20 02:07 wayne-shih

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.

mdtauk avatar Jul 14 '20 03:07 mdtauk

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.

jasoncuster avatar Jul 15 '20 00:07 jasoncuster

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.

mdtauk avatar Jul 15 '20 00:07 mdtauk

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.

jasoncuster avatar Jan 16 '21 01:01 jasoncuster