Icons of all main payment operators and methods | Hacker News Reader

Icons of all main payment operators and methods

paymentfont.io

183 pointsbmaeser61 comments

Not "all main payment operators". More accurate title would be "many major payment operators". Not a big deal but it comes off as presumptuous to suggest that paymentfont.io is the arbiter of what a "main payment operator" is.

Nice font though, and a good idea to create that, thanks.

Yeah, missing for instance M-Pesa

@bergie, feel free to open a request: https://github.com/vendocrat/PaymentFont/issues

I most certainly don't intend to be presumptuous or anything like that. On the contrary, I've just created a font for a project of mine and gave it to the world for free, as I found it could be useful to some of you guys.

I am well aware that PaymentFont is far from complete, so please feel free and contribute: https://github.com/vendocrat/PaymentFont/issues

Those are really nice, but aren't some of those trademarked?

Pretty much all of these will be trademarked.

Is this legal? I mean: to make fonts with trademarked logos and publish them (regardless if it is offered for free or not).

It's not obviously illegal. Don't confuse trademark with copyright.

They might be, but when you're using someone else's trademark to accurately represent their business, it may not be a trademark violation within itself.

So for example, if I took Hacker News' Y but used it to link to Hacker News itself, that may not be a trademark violation as I am not either hurting the brand's reputation or misleading people into thinking an association exists with the brand.

But ultimately it is up to a judge to decide what is or is not allowed. And you definitely don't want to take the "the ride" to find out that what you're doing is legal, it could still cost you tens of thousands of dollars.

> Fair use may be asserted on two grounds, either that the alleged infringer is using the mark to describe accurately an aspect of its products, or that the alleged infringer is using the mark to identify the mark owner.[0]

[0] https://en.wikipedia.org/wiki/Trademark#Limits_and_defenses_...

The thing to do is check how the trademark owner feels. I believe Visa and MasterCard are fine with using their logos to show they're accepted (those stickers every store has are surely legal?), but remember that Microsoft don't let you use the word Windows in a product name, except in the form "for Windows".

These firms all have brand guidelines which are certainly not being followed/adhered to by this font. It's a nice effort but not a good idea to use in anything public.

I think those stickers every store has are distributed by the Visa and Mastercard (or some vendor who has a direct association with them). In any case, it seems like a different situation if the source of the material is ultimately the business itself. In the case of this post, it's a third party with no formal association making use of the logo.

There's not just trademark, but also copyright. Somebody designed those logos. Does this fall under fair use?

Fair use for copyright infringement is only an affirmative defense once you're brought to court. You can't rely on it ahead of time for any kind of legal certainty. It can still take an expensive and drawn out legal fight to prove that you are covered by fair use.

I had reached out for all of them, but received no feedback of most them, neither via email nor twitter.

Anyhow there are some who contacted me right away to thank me or to ask themselves to be included in PaymentFont.

I see that trademark/copyright thing quite pragmatical. If one accepts a certain payment method or uses a certain payment operator/service, they will anyway put a sticker in their shop window or a logo on their website.

If that happens in good will and context, why should the trademark holder sue you for that? Isn't that actually what they want people to do?

Awesome job, however, it would be nice if people contributed to a more widely used Icon Font library such as FontAwesome. Obviously to prevent multiple CSS/font file calls, etc.

On the contrary, if you only need a couple icons, having 1000+ different symbols in a single font library is unnecessary overhead as well.

A bit misleading title. It's more American/European payment provider focused. I don't see any of the main Chinese providers represented.

Why aren't you guys just opening issues with Icon requests etc over at PaymentFont GitHub repo?

Seems odd to me to just complain about missing operators, assuming one could know every single one on the earth...

This is great.

A great extension would be to have font symbols which represent parts of each symbol which are different colors, and then overlap them so they produce a colored logo -- and provide the CSS classes that will produce them.

Hmm the SEPA logo might not be enough as there's both SEPA wire transfers as well as SEPA direct debit (which is pretty awesome btw, because it cuts out unnecessary middle men).

I think you messed up the quality.

http://i.imgur.com/RZzliBF.png

Compare to the original:

http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Bit...

Can I request an icon that shows the CVC code location? Pretty much every payment form has one, since for some reason people still don't know where that is.

Example: https://utilityapi.com/static/media/images/graphics/cvc.svg

Don't forget, for AmEx it's four numbers on the front instead of three numbers on the back.

Svg would be better, with font whole your logo can have just one colour.

Why on earth is the mouse over fade effect achieved via Flash?

Probably not the fade itself but the copy-to-clipboard functionality.

it's a terrible UX for those that have flash disabled by default

Unfortunately, Flash is (for now [1]) the only way to support click-to-copy in every major browser.

1. http://www.w3.org/TR/clipboard-apis/

I have click-to-play enabled, so I'm used to seeing small grey rectangles pop up when I hover over things. I think even GitHub does that.

