font-size

The font-size property obviously defines the size of the font. The two most common units of CSS font-size measurement is px and em. Pixels (px) are an absolute unit of measurement whereas ems (em) are relative. I think this is best explained by example: 1em is the current font size and 2em is two times the current font-size.

Ems can be beneficial for people who are visually impaired and like to change their settings so that the default font-size of a site is bigger. In other words the default paragraph font size might be 12px, but a visually-impaired person may have their settings so that it is 20px. With ems the font-size will adjust to their settings. For example if you do font-size: 1em; then in the default settings the font-size will display as 12px whereas with the visually-impaired settings it would display as 20px.

Another example when using ems is beneficial is if you know the exact proportions you want a certain text to be relative to another chunk of text. In other words say in our jumbotron section we want the h1 to be twice the size of the paragraph text. We could do .jumbotron { font-size: 16px; } to set all text in the jumbotron div to 16 pixels and then you could do .jumbotron h1 { font-size: 2em; } to set the h1 to twice the size (32px) to all the other text in the jumbotron section.

Which you choose to use is up to. I use pixels for the most part so that I know exactly what the font-size is, but its different for each situation and their is no absolute answer for which to use in every case. That's the beauty behind it. So experiment, inspect elements from your favorite sites, and see how they do it. Then try out different methods for yourself. There are no exact rules in art.

font-weight

The final two are much easier to understand. Font-weight determines how thick characters in a text will display. You will see this in action in a couple lessons, but for now we'll go over the values. The simplest values are: normal, lighter, bold, bolder. So p { font-weight: lighter; } will display the skinniest text, then normal is thicker, then bold, and bolder are the thickest. You can also use a more specific scale of 100-900 (rounded to a hundred number). So p { font-weight: 100; } is the lightest possible whereas p { font-weight: 900; } would display the thickest possible characters. See it in action here.

line-height

Line-height specifies the line height. You can use pixels to give it a specific height of pixels. Or you can use a number to give it a relative line height multiplied by the current font-size. In other words .jumbotron h1 { line-height: 1.5; } would make the line height 1.5x the the h1 size - for example. 30px * 1.5 would equal a line height of 45px. Another example: .jumbotron h1 { line-height: 2px; } would give a line height of 2x the h1 size. See it in action here.