Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Should the font of buttons on a website be different than the font on the rest of the page? How different? More spacing, less spacing, different font-family? What are the things to consider when choosing button fonts?

share|improve this question

2 Answers 2

up vote 6 down vote accepted

The big question is 'serif' or 'sans-serif'.

A review of literature cites numerous arguments that have been made for and against the legibility and readability of each - all of which have very tenuous evidence at best to back them up. Sans serif fonts are widely used and Verdana very popular for this role. Seems a good choice, even on a site that is using a serif font for body text. You only want legibility, not readability on a button.

Call to action buttons should have big bold text on them. A lighter sub text in a smaller font on the same button can keep people reading longer, keeping their attention on the button.

You're not trying to save space on buttons since it makes little difference to the overall area of a page. Closer than normal spacing is not helpful. Nor is wider than normal spacing, as it makes it harder for the brain to take words in as a gestalt. The button will hold their attention on the words less.

If you are using a dark button with light text, then use a bolder font to get the same apparent weight as dark text on light button.

Beyond that, no rules, do what everyone else does (consistency) and what looks right (aesthetics).

share|improve this answer

If you are using image based buttons you have a bit more freedom, but if the text is dynamically generated make sure that you choose a standard font. There are ways around this with the use of @fontface, but it is important to be careful when choosing fonts to make sure they appear as intended for you users.

Whatever font that you do choose, make sure it goes with the design of the page.

share|improve this answer

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.