Icons – Google Fonts • Hacker News Board

Re: Icons – Google Fonts

#111

Post by greggturkington » Wed, Mar 03, 2021, 5:24 PM UTC

laurent92 wrote: post #19

eurasiantiger wrote: post #4

The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…

“Check-circle” is exactly the amount of information that the able reader has. Sight-deficient users are as much used to those weird words as able users are used to unintelligible icons.

No the reader has "account_balance_wallet" (no dashes). It will read as "account_balance_wallet account balance wallet."

It would be trivially easy to use ARIA attributes to indicate which span is the icon's label. Not something most people consider, but this is Google. At least they have an accessibility icon?

Re: Icons – Google Fonts

#112

Post by eek04_ » Wed, Mar 03, 2021, 5:25 PM UTC

eurasiantiger wrote: post #4

The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…

> Also, never use Google’s CDN for loading fonts or icons — always self-host them. The CDNs are used to track your users.

Any evidence of this claim? Also, given that the Google CDNs allow caching for 24h, it seems extremely ineffective even if it was done.

Re: Icons – Google Fonts

#113

Post by Gene_Parmesan » Wed, Mar 03, 2021, 5:47 PM UTC

adflux wrote: post #47

madeofpalk wrote: post #43

Earlier quoted context omitted.

As a web developer, it literally is your only job to make a website that is usable by people.

By which people? I think thats up to the developer to decide.

If you are making web sites for public use, the law disagrees with you.

Re: Icons – Google Fonts

#114

Post by RobertKerans » Wed, Mar 03, 2021, 5:55 PM UTC

tobyhinloopen wrote: post #90

Aeolun wrote: post #48

Earlier quoted context omitted.

1kb is a lot for a simple svg icon. That said, if you have a single page app already, you can render as many icons as you want, since you’ll only download them once anyway.

I wonder how React copes with a whole bunch of inline SVGs. Seems expensive

Copes totally fine and it's trivial to memoise them anyway.

Re: Icons – Google Fonts

#115

Post by crazygringo » Wed, Mar 03, 2021, 5:58 PM UTC

systemvoltage wrote: post #102

I am sorry but I am going to be that guy. Iconography has regressed so much, it's all the same optically to me. Designers keep pushing minimalism and line-graphics to "reduce crud" like its some sort of a religion. We can't distinguish icons well. There is no effort put into making them more unique and recognizable. What a horrible cult. Check out these glorious past remnants that we've forgotten about, they were so…

On the one hand, I absolutely agree with you. I tremendously lament the fact that outline, color, and shading have been thrown out so now we're trying to decipher little rounded-box hieroglyphics based on lines being subtly different.

But on the other hand, the problem is that icons took so much work to create before, and also because they had such a recognizable identity/brand they weren't easy to reuse. Now the icons are so generic that they might as well be letters of the alphabet. They kinda are. A right-arrow is just a right-arrow -- it's not a Microsoft Office style right-arrow, or Windows 95 style right-arrow, or Mac Aqua style right-arrow, etc.

These icon fonts make sense for when the icon is meant to be essentially decorative typography -- e.g. a share icon next to the word "share" or an "opens in new tab" link arrow. They work very well for websites.

However, I hate these icon fonts when they're used without a text label besides them -- specifically in toolbars. That's where I wish desperately we could go back to colorful textured icons that were easy to tell apart. Even after years, I still find Gmail's toolbar of monochrome blob icons to be entirely unusable for this reason.

Re: Icons – Google Fonts

#116

Post by Xevi » Wed, Mar 03, 2021, 6:03 PM UTC

systemvoltage wrote: post #110

JKCalhoun wrote: post #104

Earlier quoted context omitted.

Minimalism has a place — esp. with reduced screen real-estate. An icon I would display in my tool bar or on a button is different than an icon I would display on the desktop. My beef with Google's icons is the seeming random decision to use rounded miters on some art, sharp miters on others. Very mish-mash.

