logo

Presenting at 2023 WebConf: My Insights on Icon Fonts for Web Design

Over the past ten years, the web an internet has seen significant changes. At 2023 WebConf Taiwan, we not only looked back at the development of the web, but also focused on the future, highlighting emerging trends and web technologies.

WebConf provides many insights into the direction the industry is heading, helping businesses understand the future of web development. From the rise of Artificial Intelligence (AI) and Machine Learning (ML) to the growing importance of mobile optimization and responsive design, the conference dives deep into how we can stay competitive in an era of rapidly evolving web technologies.

For me, it was an incredible opportunity to share my knowledge and expertise with a diverse audience, specifically focusing on font applications in front-end website display. Additionally, I had connected with remarkable individuals and learned about trends in Web Security and DevOps, enriched my understanding of the web.

While SVG icons have gained widespread popularity in web design, I presented a talk about The Renaissance of Icon Fonts, introducing the use of variable and color fonts in websites. The positive feedback I received was truly motivating, especially knowing that my talk inspired some attendees to take actionable steps in improving their UI/UX design.

How To Insert Icons In Web Page?

  1. Icons as Images: In the early days of the internet, icons were treated as small images embedded with the <img> tag. While simple to use, bitmap images would distort when resized, though they met the needs of that time due to limited web speeds and mostly text-based content.

  2. CSS Image Sprites: Game developers initially used large combined images (sprites) to display different parts on screen efficiently. This method was adopted for web icons in the early 2000s via CSS, reducing server request times. However, with varying screen sizes, the limitations of bitmap icons became evident, pushing for scalable vector-based solutions.

Example of Image Sprites: This image contains three navigation images and three images to use for hover effects. Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image. (Source: W3 schools)

Example of Image Sprites: This image contains three navigation images and three images to use for hover effects. Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image. (Source: W3 schools)

// Example of Image Sprites
#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
  1. Icon Fonts: By 2010, designers started embedding icons into font files, using them as text that could be easily customized with CSS. Services like Font Awesome made this accessible, but anti-aliasing (反鋸齒) effects meant for text sometimes caused icons to appear blurry on high-resolution screens.
Icon as text with anti-aliasing. (Source: simurai.com)

Icon as text with anti-aliasing. (Source: simurai.com)

  1. Inline SVG: Recently, SVGs became the standard for scalable, responsive icons, replacing icon fonts due to their support for gradients, animations, and lack of anti-aliasing issues. Inline SVGs, embedded directly in HTML, are now widely used, though for simple icons, icon fonts might still offer a more convenient alternative.

My speech revisits the potential for icon fonts to make a Renaissance, exploring how they can still be creatively used in modern web design.

Input: Pseudo Element & Ligatures

Since icon fonts treat icons as text, the first challenge is, How to input this TEXT?

  1. Font Awesome / Classes and Pseudo-elements: Once the necessary CSS for Font Awesome is imported, adding an icon like a house is as simple as inserting <i class="fa-solid fa-house"></i> in the HTML. Behind the scenes, the fa-solid class specifies the Font Awesome 6 Pro font, while fa-house uses a pseudo-element to insert the character \f015, corresponding to the House icon.
House icon in code point F015. (Source: Font Awesome)

House icon in code point F015. (Source: Font Awesome )

  1. Google Material Symbols & Icons / OpenType Ligature Feature: Unlike Font Awesome, Google Material Symbols & Icons takes a different approach. It uses OpenType ligature feature. Google has programmed the Material Symbols Outlined font so that when the word home is typed, it automatically displays the icon at code point U+E88A. To insert a house icon, you can simply use <span class="material-symbols-outlined">home</span>, which is equivalent to <span class="material-symbols-outlined">&#xE88A;</span>.
House icon in code point E88A. (Source: Google Material Symbols & Icons)

House icon in code point E88A. (Source: Google Material Symbols & Icons )

