CSS Fonts and Typography: A Complete Beginner's Guide

Meta Description: Learn CSS fonts and typography with this beginner-friendly guide. Discover font families, font sizes, font styles, text formatting, and best practices for creating beautiful websites.

CSS Fonts and Typography

Typography is one of the most important aspects of web design. Good typography makes your content easier to read, improves user experience, and gives your website a professional appearance.

CSS (Cascading Style Sheets) provides powerful tools for controlling fonts and text styling. In this guide, you'll learn how to use CSS fonts and typography to create attractive and readable web pages.

What Is Typography in Web Design?

Typography refers to the style, appearance, and arrangement of text on a webpage.

Good typography helps:

Improve readability
Enhance user experience
Create visual hierarchy
Strengthen brand identity
Make content more engaging

Poor typography can make even great content difficult to read.

Understanding CSS Fonts

CSS allows developers to control how text appears on a webpage.

Some common font properties include:

font-family
font-size
font-weight
font-style
line-height
text-align

These properties help create attractive and professional text layouts.

1. Font Family

The font-family property specifies which font should be used.

Example


body {
    font-family: Arial, sans-serif;
}

Result

All text on the page will use Arial. If Arial is unavailable, the browser will use a generic sans-serif font.

Popular Font Families

Serif Fonts

Examples:

Times New Roman
Georgia
Garamond

Serif fonts have decorative strokes and are often used in traditional designs.

Sans-Serif Fonts

Examples:

Arial
Helvetica
Verdana

Sans-serif fonts are clean, modern, and highly readable.

Monospace Fonts

Examples:

Courier New
Consolas
Monaco

Monospace fonts are commonly used for displaying code.

2. Font Size

The font-size property controls the size of text.

Example


h1 {
    font-size: 36px;
}

Common Units

Pixels (px)


font-size: 18px;

Relative Units (rem)


font-size: 1.2rem;

Percentages (%)


font-size: 120%;

Many modern developers prefer rem because it improves accessibility and responsiveness.

3. Font Weight

The font-weight property controls text thickness.

Example


p {
    font-weight: bold;
}

Numeric Values


font-weight: 100;
font-weight: 400;
font-weight: 700;
font-weight: 900;

Common values:

400 = Normal
700 = Bold

4. Font Style

The font-style property changes the appearance of text.

Example


p {
    font-style: italic;
}

Available Values


font-style: normal;
font-style: italic;
font-style: oblique;

Italic text is often used for emphasis.

5. Text Color

You can change text color using the color property.

Example


h2 {
    color: blue;
}

Using HEX Colors


color: #3498db;

Using RGB Colors


color: rgb(255, 0, 0);

Colors help improve visual appeal and branding.

6. Text Alignment

The text-align property controls text positioning.

Example


h1 {
    text-align: center;
}

Options


text-align: left;
text-align: center;
text-align: right;
text-align: justify;

Text alignment helps create organized layouts.

7. Line Height

The line-height property controls spacing between lines.

Example


p {
    line-height: 1.8;
}

Benefits

Improves readability
Makes content easier to scan
Creates cleaner layouts

Most websites use a line height between 1.5 and 2.

8. Letter Spacing

The letter-spacing property controls space between characters.

Example


h1 {
    letter-spacing: 2px;
}

This creates extra spacing between letters.

9. Text Transform

The text-transform property changes text capitalization.

Example


h2 {
    text-transform: uppercase;
}

Options


uppercase
lowercase
capitalize

Examples:

HELLO WORLD
hello world
Hello World

10. Text Decoration

The text-decoration property adds or removes text decorations.

Example


a {
    text-decoration: none;
}

Common Values


underline
overline
line-through
none

Useful for customizing links.

Practical Example

HTML


<h1>Welcome to My Website</h1>

<p>
This is an example of CSS typography.
</p>

CSS


body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 36px;
    color: #3498db;
    text-align: center;
}

p {
    font-size: 18px;
    line-height: 1.8;
}

Result

A clean and professional webpage with readable typography.

Web-Safe Fonts

Web-safe fonts are fonts commonly available on most devices.

Popular web-safe fonts include:

Arial
Verdana
Helvetica
Georgia
Times New Roman
Courier New

Using web-safe fonts ensures consistent display across browsers and devices.

Using Google Fonts

Google Fonts provides hundreds of free fonts for websites.

Example Import


<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

CSS


body {
    font-family: 'Roboto', sans-serif;
}

Google Fonts can make your website look more modern and unique.

Best Practices for CSS Typography

1. Prioritize Readability

Choose fonts that are easy to read.

2. Limit Font Families

Use no more than two or three fonts on a website.

3. Use Proper Line Height

Adequate spacing improves readability.

4. Maintain Consistency

Use consistent typography throughout your site.

5. Create Visual Hierarchy

Use different font sizes and weights for headings and body text.

6. Optimize for Mobile Devices

Ensure fonts remain readable on smaller screens.

Common Typography Mistakes

Using Too Many Fonts

This can make a website look unprofessional.

Choosing Hard-to-Read Fonts

Decorative fonts should be used sparingly.

Small Text Sizes

Tiny text frustrates users and reduces accessibility.

Poor Contrast

Always ensure text contrasts well with the background.

Conclusion

CSS fonts and typography play a crucial role in web design. By mastering properties like font-family, font-size, font-weight, line-height, and text alignment, you can create beautiful, readable, and professional websites.

Great typography improves user experience, strengthens branding, and helps visitors engage with your content. As you continue learning CSS, experiment with different font combinations and typography techniques to develop your design skills.

Creating a Modern Website Layout with CSS