CSS Fonts

Font-family

• Specifies the font family or typeface of the text.
• Allows multiple font names separated by commas as fallbacks.
• You can use web-safe fonts or custom fonts imported using @font-face.

body {
font-family: "Arial", sans-serif;
}

Font Size

• Sets the size of the text characters.
• Can use different units such as pixels (px), ems (em), percentages (%), viewport units (vw, vh).

h1 {
font-size: 24px;
}

Font weight

• Determines the thickness or boldness of the text.
• Values include normal, bold, numeric values (100 to 900).

p {
font-weight: bold;
}

font-style

• Specifies the style of the text (e.g., normal, italic, oblique).

p {
font-style: italic;
}

text-transform

• Changes the case of the text characters (e.g., uppercase, lowercase, capitalize).

button {
text-transform: uppercase;
}

text-decoration

• Controls text decoration (e.g., underline, overline, line-through).

a {
text-decoration: none; /* Remove underline from links */
}

line-height

• Sets the vertical spacing between lines of text.
• Can use various units like pixels (px), ems (em), percentages (%).

p {
line-height: 1.5;
}

word-spacing

• Controls the spacing between words.

p {
word-spacing: 3px;
}

text-align

• Aligns the text horizontally within its containing element.

div {
text-align: center;
}

vertical-align

• Vertically aligns inline or inline-block elements with respect to their siblings.

img {
vertical-align: middle;
}