CSS Typography: Font Basics

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. In CSS, controlling typography is fundamental to web design, impacting how your content is perceived and interacted with.

The `font-family` Property

This is one of the most important properties for controlling the typeface used for text. You can specify a list of font names, and the browser will use the first font on the list that is available on the user's system or has been loaded via `@font-face`.

Example Usage

This paragraph uses a specific font family:

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

Note: Always include generic font families (like serif, sans-serif, monospace, cursive, and fantasy) as a fallback in case none of your specified fonts are available.

Common Font Categories

CSS fonts can be broadly categorized:

Serif Fonts

This is an example of a serif font. They have small decorative strokes (serifs) at the ends of letters. Often considered traditional and good for long-form reading (e.g., Georgia, Times New Roman).

Sans-Serif Fonts

This is an example of a sans-serif font. They lack serifs. Generally perceived as modern and clean, good for screen reading (e.g., Arial, Helvetica, Verdana).

Monospace Fonts

This is an example of a monospace font. Every character has the same width. Ideal for code snippets and tabular data (e.g., Consolas, Courier New).

Cursive Fonts

This is an example of a cursive font. They mimic handwriting. Use sparingly for decorative purposes as they can be hard to read (e.g., Brush Script MT).

Fantasy Fonts

This is an example of a fantasy font. Highly decorative and unique. Best for very specific design needs and short text (e.g., Papyrus, Impact).

Other Font Properties

`font-size`

Controls the size of the font. Common units include pixels (px), em (em), rem (rem), percentages (%), and keywords (small, medium, large).

p {
    font-size: 16px;
}
h1 {
    font-size: 2.5rem;
}

`font-weight`

Specifies the boldness of a font. Values range from normal (400) to bold (700), or numeric values from 100 to 900.

.bold-text {
    font-weight: bold; /* or 700 */
}
.light-text {
    font-weight: 300;
}

`font-style`

Sets the style of the font. Common values are normal, italic, and oblique.

.italic-text {
    font-style: italic;
}

The Shorthand `font` Property

This property allows you to set multiple font-related properties in a single declaration. The order is important: font-style, font-variant, font-weight, font-size/line-height, font-family.

.stylish-text {
    font: italic bold 1.2em 'Georgia', serif;
}

Mastering these basic font properties is the first step to creating visually appealing and readable web content.