CSS Typography Basics

Fonts allow you to control how text looks on your webpage, improving readability and visual design. In CSS, typography is customized using a set of properties that work together to create polished, readable content.

Below are the most important font properties you'll use regularly.

font-family

Defines which font is used for text. You can list multiple fonts so the browser falls back to the next option if one isn't available.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Arial", sans-serif;
}
</style>
</head>
<body>
    <p>This text uses Arial, or any sans-serif font if Arial isn't available.</p>
</body>
</html>

The browser will try Arial first, and if it's not installed, it will use any available sans-serif font.

Common font stacks:

"Arial", sans-serif - Clean, readable
"Georgia", serif - Traditional, elegant
"Courier New", monospace - Code-like appearance

Always include a generic family (sans-serif, serif, monospace) as the final fallback.

font-size

Controls how large the text appears.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    font-size: 32px;
}
p {
    font-size: 1.2em;
}
</style>
</head>
<body>
    <h1>Hello</h1>
    <p>Paragraph text</p>
</body>
</html>

Common units:

px - Fixed size (e.g., 16px)
em - Relative to parent element's font-size
rem - Relative to root element's font-size
% - Percentage of parent's font-size

For consistent, scalable typography across your site, rem is often the best choice.

font-weight

Controls how thick or bold the text appears.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    font-weight: bold;
}
strong {
    font-weight: 700;
}
.light {
    font-weight: 300;
}
</style>
</head>
<body>
    <p>Bold text</p>
    <strong>Numeric bold (700)</strong>
    <p class="light">Light text (300)</p>
</body>
</html>

Values:

Keywords: normal (400), bold (700)
Numeric: 100 to 900 in increments of 100
- 100-300: Thin to light
- 400: Normal
- 500-600: Medium to semi-bold
- 700-900: Bold to extra bold

Not all fonts support every weight. Some fonts only have normal and bold.

font-style

Controls whether text is italicized.

<!DOCTYPE html>
<html>
<head>
<style>
em {
    font-style: italic;
}
p {
    font-style: normal;
}
</style>
</head>
<body>
    <em>Italic text</em>
    <p>Normal text</p>
</body>
</html>

Values:

normal - Regular, upright text
italic - Slanted text (uses the font's italic variant)
oblique - Artificially slanted text (rarely used)

Use italic for emphasis or styling specific words.

line-height

Controls the vertical spacing between lines of text. This is crucial for readability.

<!DOCTYPE html>
<html>
<head>
<style>
.tight {
    line-height: 1;
}
.comfortable {
    line-height: 1.6;
}
.loose {
    line-height: 2;
}
</style>
</head>
<body>
    <p class="tight">
        This paragraph has tight line spacing (1).<br>
        Lines are close together.
    </p>
    <p class="comfortable">
        This paragraph has comfortable line spacing (1.6).<br>
        It's easier to read.
    </p>
    <p class="loose">
        This paragraph has loose line spacing (2).<br>
        Lines are far apart.
    </p>
</body>
</html>

Best practices:

Body text: 1.5 to 1.6
Headings: 1.2 to 1.3
Use unitless values (e.g., 1.5) instead of pixels for better scaling

Good line-height significantly improves readability, especially for longer paragraphs.

text-transform

Controls capitalization without changing the actual HTML text.

<!DOCTYPE html>
<html>
<head>
<style>
.upper {
    text-transform: uppercase;
}
.lower {
    text-transform: lowercase;
}
.capital {
    text-transform: capitalize;
}
.none {
    text-transform: none;
}
</style>
</head>
<body>
    <p class="upper">hello world</p>
    <p class="lower">HELLO WORLD</p>
    <p class="capital">hello world</p>
    <p class="none">Hello World</p>
</body>
</html>

Values:

uppercase - ALL CAPS
lowercase - all lowercase
capitalize - First Letter Of Each Word
none - No transformation (default)

Useful for styling headings, buttons, or navigation links without manually rewriting text.

Combining Properties

Font properties work together to create cohesive typography. Here's a complete example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Georgia", serif;
    font-size: 16px;
    line-height: 1.6;
}

h1 {
    font-family: "Arial", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

p {
    font-size: 1rem;
    font-weight: 400;
}

.emphasis {
    font-style: italic;
    font-weight: 600;
}
</style>
</head>
<body>
    <h1>Typography Matters</h1>
    <p>Good typography makes content <span class="emphasis">easier to read</span> and more engaging.</p>
</body>
</html>

Quick Reference

Property	Purpose	Common Values
`font-family`	Choose font	"Arial", sans-serif
`font-size`	Set text size	16px, 1rem, 1.2em
`font-weight`	Control thickness	normal, bold, 400-900
`font-style`	Italicize text	normal, italic
`line-height`	Vertical spacing between lines	1.5, 1.6
`text-transform`	Control capitalization	uppercase, lowercase

Best Practices

Readability first:

Use line-height: 1.5-1.6 for body text
Limit line length to 60-80 characters
Ensure sufficient color contrast

Font stacks:

Always include fallback fonts
End with a generic family (sans-serif, serif, monospace)
Test on multiple devices

Performance:

Limit custom font usage to 2-3 font families
Use system fonts when possible for faster loading
Load only the font weights you actually use

Consistency:

Use rem for scalable, predictable sizing
Define typography rules on the body element
Create reusable classes for common text styles

CSS Box Model - Margins & Padding