Font Formatting
This chapter will focus on learning the font formatting properties of CSS
Font-family
Font-size
Font-style
Font-variant
Font-weight
font
Font-family
The font-family tag sets the face of the font. Different values can be used; if browser does not support the first font, it tries the next font, and so on.
Sample code
H3 {font-family:verdana;}
p {font-family:cambria, verdana, tahoma;}Font-size
The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. The font-size value can be an absolute size, or relative size.
Absolute size sets the text to a specified size. Setting size with pixel gives full control over the text size. It does not allow a user to change the text size in all browsers.
Sample code
p {font-size:18px;}Relative size allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em.
Sample code
p {font-size:1.5em;}Font-style
The font-style property sets the style of the font. It is mostly used to italicize text. Font style can be set by using any of the predefined values: Italic, Normal, oblique.
Sample code
H3 {font-style:italic;}Font-variant
The font-variant property is specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Sample code
p {font-variant:normal;}
h1{font-variant:small-caps;}Font-weight
The font-weight property specifies the weight of a font. Predefined values are normal, and bold. Also numeric value from 100 to 900 can be assigned to indicate the font weight.
Sample code
P {font-weight:500;}Font
Font property sets all the font properties in one declaration. The order of values for font is: font-style, font-variant, font-weight, font-size, font-family
Sample code
p {font:italic bold 16px arial ;}Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font:italic bold 36px arial;
}
p {font-family:cambria, verdana, tahoma;
font-size:18px;
font-style:italic; /*Italic, Normal, oblique*/
font-variant:small-caps; /*normal*/
font-weight:500; /*100 to 900*/
}
</style>
</head>
<body>
<h1>This is a header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</body>
</html>