> reduced screen real-estate Don't get me started on how much space we waste on any UI these days. Apart from HN UI, pretty much every website and desktop app has wastage of space. I suspect, we stopped using borders - thanks to minimalism, that we need to use copious amounts of negative space to separate them. So, now paddings and margins are liberally applied everywhere.

Another reason is that we design websites for mobile users primarily, which requires more spacing due to touch input. And it's easy to just leave it in there for the desktop as well. It's also often more visually pleasing at first glance, even though it's less functional.

I got to say that HN does not provide a nice mobile experience in my opinion. I've clicked the wrong link many times due to lack of white space. However I agree that a lot of sites add way too much spacing between everything.

Re: Icons – Google Fonts

#117

Post by crazygringo » Wed, Mar 03, 2021, 6:05 PM UTC

vagab0nd wrote: post #97

Google Fonts used to have this great feature where I can select a number of fonts and view them all on a single page. It was super useful because I can type in any text and preview the text in these selected fonts. However, I can't seem to find this feature any more. Right now if I select fonts, they just show up in the sidebar. But I can preview them in any way. There's gotta be something that I missed?

It still totally works that way on Google Fonts homepage, nothing has changed.

The icons page is just a separate page that works differently from the rest of the fonts.

Re: Icons – Google Fonts

#118

Post by duckmysick » Wed, Mar 03, 2021, 6:08 PM UTC

systemvoltage wrote: post #110

JKCalhoun wrote: post #104

Earlier quoted context omitted.

Minimalism has a place — esp. with reduced screen real-estate. An icon I would display in my tool bar or on a button is different than an icon I would display on the desktop. My beef with Google's icons is the seeming random decision to use rounded miters on some art, sharp miters on others. Very mish-mash.

> reduced screen real-estate Don't get me started on how much space we waste on any UI these days. Apart from HN UI, pretty much every website and desktop app has wastage of space. I suspect, we stopped using borders - thanks to minimalism, that we need to use copious amounts of negative space to separate them. So, now paddings and margins are liberally applied everywhere.

> Apart from HN UI, pretty much every website and desktop app has wastage of space.

By HN, do you mean Hacker News? Because it has whitespace on the sides (since the element has width of 85%). It still looks fine if you change it to 90 or 95, so one could argue there's wasted space there too.

But I'm not that one. I recognize empty space has its place in design. And it's not a fad either. Pick up a book - any book - and you will notice plenty of negative space there. Borders are used sparingly, if at all.

Re: Icons – Google Fonts

#119

Post by bredren » Wed, Mar 03, 2021, 6:09 PM UTC

crazygringo wrote: post #92

Wow. I wonder what this means for the future of Font Awesome. I know plenty of people are anti-Google, and also prefer SVG's over icon fonts for valid reasons (though you can download these as SVG's as well). But now that this is easier to embed than Font Awesome, has basically the same number/range of icons as Font Awesome's free tier, doesn't come with the 10K pageviews/mo. restriction that Font Awesome's free tier…

Font Awesome’s product has long been destined for commoditization. Which is probably why they have diversified to offering custom icons and other differentiating behavior.

I suspect google won’t be the only one to offer icon sets like this, so in general I agree this will continue to erode FA’s market share.

Fwiw, It has felt like FA’s most recent release fell far behind schedule.

Re: Icons – Google Fonts

#120

Post by dangwu » Wed, Mar 03, 2021, 6:10 PM UTC

systemvoltage wrote: post #102

I am sorry but I am going to be that guy. Iconography has regressed so much, it's all the same optically to me. Designers keep pushing minimalism and line-graphics to "reduce crud" like its some sort of a religion. We can't distinguish icons well. There is no effort put into making them more unique and recognizable. What a horrible cult. Check out these glorious past remnants that we've forgotten about, they were so…

You seem to be confusing these Google Font icons with app icons (Google services, macOS dock icons). The former are meant to be simple, resizeable, used by other apps, work in dark/light mode, and able to be part of any design language. Compare them with Apple's SF Symbols.