SF Symbols

In addition to SwiftUI Apple also introduced SF Symbols at WWDC. Think of it as the Glyphicons that ship with Bootstrap, but then for iOS/iPadOS/tvOS apps.

SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes.

This was long overdue.

Each icon comes in comes in nine weights (from ultralight to black) and three sizes (small, medium, and large), which make them usable in just about any context they appear in: regular text, buttons, menus, … it’s all covered.

As outlined in WWDC2019 Session 206 – featuring @inferis who worked on it – they’re very easy to use them. Creating your own also is a breeze. Nice work, Tom!

One lesser detail about these though, is that some icons are only allowed to be used for referring to one of Apple’s apps. This seems logical for stuff like Face ID (which has a very specific icon), but is very limiting for apps such as Mail that have a very generic icon (e.g. the enveloppe):

Introducing SF Symbols WWDC2019 Session 206 (video + slides) →
SF Symbols →

Color Emoji in Windows 8.1 —The Future of Color Fonts?

winemoji

With Windows 8.1, Microsoft’s operating system now also supports color emoji. But they did it in a very different way than Apple and Google. Instead of using PNG images, they introduced a support for layered vector glyphs!

Reminds of that neat trick where one would layer webfonts/icofonts on top of eachother, all in a different color (e.g. Forecast Font).

Best thing above all about the technology: it’s backwards compatible.

Color Emoji in Windows 8.1 —The Future of Color Fonts? →

Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices

grunticon

grunticon takes a folder of SVG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder.

Just add grunt.loadNpmTasks('grunt-grunticon'); to your Gruntfile.js gruntfile along with a few config params and you’re good to go.

grunticon — A mystical CSS icon solution →

In Defence of the Floppy Disk Save Symbol

Kids-Today-1

Those who believe that the floppy cannot represent saving a document because nobody uses real floppy disks anymore miss an important point: while symbols initially piggyback on the meaning we assigned to a material object in order to stand in for something more abstract, once a symbol is used often enough, the symbol itself is enough to carry meaning, and the material object is no longer important.

In Defence of the Floppy Disk Save Symbol →

(via Cameron Moll)

Fontello – iconic fonts scissors

This tool lets you combine iconic webfonts for your own project. With fontello you can:

  1. shrink glyph collections, minimizing font size
  2. merge symbols from several fonts into a single file
  3. access large sets of professional-grade open source icons

    4. First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle.

Source available on GitHub

Fontello →