# CSS Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. CSS provides various properties to style text.

## 1. Font Families

The `font-family` property specifies the font for an element. It can hold several font names as a "fallback" system.

```css
p {
  font-family: "Times New Roman", Times, serif;
}
```

*   **Serif**: Fonts with small lines at the ends on some characters (e.g., Times New Roman).
*   **Sans-serif**: "Without serif". Clean lines (e.g., Arial, Helvetica).
*   **Monospace**: All characters have the same width (e.g., Courier New).

## 2. Font Size

The `font-size` property sets the size of the text.

*   **Pixels (`px`)**: Fixed size. Good for precise control.
*   **Em (`em`)**: Relative to the font-size of the element (2em means 2 times the size of the current font).
*   **Rem (`rem`)**: Relative to the font-size of the root element (`html`).
*   **Percentage (`%`)**: Relative to the parent element's font size.
*   **Viewport Units (`vw`, `vh`)**: Relative to the viewport size.

```css
h1 { font-size: 40px; }
p { font-size: 1.2rem; }
```

## 3. Font Style and Weight

*   **`font-style`**: Mostly used to specify italic text.
    *   `normal`, `italic`, `oblique`.
*   **`font-weight`**: Specifies the weight (boldness) of a font.
    *   `normal`, `bold`, `bolder`, `lighter`.
    *   Numeric values: `100` (Thin) to `900` (Black). `400` is normal, `700` is bold.

```css
p.italic { font-style: italic; }
p.bold { font-weight: bold; }
```

## 4. Text Alignment

The `text-align` property is used to set the horizontal alignment of a text.

*   `left`, `right`, `center`, `justify`.

```css
h1 { text-align: center; }
p { text-align: justify; }
```

## 5. Text Decoration

The `text-decoration` property is used to set or remove decorations from text.

*   `none`: Often used to remove underlines from links.
*   `underline`, `overline`, `line-through`.

```css
a { text-decoration: none; }
del { text-decoration: line-through; }
```

## 6. Text Transformation

The `text-transform` property is used to specify uppercase and lowercase letters in a text.

*   `uppercase`, `lowercase`, `capitalize`.

```css
p.uppercase { text-transform: uppercase; }
```

## 7. Spacing

*   **`line-height`**: Specifies the space between lines.
*   **`letter-spacing`**: Increases or decreases the space between characters.
*   **`word-spacing`**: Increases or decreases the space between words.

```css
p {
  line-height: 1.5;
  letter-spacing: 2px;
}
```

[[programming/css/css]]
[[programming/css/colors-and-backgrounds]]