Using only serif as font in CSS

Question

Have I understod the following right?

font-family:sans-serif;

Above will result in the default sans-serif font installed on the computer. Which is arial on PC and Helvetica on Mac as tandard.

font-family:serif;

Above will result in the default serif font installed on the computer.

Which is the default "serif font" on Mac and on PC?

Answer 1

The generic font names such as serif denote implementation-dependent fonts, but the font then depends on the browser and its settings. It may also depend on the natural language used in the document when marked up (using the lang or xml:lang attribute).

Usually the default serif font is Times New Roman on PCs, Times on Macs.

Edit: On IE, in some versions, it appears to be Batang; see https://webmasters.stackexchange.com/questions/34399/unknown-css-font-family-oddity-with-ie7-10-on-windows-vista-7-8

Answer 2

The exact font used for 'serif' and 'sans-serif' depends on the browser. Most browsers will allow users to configure these settings, and (usually) default to Times New Roman (and its variants) for serifs, Arial / Helvetica for sans-serifs. Default fonts in Linux distributions vary.

If a buggy browser attempts to use a font that doesn't exist on the machine, most operating systems will degrade gracefully and use a typical system font. That's very unlikely to come into practice, though.

Because different clients and user-agents can use fonts with very different spacing and proportions, it becomes important to try and avoid using the generic 'sans-serif' and 'serif' fonts for em-based layouts.