Using a descriptive name like fa-house or house is much more intuitive than directly inputting a character code like \f015 and &#xE88A;. While the class name doesn’t reveal the icon's exact appearance, it at least hints that it’s related to a house, which is much more user-friendly and clearer than typing code point.

Colorful: Revolution of Color Font

We have discussed power of color font here.

Animation: Potential of Variable Font

Multiple Master Technology

In a well-designed font family like Google and Adobe’s Noto series, there are various font weights ranging from the thinnest (Thin, Light) to common weights (Regular, Medium), and the boldest (Bold, Heavy). This range is made possible through Multiple Master Technology (MMT), where designers create multiple extreme metrics (generally the thinnest and boldest), ensuring the control points of path are consistent between masters. This allows interpolation (插值) to generate the intermediate weights.

The variation isn't limited to font weight alone. Designers can also add axes for width, italic slant, serifs, and more, allowing for a vast style of font variations.

Theoretically, infinite variations can be produced by MMT, however, designers typically choose specific values based on practical usage. Most users can distinguish between font weight 300 and 500, but it's harder to see the difference between font weight 500 and 510, so fewer choices are often better for usability.

Applying Multiple Master Technology on letters and illustration. (Source: Typearture)

Applying Multiple Master Technology on letters and illustration. (Source: Typearture )

Variable Font Technology

In 2016, with the release of the OpenType 1.8 specification, Adobe, Apple, Google, and Microsoft introduced Variable Font (VF) technology. This technology advancement embedded the multiple master concept into the final font product. With variable fonts, the task of deciding the weight, width, and other styles shifted from designers to users.

Instead of installing multiple files for different font styles, users only need one variable font file, which can be adjusted to display any variation by modifying specific axes. Benefit of single file is that significantly reduces file size, especially in the font that included thousands of glyphs, such as Chinese characters. For web use, this means faster load times and the ability to display more font styles without multiple fetching times.

When implementing variable fonts on a webpage, users can adjust axes using the font-variation-settings property in CSS. For instance, with the variable font Epilogue, which supports the weight axis (wght), you can set font-variation-settings: 'wght' 100; for a thinner style, or font-variation-settings: 'wght' 900; for a thicker one.

Different weight axis of Epilogue. (Source: Google Fonts)

Different weight axis of Epilogue. (Source: Google Fonts )

Similarly, fonts like Anybody, which support width variation (wdth), can be adjusted between narrow and wide settings using similar commands.

Different weight and width axes of Anybody. (Source: Google Fonts)

Different weight and width axes of Anybody. (Source: Google Fonts )

Smoother Transitions and Keyframes

Another advantage of variable fonts is how naturally they handle transitions between styles. For instance, if you wanted to highlight a word by changing its weight when hovering, you'd switch between a regular and bold version of the font. With variable fonts, the transition becomes smooth. Both the thin and bold styles are derived from the same font file, and by adding CSS transition, the change in weight feels more like the text is growing, rather than being suddenly swapped.

In addition to simple transitions, variable fonts allow for more complex animations using keyframes. For instance, with Open Sans, a font that supports both weight (wght) and width (wdth) axes, you can create a cyclical animation where at 0%, the font is at weight 100 and width 85, then grows to weight 700 and width 100 by 60%, and returns to the original settings at 100%.

From Fonts to Icons

The idea of a variation axis can be extended to icons. Imagine a user interacting with a hamburger menu icon: three horizontal lines we often see to toggle sidebars. When the sidebar is opened, the icon could change into a close button, and when clicked again, it could transform back into the three lines.

If we approach this transition from an SVG design perspective, we would need to handle both the rotation of the lines and the transformation of three lines into two. For instance, we can treat the top, middle, and bottom lines as nth-child(1), nth-child(2), and nth-child(3) respectively. The top line rotates 45 degrees, the bottom line rotates -45 degrees, and the middle line fades out to create the effect. This simple animation is relatively easy.

