CSS: Fonts

Here are some of the key CSS properties related to fonts:

• Font Family (font-family): Specifies the typeface or font family for text. You can specify multiple font families as a fallback in case the browser does not support the first choice.

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

• Font Size (font-size): Sets the size of the font. You can use various units such as pixels (px), ems (em), percentages (%), or keywords like small, medium, large, etc.

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

• Font Style (font-style): Specifies whether the font should be normal, italic, or oblique.

em {
    font-style: italic;
}

• Font Weight (font-weight): Sets the thickness or weight of the font. Common values include normal, bold, bolder, lighter, or numeric values (100 to 900).

strong {
    font-weight: bold;
}

span {
    font-weight: 600;
}

• Font Variant (font-variant): Controls the appearance of small-caps text. Values can be normal or small-caps.

.small-caps {
    font-variant: small-caps;
}

• Text Transform (text-transform): Changes the capitalization of text. Values can be uppercase, lowercase, capitalize, or none.

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

Line Height (line-height): Sets the height of each line of text, which can improve readability and spacing.

p {
    line-height: 1.5;
}

• Text Decoration (text-decoration): Adds decorations such as underline, overline, or line-through to text.

a {
    text-decoration: underline;
}

del {
    text-decoration: line-through;
}

• Letter Spacing (letter-spacing): Adjusts the spacing between characters.

.spaced {
    letter-spacing: 1px;
}

These are just some of the CSS properties related to fonts. By using these properties effectively, you can customize the appearance of text on your web pages to create visually appealing and readable content.