0

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

isherwood
  • 58,414
  • 16
  • 114
  • 157
Leonardo
  • 160
  • 2
  • 3
  • 13

3 Answers3

4

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.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • 2
    I would note that cm is a unit best suited for print stylesheets, and there are better alternatives for screens. – Mister Epic Dec 01 '15 at 19:06
  • 2
    not sure why you got downvoted. your answer is all correct, and there's no need to impose any opinions about what is the best use for the `cm` unit. – Woodrow Barlow Dec 01 '15 at 19:07
  • @MisterEpic in theory, I agree, though in reality, all of the units of measurement ultimately end up as virtual units. – DA. Dec 01 '15 at 19:07
  • 1
    I was not the downvoter, but my feeling is that given monitors use pixels as units of measurement, `px` would be a more appropriate for screen stylesheets, along with the other usual suspects (`em`, `rem`, etc..) I have no idea what 3 cm would be on some monitor where the size and pixel density are unknowns. The browser will still figure it out, but I think things would be more predictable with pixel-related units. – Mister Epic Dec 01 '15 at 19:12
  • 1
    @WoodrowBarlow The opinion is not mine: http://www.w3.org/Style/Examples/007/units.en.html – Mister Epic Dec 01 '15 at 19:13
  • @MisterEpic, so you would recommend to use pixels instead of cm, in this case 11.338582677? – Leonardo Dec 01 '15 at 19:14
  • 1
    @Leonardo Absolutely use `cm` for physical media - e.g. in a print stylesheet for a piece of paper. If your stylesheet is to style a page for a browser, you should consider `px`, `em`, `rem`, `%`, etc... But note pixels are integers, round them off. – Mister Epic Dec 01 '15 at 19:19
  • @MisterEpic but to be clear, and to quote the W3: `There is no restriction on which units can be used where`. The *intent* makes sense...use physical units for physical printing, virtual units for screens, but in reality, they all are interpreted the same by the browser. So it's more theory than reality. – DA. Dec 01 '15 at 19:21
  • @DA. While I understand that the browser will make a determination as to what the size will be, any physical unit of measurement is not recommended by the W3C for screens, though yes, it is perfectly legal. But if someone presented me a screen stylesheet with cms, inches and pts for sizes and dimensions, I would have a hard time trying to interpret it. If my header is 70 pts across, and my monitor is 24" with a pixel density of 250 ppi, how many pixels do I tell my designer to make her banner image? I'm sure people better at math could figure it out, but it would make kittens cry. – Mister Epic Dec 01 '15 at 19:31
  • @MisterEpic I agree totally with you that 'cm' would just be hard to grok if I had to read through it for a screen CSS file. – DA. Dec 01 '15 at 19:51
1

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

Collins Abitekaniza
  • 4,496
  • 2
  • 28
  • 43
1

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.

Woodrow Barlow
  • 8,477
  • 3
  • 48
  • 86