How to set font family and size in html/css

Question

I'd like to use css syntax in HTML document to set the font-family to "Arial" and font-size to 0.3cm for the whole document.

I use this code:

<style>
body { font-family: Arial; font-size: 0.3cm }
</style>

I am not sure if writing only Arial is enough, or should I write something like this?

<style>

body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.3cm }
  </style>

and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?

thanks

Answer 1

font-family: Arial

This means the browser will use Arial if you have it installed on your system. If not, it will use whatever the default font is for your browser.

font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif

This means the browser will use Arial if you have it installed on your system. If not, it will use Helvetica Neue if you have it installed on your computer. If not, it will use Helvetica if you have it installed on your computer. If not, it will use whatever the default sans-serif font is for your browser.

Both are perfectly valid. They just do slightly different things.

and I am also not sure if I cam use "cm" in the code

Yes, cm is a valid CSS unit of measurement.

Answer 2

I am not sure if writing only Arial is enough, or should I write something like this?

You can use Arial alone but It is advisable to use font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; Just is case Arial can not be used.

and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?

You can use cm but It seems it is recommended only for print by w3.org ,check this link http://www.w3.org/Style/Examples/007/units.en.html

The recommended units for font size are em, px, %,rem

Answer 3

The font-size property can accept values of type length . As of the time of writing, the exhaustive list of these types (excluding experimental units) is:

em, ex, ch, rem, vh, vw, vmin, vmax, px, mm, cm, in, pt, pc

So, yes. You can use cm (centimeters) as a unit for that property. You should be aware, though, that 1cm rarely equals one true centimeter on screen, due to differing pixel densities on various displays. If that's really what you want, you could use the mozmm unit of measurement, although it is an experimental unit that is only supported by Firefox browsers. The cm unit is used more often in stylesheets targeted at physical printed media.

The font-family property accepts a stack (comma-separated list) of font family names. The browser will use the first one in the stack that it happens to recognize (installed on the computer).

Using font-family: Arial is a pretty safe bet, since almost all computers have the Arial font, but to be safe it is best to include a couple of fall-back fonts. Quotation marks (or single-quotes) are traditionally used around multi-word font names or font names with numbers or symbols in them. It is also considered best-practice to include a <generic-name> at the end of the list. The exhaustive list of generic fonts is:

serif, sans-serif, monospace, cursive, fantasy

So, the second option you listed for font-family is a little bit more "bulletproof". It lists some fall-back options and ends with a generic font in case the client has none of the hand-picked fonts installed.