buttons (text or images)

Question

I would like to know if I should create CSS buttons or image buttons for my site. What is better? Problem is that the text is formatted with Helvetica Neue ( I like that font very much) and I can't use it as a web font because of copyright issues.

If I create the buttons in CSS they look beautiful in the browser but get resized when the user has chosen a different text-size for their browsers.

Image buttons have the advantage I can embed my font but do not look that good as CSS buttons. Also in that case I had to make Retina-versions for the buttons (just for the future when any PC has a Retina-display).

Can someone please help me in this tricky situation? Does anyone know a web-safe alternative to Helvetica Neue? Should I disable the resizing of my button div-containers? What's today's standard when it comes to website buttons?

TIA!

Answer 1

Actually, Linotype does offer a Neue Helvetica font that's licensed for web use.

Web-safe Alternatives

But if you don't want to pay for the web license, the obvious web-safe alternatives to Helvetica Neue are Helvetica and Arial. If you simply use sans-serif, it'll default to the user's platform's default sans serif font, which is typically:

• Helvetica for Mac
• Arial for Windows
• Droid or Roboto for Android
• Deja Vu, Bitstream Vera Sans, or Arial (if MS fonts have been installed) for *nix

For *nix users, you'll probably want to specify Arial or Bitstream Vera Sans to get a more perceptually similar Helvetica analog than the default sans serif font many *nix OSes use (e.g. Deja Vu).

FOSS Fonts

Alternatively, you can embed these free open source fonts:

Liberation Sans

• Open source alternative to Helvetica and Arial
• Part of the greater Liberation Fonts family of GPL-2-licensed fonts sponsored by Red Hat
• Available in both .sfd source files and ready-to-use .ttf binaries in the Liberation™ Fonts collection here from the Fedora Project

Arimo

• SIL Open Font License (OFL) webfont-ready typeface
• Design by Ascender Fonts to look like Arial
• Available as a webfont on Google Web Fonts, Typekit, etc. and as a TrueType Font on FontSquirrel

FreeSans

• GNU licensed and webfont-ready Helvetica / Arial replacement
• part off the Free UCS Outline Fonts donated by URW++ Design & Development
• Available in .woff, .otf, and .ttf binaries, as well as .sfd source by direct FTP or from the GNU Free Fonts and Free UCS Outline Fonts sites

I generally prefer to use CSS/text buttons whenever possible, as it's more semantically correct, requires less bandwidth, and is less work. However, if you make an image button and use proper accessibility techniques (alt text or a screen-reader-accessible text label), then it should be alright as well. It just depends on how much work you're willing to do for the perceived extra aesthetic benefit.