Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Icons – Google Fonts

fonts.google.com

Post reply on HN
Print view View original

121–130 of 190 posts

Re: Icons – Google Fonts

#121

Post by jefftk »

jarek-foksa wrote: post #95
reaperducer wrote: post #85

Earlier quoted context omitted.

Boxy says "15 day free trial" but there's no information about how much it costs. Dora anyone know? I'm not going to sign up for something without knowing what I'm getting into.

Linux desktop app is free, macOS desktop app costs 9.99 USD (one-time payment), web app costs 9.99 USD / year (no cloud services) or 9.99 USD / month (with cloud services). The complete pricing table is shown in the footer area of the home page when you open it with a Chromium-based browser.

> when you open it with a Chromium-based browser

Looks like they're using the experimental CSSStyleSheet() constructor [1] to display the pricing table. Ugh.

[1] https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleShe...

Re: Icons – Google Fonts

#122

Post by systemvoltage »

dangwu wrote: post #120
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.

Not an expert in this. In some fundamental way, icons have a specific function. To convey action, or status, etc in a small compact graphical form. Semiologically, photoshop tools palette icons and app icons are functionally the same. They are both used to perform an action whether that’s to select a tool or launch an app.

Edit: one key thing I forgot about iconography - familiarity. The floppy disk icon is ubiquitously understood for historic reasons.

Re: Icons – Google Fonts

#123

Post by bckygldstn »

crazygringo wrote: post #115
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 ico…

FYI there is a setting in gmail that turns the mystery icons into text labels: https://support.google.com/mail/answer/2473038?hl=en-GB

Re: Icons – Google Fonts

#124

Post by forgotmypw17 »

Tagbert wrote: post #105
nagisa wrote: post #36

Earlier quoted context omitted.

To illustrate an issue this article describes, https://i.imgur.com/TzMXgUd.png is what the linked page looks like with a forced/limited font selection on Firefox.

If you block fonts, this is not a surprise. Using a fresh in stall of Firefox, the linked page displays the icons correctly.

that,s the point. not everyone WANTS to load them or CAN load/see them.

Re: Icons – Google Fonts

#125

Post by forgotmypw17 »

Solvitieg wrote: post #106
TonyTrapp wrote: post #14

Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/

So is Javascript but that hasn't stopped anybody

not true. many design their sites THOUGHTFULLY and as a result they can be accessed without js. case in point: site i,m writing this comment on. counterpoint: almost anything on google.com domain these days.

Re: Icons – Google Fonts

#126

Post by systemvoltage »

duckmysick wrote: post #118
systemvoltage wrote: post #110

Earlier quoted context omitted.

> 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 -…

Books have a purpose for negative space on either side of the text. It's to allow you to hold it without obscuring the text. It is also to allow spine to be tightly bound.

For reference, here is a good book that goes in-depth of what and whys of book design, it is hard to find it though: https://www.amazon.com/Designing-Books-Practice-Jost-Hochuli...

Most negative space on the websites is merely designers going "it looks clean".

Re: Icons – Google Fonts

#127

Post by nikkwong »

8lall0 wrote: post #50
faeyanpiraat wrote: post #40

Earlier quoted context omitted.

But how do you actually apply the styling? Just add a class to the tag which contains “color:red;” ?

You can export your SVGs with fill="currentColor" and your color attribute onto the SVG tag or its container would work. Since at $JOB i'm using SVG icons with more than one color, i use fill="var(--svg-color-base)" or fill="var(--svg-color-accent)" so i can precisely set which color i want, in a perfectly scope-able manner. The greatest advantage is that you can reference externally your svg with xlink.href on top o…

You're saying you can embed all the SVGs onto one page, and then reference them on other pages/domains by using xlink.href? I haven't heard of this?

So what you're describing is having site.com/page1 which has markup: ...

and then on site.com/page2 having

Or something of this manner? Haven't encountered this, but sounds awesome; especially since you'd get the power of both inlining and caching the asset.

Re: Icons – Google Fonts

#128

Post by systemvoltage »

crazygringo wrote: post #115
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 ico…

Yes, it attaches a particular theme/brand/aesthetic to iconography. I think we should push designers to do the due diligence and not just get something from material.io and dump it in the app. It won't happen because $$$, ship ship ship and MVP culture, agile, etc.

Careful, meticulous, rigorous, disciplined, thoughtful work is old fashioned.

We produce broken, shitty apps because early feedback culture, not finishing things, market validation, the entire startup culture, etc. I see benefits in this but also negatives. Remember when SEGA games were shipped 100% complete and almost bug free? That's unheard of these days. They had no way to know if the game is going to be successful. No early access. They took risks.

Re: Icons – Google Fonts

#129

Post by jwr »

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…

I think most UI and industrial design has regressed a lot in recent years. Two big issues are:

1. Obsession with "minimalism" and "clean design". Taken to the extreme by Jony Ive, where we started fearing what else Apple would take away in new revisions of their hardware and software. Scrollbars disappeared, buttons started blending into the background or becoming invisible, everything was "clean", utterly undiscoverable, and annoying to use. It only looked good in the keynote demo.

2. Fashion. Designers love following other designers and fashion trends run rampant. That's why on our phones we are beginning to get a bunch of icons that all look the same, every one is an abstract geometric pattern using at least 4 saturated colors. And we can't tell them from one another.

I am so hoping for a reversion of both trends. You don't have to design like everybody else!

Re: Icons – Google Fonts

#130

Post by leipert »

tobyhinloopen wrote: post #32
DangerousPie wrote: post #30

Earlier quoted context omitted.

You can use an "SVG sprite" with . No need to inline the SVG every time.

Oh? I have to look that up

We are using this at GitLab: https://gitlab-org.gitlab.io/gitlab-svgs/, using svg-sprite to build the sprite file: https://www.npmjs.com/package/svg-sprite
Post reply on HN