8.1 CSS Typography & Text Styling

Lesson 4: CSS Typography & Text Styling

Font Families: A font family defines the typeface used to display text. You can specify multiple fonts, where the browser picks the first available one.
```
 body {
  font-family: "Arial", "Helvetica", sans-serif;
}
```
Font Size: Defines the size of the text. It can be set using various units such as pixels (px), ems (em), or percentages (%).
```
css코드 복사h1 {
  font-size: 24px;
}
```
Font Weight: Adjusts the thickness of the text, ranging from normal (400) to bold (700).
```
p {
  font-weight: bold;
}
```
Importing and Using Google Fonts: Google Fonts provides a wide variety of font families that can be easily integrated into your project. To use a Google Font:
1. Go to Google Fonts.
2. Choose a font, copy the <link> provided, and add it to the <head> of your HTML file.
```
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
```
Then, use the font in your CSS:
```
body {
  font-family: 'Roboto', sans-serif;
}
```

Setting Text and Background Color: You can use predefined color names, HEX codes, RGB, or HSL values to style text.
```
p {
  color: #333;
  background-color: #f0f0f0;
}
```
Text Formatting Options:
- Bold: font-weight: bold;
- Italic: font-style: italic;
- Underline: text-decoration: underline;
```
span {
  font-style: italic;
  font-weight: bold;
  text-decoration: underline;
}
```

Aligning Text: The text-align property aligns text within an element. Values can be left, right, center, or justify.
```
h2 {
  text-align: center;
}
```
Text Decoration: You can add decorations such as underlining, overlining, or striking through text.
```
a {
  text-decoration: none; /* Removes default underline */
}
```

Text Transformations: Change the case of text using text-transform. Common values include uppercase, lowercase, and capitalize.
```
h1 {
  text-transform: uppercase;
}
```

Line Height and Spacing: Control the spacing between lines, letters, and words.

p {
  line-height: 1.5; /* Space between lines */
  letter-spacing: 2px; /* Space between letters */
  word-spacing: 4px; /* Space between words */
}

Last updated 1 year ago