5

I was curious as to which combinations of serif and sans-serif fonts are preferable to use that are compatible with most browsers.

While I am aware that with the introduction of CSS3 importing custom fonts is a great solution, I was wondering, as a back-up, which combination would be good to use? Is there even a good/bad combination with the available fonts?

The fonts would be used for a restaurant webpage.

I'm not 100% familiar with typography and would appreciate some professional opinions.

|improve this question
  • 1
    what do you mean @font-face isn't fully supported. Technically it's part of the css2 spec. Every version of IE from 6 forward supports it, safari 3+ (don't know about 2) supports it, every version of chrome ever released supports it, firefox has supported it since 3.5 (and urges you to update to the latest version). I would say that you can get 80% of visitors with @font-face, and that 20% is probably less than that, because browsers urge users to update. – dkuntz2 Feb 6 '11 at 19:35
  • That's strange, I could have sworn it didn't work in IE. Hmm. Well thank you for the correction. – Hanna Feb 6 '11 at 19:43
  • 3
    @DKuntz2 Here's the confusion: while @font-face is indeed supported by all major browsers, there is no one font format which is currently supported by all major browsers. You have to have multiple formats of the font and be careful about your @font-face declaration. Read more here: paulirish.com/2009/bulletproof-font-face-implementation-syntax – ghoppe Feb 8 '11 at 15:30
3

If you want to use @font-face, go for a service that ensures proper display on all (most) browsers and OS. Google Webfonts, Typekit and Fontspring come to mind, but there are some others as well.

Two articles on the topic that might interest you (also covering the standard webfonts):

DesignShack: 10 Great Google Fonts Combinations

and

Smashing: Complete Guide to Font Stacks

|improve this answer
  • using services adds extra overhead, as well as javascript(s), as well as third-party reliance. so when possible, roll your own syntax in css...much more lightweight, and customizable. – albert May 1 '14 at 23:42
1

Trebuchet, Verdana and Arial (sans) and Georgia and Times (serif) are common to Windows and OS X, so the majority of users will have these fonts installed. So to answer your question, any combination of Trebuchet/Verdana/Arial and Times/Georgia will be supported on the majority of computing devices. See http://media.24ways.org/2007/17/fontmatrix.html although it's not fully up-to-date.

|improve this answer
0

"Georgia-like" (serif), "Times-like" (serif), "Courier-like" (monospace), and "Helvetica-like" (sans-serif) font stacks are given in my article "Font stacks that work across Windows, OS X, and Linux".

An improved Helvetica-like stack is given in "A multiplatform Helvetica-like font stack that suppresses Arial".

"Droid-like" (serif), "Verdana-like" (sans-serif), and monospace stacks are given in "Three font stacks to match DejaVu / Bitstream Vera".

Each article mentions at least one Google web font. The first two explain how to use Google fonts with Blogger™.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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