This is awesome. A bit of picky user feedback - the "copied" overlay is cool, but I'd try fading out a little bit sooner - more of a snapshot effect.

What is the name of the font used to generate the paths for the bank transfer, cash on delivery and other text-based icons?

Seems like paypal donation link has not been setup properly. It says 0$

Seems like it just lets u decide how much u want to donate, theres a small field beneath where it says 0$

What is the advantage of using this over pngs?

They will scale well with high ppi screens.

To be honest, the same can be said for svg images without the need to load a css file (4KB minified) plus a font file (55-230KB).

Specially taking into account that most places will use only a few of these icons.

I was only explaining the advantage over png. Great point about the use-case though. The average site is probably not going to offer 95 payment options/operators; a specialized svg library might be more appropriate.

An icon font generator/subsetting tool can produce a font file that includes only the icons that are needed.

PNG is raster and so they do not scale on various sizes (various devices and their screen-sizes), not to mention of the retina display that one needs to take care.

SVGs and/or Icon fonts are vector and scalable.

One extremely useful benefit is that you can change the text-size, color, etc just as you would with CSS on these fonts.

When did the bitcoin logo get all slanty?

No Venmo?

no gumtree but looks great otherwise.

I dislike font icons because they look horrible on Windows. You should provide a PNG download in multiple sizes, or a generator like http://fa2png.io/

I've never heard of this problem, and it doesn't look like it's googlable. Screenshot?

Windows and OS X use different methods of hinting where Windows attempts to stay true to the typeface and OS X attempts to provide a provide a smoother, more readable version. Webkit browsers give you some level of control with subpixel rendering CSS attributes, but fonts might still look awful in Firefox or IE on Windows.

It's my understanding that it is Apple that attempts to preserve the design of the typeface, not Microsoft:

http://www.joelonsoftware.com/items/2007/06/12.html

Also Windows 8 uses subpixel positioned grayscale, rather than subpixel positioned ClearType. When you rotate a tablet by 90degrees ClearType doesn't work.

No, they don't. They looked horrible in Chrome for a long time because Chrome's rendering was screwed up unless you gave it fonts in a very specific order so it used SVG. Fun fact, Google Web Fonts never served it in that very specific order.

Yes they do. Evidence: http://i.imgur.com/WAqvAmv.png They have rough edges, wrong aspect ration in small sizes and look nasty.

Try disabling Direct Write. Chrome 37 pushed a fix for the font aliasing problem that resolved it for most users but made it worse for a few. See this ticket for details: https://code.google.com/p/chromium/issues/detail?id=444141 (sucks that this is still an issue so many years later)

That's not Chrome, it's Firefox. Looks the same on my machine as well, all jaggedy. I'm using FF 36. Let me go update and see if there's a difference...

No difference on 37. They just look terrible. http://i.imgur.com/exrS0u9.png

EDIT: Wow, looks like turning ClearType OFF makes the font icons look much better: http://i.imgur.com/dwwagZN.png

Interesting.

Wow. I can't believe it's 2015 and both Chrome and Firefox are still battling text antialiasing bugs.

I think you mean battling Microsoft's terrible text antialiasing.

It's likely an issue with buggy video drivers. Firefox has a database of drivers on a blacklist that will crash due to instability. When it detects them in use, it will disable hardware acceleration which decreases performance and quality of some things like font rendering. Judging by the earlier screenshot, this is on a lower end laptop at 1366x768 resolution with an integrated graphics card. Most laptop makers never update the bundled drivers to fix bugs even though Intel and AMD regularly update the drivers of their integrated graphics tech. So, users are stuck with an outdated buggy driver and no way to update it. Mozilla at least ensures that it won't crash.

My screenshot is from a PC with AMD A10-7850K with integrated Radeon R7 graphics. I always download the latest AMD drivers and check for updates every month.

Here are the AMD drivers that are blacklisted: https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drive...

Judging by the jagginess and the low resolution of your screen, I'd wager you're using one of the laptops with an integrated GPU that's using an older version of the drivers that's on the Firefox GPU blacklist. This is usually because the laptop maker doesn't bother to update the graphics drivers much, if at all, and doesn't get the improved ones from Intel/AMD/etc. These outdated and buggy graphics drivers cause apps that use hardware acceleration to crash, so Firefox is running with it off on your laptop. Mozilla maintains a blacklist of known bad versions of graphics drivers and will automatically disable hardware acceleration on those machines so that it won't crash. With it off, web pages won't look as good and web fonts won't be as smooth.

Neither my laptop nor my desktop suffer this issue with Firefox, Chrome, IE, etc.

It looks fine to me ( http://i.imgur.com/rAYGIwX.png ).

What fork of firefox is that? I don't recognise the taskbar icon. Does the problem still happen with upstream firefox?

Tor Browser, likely. It's based on the older ESR branch of Firefox. As it's a modified version of Firefox, it's unsupported by Mozilla.

Reply on news.ycombinator.com