CSS Font best practice

Question

I am trying to understand this font declaration in a CSS template that I am using and learning from. Most of the CSS tutorials do not set font size this way. It does seem to work, I'm just wondering exactly what is going on.

body{
font:300 15px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

What is the 300 number doing? Why would the creator use a fraction of 15px/1.4 instead of just putting something like 10px?

Also, when is it appropriate to use quotations on the typefaces, and when is it not?

Answer 1

It's shorthand syntax for the following:

font-weight: 300;
font-size: 15px;
line-height: 1.4;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Font Weight

300 is just a number representation of the weight of the font. The default is 400, "bold" is equivalent to 700. Here's a font with many different weights that should give you a good idea of what the numbers correspond to: http://www.google.com/fonts/specimen/Source+Sans+Pro

Line Height

When the number doesn't include a unit (like px, em, etc), it's a multiple of the font size. In this case, 15px * 1.4 = 21px, so it's the equivalent of line-height: 21px.

Font Family

This is a list of your preferred fonts, in descending order. If the user doesn't have Helvetica Neue installed, it will fall back to Helvetica. If they don't have that, it will fall back to Arial. If they don't have that, it will use whatever the browser's default sans-serif font is. In OSX and iOS, that's Helvetica, on Windows it's Arial, and on Android it's either Droid Sans or Roboto, depending on the version.