CSS Font Changes

CSS allows you to change the appearance of text on a webpage. By adjusting properties like font size, weight, style, and more, you can enhance your design. Let's take a look at how you can use these properties to customize your text.

1. Common Font Properties

Here are some commonly used properties for styling fonts:

• font-size: Defines the size of the font (e.g., px, em, rem).
• font-weight: Controls the thickness of the font (e.g., normal, bold, bolder).
• font-style: Specifies whether the font should be italic, normal, or oblique.
• font-variant: Allows you to control small-caps and other font variations.
• font-stretch: Adjusts the width of the font (e.g., condensed, expanded).
• line-height: Controls the vertical spacing between lines of text.

2. Examples

1. Font Size: Adjust the size of the text.

/* Font Size */
p {
  font-size: 18px;
}

2. Font Weight: Make text bold or change its thickness.

/* Font Weight */
h1 {
  font-weight: bold;
}

3. Font Style: Apply italic styling to the text.

/* Font Style */
em {
  font-style: italic;
}

4. Font Variant: Display text in small caps.

/* Font Variant */
span {
  font-variant: small-caps;
}

5. Line Height: Increase spacing between lines of text.

/* Line Height */
p {
  line-height: 1.6;
}

3. Best Practices

- Use appropriate font sizes for readability.
- Don't overuse bold or italicized text as it can affect readability.
- Always ensure that font changes align with the overall design and layout.