Icons of all main payment operators and methods

bcg1 11 years ago |

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.

vendocrat 11 years ago | |

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

bergie 11 years ago | |

Yeah, missing for instance M-Pesa

vendocrat 11 years ago | | |

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

phkahler 11 years ago |

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

Someone1234 11 years ago | |

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_...

TazeTSchnitzel 11 years ago | | |

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".

wavefunction 11 years ago | | |

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.

michaelmior 11 years ago | | |

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.

nothrabannosir 11 years ago | | |

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

dublinben 11 years ago | | |

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.

vendocrat 11 years ago | |

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?

dublinben 11 years ago | |

Pretty much all of these will be trademarked.

Shihan 11 years ago | | |

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

al451 11 years ago | | |

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

phragg 11 years ago |

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.

andrewmunsell 11 years ago | |

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

sdm 11 years ago |

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

veeeee 11 years ago |

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

crazygringo 11 years ago |

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.

legulere 11 years ago |

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).

imaginenore 11 years ago |

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

diafygi 11 years ago |

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

zyxley 11 years ago | |

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

efrafa 11 years ago |

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

et1337 11 years ago |

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

pluma 11 years ago | |

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

_lce0 11 years ago | | |

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

culturestate 11 years ago | | |

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/

pluma 11 years ago | | |

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.

jmett 11 years ago |

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.

plumeria 11 years ago |

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

techaddict009 11 years ago |

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

veeeee 11 years ago | |

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

Messiah_ 11 years ago |

What is the advantage of using this over pngs?

Brajeshwar 11 years ago | |

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.

phragg 11 years ago | |

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

bdat 11 years ago | |

They will scale well with high ppi screens.

loopbit 11 years ago | | |

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.

bdat 11 years ago | | |

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.

subsection1h 11 years ago | | |

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

pimlottc 11 years ago |

When did the bitcoin logo get all slanty?

lbarrow 11 years ago |

No Venmo?

iambot 11 years ago |

no gumtree but looks great otherwise.

milankragujevic 11 years ago |

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/

JohnTHaller 11 years ago | |

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.

milankragujevic 11 years ago | | |

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

dandelany 11 years ago | | |

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)

function_seven 11 years ago | | |

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.

dandelany 11 years ago | | |

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

JohnTHaller 11 years ago | | |

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.

mappu 11 years ago | | |

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?

JohnTHaller 11 years ago | | |

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.

pokoleo 11 years ago | |

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

psychometry 11 years ago | | |

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.

subsection1h 11 years ago | | |

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

ss64 11 years ago | | |

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