For font smoothing, Zach Leatherman argues that it is better to use the default antialiasing (subpixel) instead of grayscale antialiasing.
However, there is an issue with subpixel antialiasing on macOS. It adds extra pixels. If you design a glyph on a pixel grid and draw a straight line that exactly fits in pixels, then use the default subpixel antialiasing on macOS, it’ll add some gray pixels around your line. That’s unexpected. A line that fits in pixels should not get rendered with a bunch of extra pixels around it. On the other hand, grayscale antialiasing does not add these extra pixels. It is the standard antialiasing which is also used for rendering SVG and any shape drawn with CSS.
This demo shows a simple glyph with and without grayscale antialiasing. If you zoom in on pixels, you can clearly see the difference and how subpixel antialiasing is adding some extra, unwanted pixels.
To zoom in on pixels, you can either take a screenshot and then use an image editing program like Photoshop, or you can use the zoom functionality in macOS, which can be enabled from System Preferences → Accessibility → Zoom → Check “Use scroll gesture…”. Make sure to uncheck “Smooth Images”.
On macOS, the default font-smoothing makes fonts appear bolder than they’re supposed to. As a workaround for this issue, use the following CSS properties:
After several months of hard work, we are proud to introduce Lindua, a new icon pack with a unique and distinctive style. This premium icon pack is now available for $69. We hope you enjoy using this set in your projects.
We are also unveiling Vect.com, a new domain that we are planning to use as IcoMoon’s new home in future.
Strokes Get Imported
The IcoMoon app no longer ignores strokes upon importing SVGs. They still get ignored when you want to generate fonts or CSH files (which don’t support strokes). But for other cases, e.g. when generating PDFs, you can use strokes without problem.
Preventing Icon Font Issues with Browser Extensions
There are some browser extensions that allow changing fonts. Such extensions may be used by people with dyslexia. Some of these extensions (such as Font Changer and dyslexie) affect all fonts on the page, even icon fonts. This is obviously a bug in the extension, but to prevent issues like this, you can add !important to your icon font’s font-family. Another solution would be to use a CSS selector like .icon, .icon:before.
The CSS generated by the IcoMoon app has been updated to address this issue.
File Size Comparison of SVGs and Icon Fonts
IcoMoon lets you use your icons both as SVGs and icon fonts. There are pros and cons to both methods. SVGs are recommended in most cases; but if you need a lot of icons in your UI, fonts can provide better file size compression. The following is a comparison of the same set of icons containing 170 icons in both SVG and font formats. The SVG file has been minified and it contains all the <symbol> definitions ready to be inserted via the <use> tag. Files used in this comparison have been linked below.
* WOFF 2.0 files should not be gzipped because they are already compressed using the “brotli” algorithm.
Why TTF for embedded fonts?
Embedding fonts in CSS can help improve the performance of your page and significantly decrease its rendering time. Linearicons.com uses an embedded TTF font (called AlphaNum20) for its main type.
But what is the best way of embedding fonts? Should you embed all font formats? How about WOFF 2.0 fonts?
The short answer is to only embed the font in one format, which is TTF. The IcoMoon app can do this for you (Generate Font → Preferences → Encode & Embed Font in CSS).
To decrease the size of the CSS as much as possible, only one font format should be embedded. Looking at the caniuse page for TTF support, we can see that it has the best browser support compared to other formats. As noted on the caniuse page, if a TTF font is set to be "installable", then IE would support it without any issues. Fonts generated by IcoMoon are set to "installable" and they have been tested to make sure they work in IE.
Embedding TTF would also yield a smaller CSS file compared to embedding WOFF. That is because WOFF fonts are basically TTF with a wrapper/overhead, and WOFF 1.0 uses gzip compression. Therefore, if the CSS is to be gzipped, embedding TTFs (which don’t have extra WOFF headers) would result in a smaller file size.
For the very best optimization, you might want to consider using WOFF 2.0 fonts (which offer better compression compared to gzip); but they are not widely supported yet. Therefore, if you decide to embed a WOFF 2.0 font, you would additionally need to embed the font in other formats to compensate for its lack of browser support; which means an unnecessarily larger CSS. The conclusion is that for embedding, TTF fonts provide both the best optimization and browser support, without any drawbacks compared to WOFF or other formats.
WOFF 2.0 Fonts Have Arrived!
If you are using a paid plan, your font packs will now contain WOFF 2.0 fonts too. This new format provides improved compression. The following is a size comparison of the WOFF and WOFF 2.0 versions of the icon font that is used in the IcoMoon app itself (with 75 glyphs):
WOFF: 12 KB (6.2 KB gzipped)
WOFF 2.0: 4.8 KB (no gzip, see note below)
In this case, the WOFF 2.0 version is about 22% smaller than the gzipped WOFF file.
Note that since WOFF 2.0 uses its own compression algorithm (brotli), server side gzipping should be avoided.
Welcome PDF Icons in IcoMoon!
The latest update to the IcoMoon app introduced the option to generate PDF documents. To generate PDFs, go to the “Generate SVG, PNG, PDF” tab and check the “Include PDF” checkbox in the “Preferences” panel.
Some use cases for PDFs:
Even though SVG images can’t be imported to Adobe Photoshop, PDFs can be imported as vector “smart objects”.
You can use PDFs in Xcode 6 for iOS and OS X app development.
Icon Pack Updates
IcoMoon’s Ultimate and Essential packs were updated. The Ultimate pack now features over 1600 icons and the Essential pack comes with 950 icons.
IcoMoon’s free icon pack was also updated. It now contains 490 icons and it comes with an installable ligature font (in TTF). You can view/download it on github.
Apple Uses IcoMoon!
Interesting news! Apple is using an icon font generated by IcoMoon on their page for celebrating 30 years of Mac.
