In short:
Regarding icons fonts, icon size usually adjusts to the size of the text in which it was inserted. So, text size becomes a decisive parameter. Take Bootstrap3, for example. Its base text size is 14px, so any icon inserted in this text icon will be scaled to 14px. And here lies the problem: not all icons are optimized for such small sizes. They look distorted, and often unrecognizable.
Let’s consider some of the most popular icon fonts below.
Bootstrap3 is the most popular css framework. And it’s base text size is 14px. This means that icons should also correlate with this size.
However, Bootstrap3 uses Glyphicons, which, for some unknown reason, are optimized for 24px.
On top of that, Glyphicons is a standalone product with a separate license, which sometimes may complicate things a bit.
FontAwesome icons are 14px, yet many of them don’t look that good in small sizes:
In Bootstrap 4, the newer version of Bootstrap3, base text size is 16px.
Now we need 16px icon font. Where could we have it? We’ll talk about it later.
Icons in material design are optimized for 24px. Even though the text size is 14 px.
Perhaps it’s because of Google’s desire to target Android Developers. But who knows.
A bit less popular framework, Foundation, uses the very odd 14.4px size for icons. However, the icon’s placeholder or is still 16px.
Foundation icons are oriented for 16px text, yet the vectors themselves are not quite optimized: there are still small details that are not recognizable.
So, as web developers, we need more good icon fonts, that are optimized for 16px text size. Or… Could we have at least one? Well, there is one.
Discover how machine learning can automate tasks, generate design inspiration, and optimize collaboration.
Discover the power of the first and only AI image generator made by professional artists.
Essential tips for team managers and members to enhance collaboration, improve communication, and achieve exceptional…
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
This website uses cookies.