How to Specify The System's Default Serif and Sans-Serif Font-Family

How to specify the system’s default serif and sans-serif font-family?

The CSS Fonts Module Level 4 draft introduces new generic font families

For most languages and scripts, existing generics can be mapped to
something comparable to that script. That’s useful for the web so that
generics like serif and sans-serif map to something reasonable
independent of the language of the content. But typographic traditions
vary widely across the world and many scripts have a variety of common
typeface designs that don’t map cleanly into these existing generics.
In situations where a similar typeface is used across a wide variety
of platforms, it’s useful to extend the set of predefined CSS generic
font families to cover these type styles.

If you want to get "the font that feels the least out-of-place on the target platfom", that would be system-ui:

system-ui font family representing the default UI font on a
given platform

In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

CSS's font-family doesn't allow specifying more than one generic font keyword in a single font family name, so you'll either have to go with monospace or sans-serif.

How to set css system fonts for serif'd fonts

Operating systems generally don't use serif fonts like that, unless set explicitly by the user, so -apple-system won't have a serif version, but you can just use serif (without the other fonts you have listed) to use the browser's default serif font.

What is the system font stack?

What is the system font stack?

The CSS font-family property takes a list of fonts and uses the first one which is available to the browser.

A (not the) system font stack is a list of fonts which are:

• likely to be installed on lots of computers (with the goal being to have at least one font in the stack available on every computer that might view the website)
• similar in appearance so the design is consistent (e.g. similar letter widths, etc)

As I said, this is a "a" not "the" matter. A list of system fonts similar to Ariel is going to be different to one similar to Times New Roman.

Why should I use the system font stack?

To get a consistent appearance across different devices without the bandwidth or time implications of loading a font file from the Internet.

What should the system font stack look like?

That's a matter of opinion.

While it is backed up by science (people do research on the availability of fonts across devices), which fonts you want to use and decide are similar enough for your purposes isn't cut and dry.

Using only serif as font in CSS

On Windows, it's Times New Roman. On Mac, it's Times, though it may be Times New Roman as well.

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

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).

---

Related Topics