Simple animations like the hamburger menu transition are still easy to set, but the more elements there are, the harder it becomes to set everything. Take a weather icon for example. It’s common to use an icon of raindrops falling from a cloud to indicate rainy weather. To animate this, we could animate the raindrops falling from the cloud and disappearing as they hit the ground. From the SVG perspective, this would require assigning different nth-child values to each raindrop, setting their fall direction and speed, and gradually shrinking the size of the drops to simulate their disappearance.

Use inline SVG in simple and complex icon.

Use inline SVG in simple and complex icon.

Now, let’s consider this from a font perspective. The process becomes much simpler, akin to creating variable fonts with multiple axes of variation. You only need to design a master for the start and end states. For instance, with a weather icon, you can design a master where raindrops are hidden inside the cloud and another where the raindrops have fallen. Everything in between can be generated through interpolation, leaving the intricate transitions to mathematics rather than manual adjustments.

Then, let’s define an axis for the animation called anim or time, assigning the start value as 0 and the end value as 100. In the starting master, the raindrops are hidden in the cloud, and in the end master, the drops fall down and shrink at the horizon, disappearing. When implementing this in a webpage, you would simply adjust the CSS with keyframes like 0% {font-variation-settings: 'anim' 0;} and 100% {font-variation-settings: 'anim' 100;}, letting the font’s built-in interpolation handle the animation.

Browser Support of Variable Font

Variable fonts are now supported by all major browsers. Combining this technology with COLR/CPAL (v0) allows for the display of colorful variable fonts on websites.

A interesting example of this is the work of artist Arthur Reinders Folmer and his studio Typearture, which has released a series of playful variable color fonts and animations. While these designs are more experimental than practical, they reveal the incredible potential of fonts under today’s technological advancements.

Demo of Variable Color Font, designed by Typeface. (Source: Typeface)

Demo of Variable Color Font, designed by Typeface. (Source: Typeface )

Another type foundry, Underware, has taken COLR/CPAL v1 technology to new heights. Their Plakato Color Grade font includes 1,360 built-in color palettes and offers adjustable axes for red, blue, green, color noise, and color shift. Users can fine-tune the colors using font-variation-settings, or they can let the system randomly generate unexpected color combinations. This approach beautifully demonstrates the creative possibilities of color palette functionality within fonts, offering a level of control and flexibility that was previously unimaginable.

Demo of Plakato Color Grade. (Source: Underware)

Demo of Plakato Color Grade. (Source: Underware )

Through these examples, we can see that variable color fonts are more than just a design trend. They are a powerful tool that is redefining the boundaries of typography in the digital age.

Future of Variable Color Font

As we can see from the above discussion, when compared to SVG, color and animation do not constrain icon fonts. With the support of OpenType features, colors and animation can be easily modified directly via CSS. This approach makes keyframe animations easier to implement.

Furthermore, unlike the lengthy path data of inline SVGs, icon fonts offer better readability in HTML. When updating icon versions, instead of searching through numerous files for the previous version, you can simply update the font file.

However, Adobe Illustrator, which is widely used for drawing vector shapes, has a much higher market share compared to pro font design software like Glyphs. Tutorials and resources are also more focused on Illustrator.

For UI/UX designers or front-end developers, inserting an inline SVG is as simple as copying the vector paths from Illustrator and pasting them into the HTML. On the other hand, designing an entire icon font involves not only drawing the icons, but also mastering the necessary font packaging techniques to ensure that the font file can be correctly read by web browsers.

Compared to SVGs, the process of creating an icon font from scratch poses a much higher barrier unless you rely on third-party services. This explains why most websites still prefer SVGs for icons.

However, for companies looking to establish a unified product language, designing a comprehensive and culturally versatile icon system is a key requirement for achieving cross-platform consistency and internationalization. In this context, the use of icon fonts provides a promising direction, as demonstrated by Apple SF Symbols.