What is correct to specify as CSS font-family value: typeface, font or font-family?

Question

here are definitions for typeface, font and font-family:

1. Typeface is a design for a set of characters.
2. Font is the combination of typeface and other qualities, such as size, pitch, and spacing.
3. Font-family is a set of fonts all with the same typeface, but with different sizes, weights and slants.

So which of these 3 i can specify as a value for css font-family property? If i should specify only 3) i.e font families , then in case of when i specify sans-serif then which sans-serif font will browser pick from user system for displaying the content? There can be many sans-serif fonts on user's system.

Thanks in advance, Suren

Answer 1

None of them. The value of font-family is a comma-separated list (in preference order) of font families. A font family is a set of (one or more) typefaces that are of similar design, typically designed by a typographer so that they are stylististically consistent. For example, the font family Georgia consists of typefaces that might have names Georgia Regular, Georgia Italic, Georgia Bold, and Georgia Bold Italic. The names of typefaces may be language-dependent and are not meant to be used in CSS. Instead, you use various CSS constructs to select a typeface; e.g., font-style: italic picks up an italic typeface from the font family being used (or, if it has no such typeface, may create “faux italic” by slanting glyphs in the regular typeface).

The identifier sans-serif denotes a so-called generic sans serif font family. This means a browser-dependent font family. Browsers have defaults for it, and this can be changed by the user in browser settings (though few people know and care about this).

Answer 2

When using font-family in CSS, it is best to build a "font stack". This website gives you a few standard ones which you can use without having to download any extra fonts.

The idea of a font stack is that the users computer looks for the first font in the list (stack), and if it can't find it, it will move onto the next one in the list

Take the following example:

font-family: 'Open Sans', Arial, "Helvetica Neue", Helvetica, sans-serif;

This first looks for the font 'Open Sans'. If it can't find that, it moves onto 'Arial' and so on. Right at the end, there is what looks like another font name 'sans-serif'. Bit confusing, as this is a type, and not a name of a font. On most systems, this will just mean that sans-serif will fall back to your most basic sans-serif font (in most cases this is basically just Arial on Windows, and probably Helvetica on a Mac). Best way to see what it does is just to try it!

Answer 3

I'm not entirely certain what you mean by the first part of your question. However, if you write:

p{
font-family: sans-serif;
}

Then you are not specifying a particular font, only a default sans-serif/serif font. The browser will pick up the default one that is built-in to the browser (For example in the case of a Mac this will be Helvetica, Windows will default to Arial) or has been user specified - This is only overridden by the user if they have changed their defaults in the browser.

If you want to use a specific font to use you have to specify that font. Adding 'sans-serif' or 'serif' at the end of the line is good practice as it will the page will fallback to a default font.

For example:

 p {
        font-family: 'Lobster font', 'Tahoma', sans-serif;
  }

In this example we look for 'lobster font', if we can't find it we look for 'Tahoma', if we can't find this then we fallback to the browser default.