CSS Typography and Text Styles are essential to designing websites and communicating effectively with users. The right combination of fonts, sizes, colors, and spacing can significantly improve the readability and aesthetics of your web pages. This class will explore some of the most commonly used CSS properties for typography and text styles.
CSS Font Properties
The CSS font properties set the font family, size, weight, style, and text variant. Here are some of the most commonly used font properties:
font-family
The font-family property is used to specify the font family of text. You can specify a list of font families separated by commas. The browser will use the first available font family in the list.
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
font-size
The font-size property is used to specify the size of the text. You can use different units of measurement, such as pixels, ems, rems, or percentages.
h1 {
font-size: 36px;
}
p {
font-size: 1.2em;
}
font-weight
The font-weight property is used to specify the weight of text. You can use different values, such as normal, bold, bolder, lighter, or a numeric value.
h1 {
font-weight: bold;
}
p {
font-weight: 300;
}
font-style
The font-style property is used to specify the style of text. You can use different values, such as normal, italic, or oblique.
h1 {
font-style: italic;
}
font-variant
The font-variant property is used to specify the variant of text. You can use different values, such as normal or small-caps.
h1 {
font-variant: small-caps;
}
CSS Text Properties
The CSS text properties are used to set the text’s color, alignment, decoration, and spacing. Here are some of the most commonly used text properties:
color
The color property is used to specify the color of text. You can use different color values, such as named colors, hexadecimal, RGB, or HSL values.
h1 {
color: red;
}
p {
color: #333333;
}
text-align
The text-align property is used to specify the alignment of text. You can use different values, such as left, center, right, or justify.
h1 {
text-align: center;
}
p {
text-align: justify;
}
text-decoration
The text-decoration property is used to specify the decoration of text. You can use different values, such as none, underline, overline, line-through, or a combination of these values.
h1 {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
line-height
The line-height property is used to specify the height of a line of text. You can use different units of measurement, such as pixels, ems, rems, or percentages.
h1 {
line-height: 1.5;
}
p {
line-height: 1.2em;
}
letter-spacing
The letter-spacing property is used to specify the spacing between letters in text. You can use different units of measurement, such as pixels, ems, rems,