CSS Typography & Fonts
Typography decides how readable, professional and premium your webpage feels. In this chapter, you will learn how to control fonts, size, weight, spacing and alignment.
font-family
Controls the font style used for text.
font-size
Controls how large or small text appears.
font-weight
Controls thickness of text, such as normal or bold.
line-height
Controls vertical spacing between text lines.
After This Chapter, You Will Understand
This chapter helps you design clean, readable and brand-friendly text.
Font Family
Choose suitable fonts for headings and body text.
Font Size
Control heading, paragraph and button text size.
Font Weight
Use normal, medium, bold and extra bold text.
Readability
Improve line height, spacing and alignment.
What is Typography?
Typography is the art of arranging text so that it looks clear, readable and attractive.
1 Simple Meaning
Typography controls the visual personality of text. A good font system makes your website look professional, trustworthy and easy to read.
Serif
Classic and formal. Example: Georgia.
Sans Serif
Modern and clean. Example: Arial.
Monospace
Code-like text. Example: Consolas.
Important CSS Font Properties
These properties control the basic style and appearance of text.
| Property | Use | Example |
|---|---|---|
| font-family | Sets the font type | font-family: Arial, sans-serif; |
| font-size | Sets text size | font-size: 18px; |
| font-weight | Sets text thickness | font-weight: 700; |
| font-style | Sets italic or normal style | font-style: italic; |
| line-height | Sets space between lines | line-height: 1.7; |
2 Font Family
Font family decides which font will be used. Always include fallback fonts.
font-family: Arial, Helvetica, sans-serif;
}
3 Font Size and Weight
Font size controls text size. Font weight controls boldness.
font-size: 42px;
font-weight: 800;
}
Text Alignment, Decoration and Spacing
These properties help control the presentation of words and lines.
text-align
Controls horizontal alignment of text.
text-align: center;
}
text-transform
Changes text case such as uppercase or lowercase.
text-transform: uppercase;
}
letter-spacing
Controls space between letters.
letter-spacing: 2px;
}
| Property | Use | Common Values |
|---|---|---|
| text-align | Aligns text horizontally | left, center, right, justify |
| text-decoration | Adds or removes underline/line-through | none, underline, line-through |
| text-transform | Changes text case | uppercase, lowercase, capitalize |
| letter-spacing | Controls spacing between letters | 1px, 2px, normal |
| word-spacing | Controls spacing between words | 4px, 8px, normal |
How to Make Text Easy to Read
Good typography is not only about beauty. It is also about comfort and clarity.
Readable Course Page
This paragraph has comfortable font size, good line height and clean color contrast. It is easier for students to read study notes for a longer time.
Good typography improves learning experience, attention and page quality.
4 Readability Rules
- Use readable font size for paragraphs
- Keep line-height around 1.5 to 1.8
- Use dark text on light background
- Do not use too many fonts
- Keep headings larger and bolder than paragraphs
- Avoid long paragraphs without breaks
Practice CSS Typography
Edit font size, line height and text properties to see changes.
Mistakes Students Should Avoid
Typography mistakes can make even good content difficult to read.
Wrong Habits
- Using too many font families on one page
- Making paragraph text too small
- Using very low line-height
- Using center alignment for long paragraphs
- Using poor contrast between text and background
Correct Habits
- Use one or two font families consistently
- Use readable paragraph size
- Keep comfortable line height
- Use left alignment for long reading text
- Keep strong color contrast
Test Your Understanding
Select the correct answers and check your score.
1. Which property sets the font type?
2. Which property controls text size?
3. Which property controls space between lines?
4. Which property changes text case?
5. What is best for long paragraphs?
Remember These Points
Revise these before moving to Chapter 17.
Typography
Typography controls how text looks, feels and reads on a webpage.
font-family
Sets the font type for text.
font-size
Sets how large or small text appears.
font-weight
Controls the thickness of text.
line-height
Controls spacing between lines of text.
text-transform
Changes text case such as uppercase or capitalize.