Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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!

share|improve this question
    
if a user has chosen to see smaller fonts, its because they want to see smaller fonts. –  Jon Feb 1 '13 at 10:34

1 Answer 1

up vote 7 down vote accepted

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

FreeSans

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.

share|improve this answer
    
Wow! Thank you very much for that great post! This helps a lot and you saved my day!:) –  drpelz Jan 29 '13 at 16:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.