The font properties in CSS allow you to select a font to be used for the text in the document and apply the properties to the font. There are 6 types of Font properties used in CSS.
- Font-family
- Font-size
- Font-weight
- Font-style
- Line-height
- Font-variant
font-family
The font-family property agrees the typeface to be used for text in an element. You can provide a list of font names as a reserve. The browser will attempt to use the first font in the list that is available on the user’s computer. It is considered good practice to end your list with a generic font family name (like serif, sans-serif, monospace, cursive, fantasy) to provide a reserve if none of the specified fonts are available. Font names consist of more than one word should be enclosed in single or double quotes.
Example:
body {
font-family: 'Segoe UI', Tahoma, sans-serif; /* 'Segoe UI' is the first choice, then Tahoma, and finally any sans-serif font */
}
h1 {
font-family: Georgia, 'Times New Roman', serif;
}
p {
font-family: Arial, Helvetica, "Open Sans", sans-serif;
}font-size
The font-size property sets the size of the text. It can be specified using various units:
- Absolute units: pixels (px), points (pt), centimeters (cm), millimeters (mm), picas (pc), and inches (in).
- Relative units: ems (em), ex (ex), and percentages (%). em units are relative to the font size of the element (or its parent), and percentage values set the font size as a percentage of the current congenital font size.
- Keywords: such as xx-small, x-small, small, medium, large, x-large, xx-large, larger, and smaller. These keywords are roughly equivalent to the size attribute values of the deprecated <font> tag.
Examples:
body {
font-size: 16px; /* Sets the base font size to 16 pixels */
}
h1 {
font-size: 2.5em; /* Sets the font size to 2.5 times the parent's font size */
}
p {
font-size: 120%; /* Sets the font size to 120% of the parent's font size */
}
.small-text {
font-size: small;
}font-weight
The font-weight property sets the weight or boldness of the text. You can use the following values:
- Keywords: normal, bold, bolder, lighter.
- Numeric values: from 100 to 900, in increments of 100. In most browsers, 400 is equivalent to normal, and 700 is equivalent to bold. Values from 100 to 500 typically display as normal, and 600 to 900 as bold. lighter and bolder are relative to the inherited weight.
Examples:
p {
font-weight: normal; /* Sets the text to the normal font weight */
}
.bold-text {
font-weight: bold; /* Makes the text bold */
}
h2 {
font-weight: 600; /* Sets a semi-bold font weight */
}font-style
The font-style property specifies the style of the font, most commonly used to make text italic. Possible values include:
- normal: Displays the text in the normal font style.
- italic: Displays the text in an italic font style, if the font family has an italic version.
- oblique: Displays the text in an oblique font style. This is similar to italic, but it’s often a slanted version of the normal font face if a specific oblique version isn’t available. The oblique keyword can optionally be followed by an angle (e.g., oblique 10deg).
Examples:
p {
font-style: normal; /* Displays text without any special style */
}
.italic-text {
font-style: italic; /* Makes the text italic */
}
.oblique-text {
font-style: oblique 5deg; /* Makes the text oblique at a 5-degree angle */
}line-height
The line-height property sets the amount of space between lines of text. It can be specified in some ways:
- normal: This is the default value, and the browser will determine a reasonable line height.
- Number: A unitless number that acts as a multiplier of the element’s font-size. For example, if the font-size is 16px and line-height is 1.5, the line height will be 24px.
- Length: Using absolute (e.g., px, pt) or relative (e.g., em) units.
- Percentage: Relative to the font-size of the element. For example, 150% means the line height is 1.5 times the font-size. The normal setting is often around 120%.
Examples:
body {
font-size: 16px;
line-height: 1.5; /* Line height is 1.5 times the font size (24px in this case) */
}
p {
line-height: 24px; /* Sets a fixed line height of 24 pixels */
}
.tight-spacing {
line-height: 120%; /* Line height is 120% of the font size */
}font-varint
The font-variant property in CSS allows you to select a variation of a font to be used for the text. It is a shorthand property for several other font-variant-* properties, which control typographic variations.
The most commonly discussed value for font-variant is small-caps.
- normal: This is the default value and displays the font in its normal form. It can be used to override any inherited font-variant value.
- small-caps: This value sets all letters to uppercase but renders the originally lowercase letters at a smaller size than the originally uppercase letters.
Example : font-variant: small-caps
<!DOCTYPE html>
<html>
<head>
<title>font-variant: small-caps Example</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>This is normal text.</p>
<p class="smallcaps">Documentation about CSS Fonts aNd ExAmpLe</p>
</body>
</html>In this example, the text in the paragraph with the class smallcaps will be displayed in small capitals. The letters that were originally uppercase (“D”, “C”, “F”, “A”, “E”) will be full-sized capitals, while the letters that were originally lowercase (“o”, “c”, “u”, “m”, “e”, “n”, “t”, “a”, “t”, “i”, “o”, “n”, “a”, “b”, “o”, “u”, “t”, “s”, “N”, “d”, “x”, “m”, “p”, “l”, “e”) will also be uppercase but at a smaller size.
The font shorthand property can also include the font-variant property in its declaration, following the order: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family.
p {
font: normal small-caps bold 12pt/18pt "Times New Roman", Courier, serif;
}In this shorthand example, small-caps is set as the font variant for the paragraph.
CSS3 Topics