What are the pros and cons in Sketch of outlining icon fonts over leaving them as fonts?

Question

I'm unsure which method is better, and also which one enables the easiest handover to a developer.

Answer 1

TLDR: if you are using an icon in an inline context (side by side with text), or you are using several different icons, provide it as a font.

If not, then give them the image asset (preferably as an SVG!)

The Long Answer

What devs think about when they look at design specs

The answer depends on the context of the icon in the design. It requires a bit of knowledge on how devs look at designs, and what matters to them when implementing them. The developer, at the end of the day, is likely more concerned about best practices than design fidelity, although it is her/his job to marry the two as harmoniously as possible. So it's nice when we designers can help them out a little.

HTML Element display types

There are many types of elements in HTML: block level and inline are the main display contexts at play here. There are others as well, such as inline-block, flex, grid, and more. A developer must look at your design and surmise the context of each portion, using HTML tags and/or CSS styles to match the rendered element's display type to its usage context.

This has both visual and semantic implications. For example, a block level element doesn't inherently allow other elements to live side by side with it, and it also implies a section with a broader scope/significance than an inline element.

Why icon fonts are useful for devs

(Because they really have no purpose for designers)

If you give them a font file that contains icons as characters, the devs will fetch the it from the server and render it inline alongside text. Not only is this semantically correct, it optimizes the downloading of the icons: one small download gives the client the entire set, vs multiple small downloads for each. Size-wise, the difference is marginal, but the optimal webpage makes as few requests to the server as possible.

The above works best when using a well made icon font, such as the material icons set from Google. There are many to choose from though. FontAwesome is another good one. Services like icomoon and the noun project are wonderful sources for good icons which can be hand picked and then packaged as font files.

I don't necessarily agree with @ColinAzeltine's answer, as there is no reason a dev cannot set line height or padding on an inline element (it does require it being displayed as an inline-block, which, if you had included spacing that is atypical of normally set text, is the semantically correct choice anyway). If the icon font is well made, then there is no need to worry about line height.

Answer 2

I think icon fonts are pretty awesome. I really like working with them a lot, and I think, in most cases, that’s totally fine. There is one major drawback about them, though.

An icon font is just like any other font that you might be using, but it’s just made up, literally, of icons.

Answer 3

I work as a senior designer & developer, and when I am designing in Sketch & know that I will be developing the same project, I always make sure to set my line heights on icon fonts to an equal value of the type size.

The problem lies in line height. When some developers open your file & look for sizing/pixel values, they might not notice if there is extra 'padding' between your icons and other elements in your design.

Plainly speaking, if you're not going to manually set the line height of each of your icons, use a vector (outlined) icon instead. The only exception to this might be FontAwesome/Black Tie. I'm not sure if they are set to a line height of 1 by default.