Facebook Tab Design Best Practices
Text/Fonts
Use Browser rendered text whenever possible rather than image-based text.
Advantages to browser-rendered text:
- Text is easier to edit and update.
- Increases usability: users can increase text size if needed to make it easier to read.
- Can improve search engine accessibility.
Browser-safe fonts:
Comprehensive list of fonts common to both Windows and Macs:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Facebook’s default fonts:
Lucida Grande, Tahoma, Verdana, Arial, sans-serif
Default font size: 11 pixels
If a font isn’t specified for an app these fonts will be used by default in order of availability. (If a user doesn’t have the first font in the list installed on their computer, the next available font in the list will be used and so on.)
Note: “Lucida Grande” is installed on most Macs but few Windows users have it so they will likely see Tahoma instead.
Font sizes:
For best readability, main body copy should generally be at least 11 pixels or larger (10 pixels as an absolute minimum). 9 pixels can be acceptable for less important text like copyright info but it’s preferable to keep all text sizes at 10px +.
Tab/App Content Dimensions
Facebook re-designed Fan Page tabs recently to be 520 pixels wide (reduced from previous 760 pixels wide). The 520 pixel width includes all content appearing within a tab so for example if your design includes content inside a box with a drop shadow, the drop shadow needs to fit within the 520 pixel page width.
Place important content “above the fold”
Avoid making users scroll too much to see content you want to highlight. Measuring from the top of the Tab canvas area, your most important content should ideally fit within about the first 430 pixels in height.
Don’t re-create your Web site
In general, it’s best to keep Tab designs relatively short and simple with clear calls to action. Avoid creating mini web sites with multiple sub-pages within one tab or extra long designs that require users to scroll too much to view all content. Facebook users can have short attention spans so focus designs on the information or functionality you most want them to see and use.