The font-family property specifies the font for an element. There are two types of font family names:
- font family: a specific font family (like Times New Roman or Arial)
- generic family: a group of font families with a similar look (like Serif or Monospace)
Separate each value with a comma to indicate that they are alternatives.
If the name of a font family is more than one word, it must be in quotation marks: "Times New Roman".
It is a good practice to specify a generic font family, to let the browser pick a similar font in the generic family, if no other fonts are available.
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
} If you haven't set the font size anywhere on the page, then it is the browser default size, which is 16px.
To calculate the em size, just use the following formula: em = pixels / 16
The font-style property has three values: normal, italic, and oblique.
Oblique is very similar to italic, but less supported.
The font-weight controls the boldness or thickness of the text.
The values can be set as normal (default size), bold, bolder, and lighter.
You can also define the font weight with a number from 100 (thin) to 900 (thick), according to how thick you want the text to be.
400 is the same as normal, and 700 is the same as bold.
The CSS font-variant property allows you to convert your font to all small caps.
The values can be set as normal, small-caps, and inherit.
Not every font supports CSS font-variant, so be sure to test before you publish.
The text-align property specifies the horizontal alignment of text in an element. By default, text on your website is aligned to the left. However, at times you may require a different alignment.
text-align property values are as follows: left, right, center, and justify.
When text-align is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight (as in magazines and newspapers).
The vertical-align property sets an element's vertical alignment. Commonly used values are top, middle, and bottom.
The vertical-align property also takes the following values: baseline, sub, super, % and px (or pt, cm).
display: inline-table; and display: table-cell; styling rules are applied to make the vertical-align property work with divs.