Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 3 down vote favorite

When you ask Facebook for code to put a "Like" button on your website, you are given a choice of these typefaces: arial, lucida grande, segoe ui, tahoma, trebuchet ms, and verdana. Given that they are all pretty similar, what are some considerations in choosing among them? Recommendations?

share|improve this question
Can you only specify one, or can you specify a sequence, as per CSS font-family rules? – e100 Feb 7 '12 at 14:55

3 Answers

up vote 2 down vote accepted

I assume you're using this script to generate the "Like" button. It appears that the default, if you don't select any font, is to try Lucida Grande, Tahoma, Verdana and Arial in that order, and to fall back to the browser's default sans-serif font if none of those are available. If you do select a specific font in the form, it uses either that particular font or the browser default sans-serif font.

Given that, if you're not using any of the listed fonts on your page already, and don't have any strong preferences between them, I'd just go with the default (i.e. don't select any font in the form). It's likely to look OK to most users, and match what they're used to seeing on other sites.

share|improve this answer
up vote -1 down vote

Arial is the default sans serif typeface for a Windows machine.

Lucida Grade is the default sans serif typeface for a Macintosh machine.

The rest are merely fallbacks.

The only typeface I would not rely on is Segoe UI. It's uncommon. The others are fairly common on both platforms.

Which one you choose has more to do with the current site and what typefaces it uses as fallback sans serif type. If my font stack falls back to any of these faces (and it should for sans serifs), that's the primary one I would use. I, personally, tend to use Verdana for default sans serifs.

share|improve this answer
I don't think any of the first 4 points are true. Are you talking about in browser or system default fonts? – e100 Feb 7 '12 at 13:39
Browsers have no fonts. Fonts are installed on a system. A browser is simply an application. – Scott Feb 7 '12 at 14:46
A browser renders text in certain fonts by default when other fonts are unavailable or unspecified. Thus it has"default fonts" (plural, as there are defaults for sans and serif, etc). These do not necessarily match the default fonts used to render OS interface elements. – e100 Feb 7 '12 at 14:53
Sorry you are incorrect. A browser renders a typeface by what it's told to render. If the OS has the font, it uses it. If the OS does not have the font, it falls back to the next font in a font stack. If the OS doesn't have that font either, it falls back to the third option. If no specified fonts are found it falls back to the default font the browser KNOWS in on an operating system. With Windows that last resort font is Arial. On a Mac the last resort font is Lucida Grande. The browser knows these fonts are present because the OS uses them to draw UI type. – Scott Feb 7 '12 at 14:57
3  
I am not claiming that browsers "contain" fonts. While you're right that Arial is the default for sans fonts in Win browsers (and you can change this behaviour in some) Win XP's UI default is a mix of Tahoma and Trebuchet; for Vista/7 it's Segoe UI. Thus my initial question. – e100 Feb 7 '12 at 15:10
show 1 more comment
up vote 1 down vote

Just so you guys know, it seems that Windows only likes Trebuchet MS as the specified font when you select the XFBML version of the Facebook Like button box_count layout that displays the Send button underneath the main Like button. Use any other font selection than Trebuchet MS and the word "Send" gets cut off on the right side on Windows. Mac is fine either way. You can see this in action by going to the main Facebook Developers Like button page and specifying XFBML, checking the Send box, and selecting box_count layout.

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.