Typography is the voice of a website.
A beautiful font can make a simple webpage feel modern, professional, elegant, or playful.
Good typography improves readability, user experience, and visual design.
Think of fonts like clothes for text:
- HTML gives the body
- CSS gives the style
1. Font Family
What is Font Family?
font-family is used to choose the style/design of text.
Example:
p{
font-family: Arial;
}
This changes the paragraph text into the Arial font.
Real Life Logic
Imagine writing:
- Wedding card → elegant font
- Newspaper → readable font
- Gaming website → bold futuristic font
Different situations need different writing styles.
Same happens in websites.
Syntax
selector{
font-family: value;
}
Example
HTML
<h1>Welcome to My Website</h1>
CSS
h1{
font-family: Verdana;
}
Multiple Font Families (Fallback Fonts)
Sometimes a font may not exist on a user's computer.
So CSS allows backup fonts.
p{
font-family: Arial, Helvetica, sans-serif;
}
Meaning:
- Try Arial
- If not available → Helvetica
- If not available → any sans-serif font
Font Categories
| Category | Style |
|---|---|
| Serif | Traditional with edges |
| Sans-serif | Clean modern style |
| Monospace | Equal spacing letters |
| Cursive | Handwriting style |
| Fantasy | Decorative style |
Example
h1{
font-family: serif;
}
p{
font-family: sans-serif;
}
2. Font Size
What is Font Size?
font-size changes the size of text.
Syntax
selector{
font-size: value;
}
Units Used
| Unit | Meaning |
|---|---|
| px | Pixels |
| em | Relative to parent |
| rem | Relative to root |
| % | Percentage |
| vw | Viewport width |
Most Common Unit → px
h1{
font-size: 40px;
}
Real Example
Small Text
p{
font-size: 14px;
}
Large Heading
h1{
font-size: 50px;
}
Real Website Logic
Different sizes create hierarchy.
Example:
- Heading → big
- Subheading → medium
- Paragraph → normal
- Footer → small
This helps users read easily.
Responsive Typography
Modern websites use responsive sizes.
Example:
h1{
font-size: 5vw;
}
The text grows/shrinks with screen size.
3. Font Weight
What is Font Weight?
font-weight controls thickness/boldness of text.
Syntax
selector{
font-weight: value;
}
Common Values
| Value | Meaning |
|---|---|
| normal | Normal text |
| bold | Bold text |
| 100-900 | Thickness levels |
Example
h1{
font-weight: bold;
}
Numeric Values
p{
font-weight: 300;
}
Weight Scale
| Value | Thickness |
|---|---|
| 100 | Very thin |
| 400 | Normal |
| 700 | Bold |
| 900 | Extra bold |
Real Example
h1{
font-weight: 800;
}
p{
font-weight: 300;
}
Result:
- Heading becomes strong
- Paragraph becomes light and elegant
Real Design Logic
Heavy fonts grab attention.
Used for:
- Headlines
- Buttons
- Important messages
Light fonts create elegance.
Used for:
- Modern UI
- Luxury brands
- Minimal designs
4. Font Style
What is Font Style?
font-style changes text appearance like italic.
Syntax
selector{
font-style: value;
}
Values
| Value | Meaning |
|---|---|
| normal | Default |
| italic | Italic text |
| oblique | Slanted text |
Example
p{
font-style: italic;
}
Real Example
.quote{
font-style: italic;
}
Used for:
- Quotes
- Poetry
- Emphasis
- Special text
Real Life Logic
Books often use italic text for:
- Thoughts
- Foreign words
- Important emphasis
Websites follow the same typography tradition.
5. Web Safe Fonts
What are Web Safe Fonts?
These are fonts commonly installed on most devices.
Meaning:
- They work almost everywhere
- Safer compatibility
- No download needed
Popular Web Safe Fonts
| Font | Style |
|---|---|
| Arial | Modern |
| Verdana | Very readable |
| Times New Roman | Traditional |
| Courier New | Typewriter |
| Georgia | Elegant |
Example
body{
font-family: Arial, sans-serif;
}
Why Important?
If a user does not have a font:
- Browser changes the font
- Design may break
Web safe fonts reduce this problem.
6. Google Fonts Integration
What is Google Fonts?
Google provides free online fonts for websites.
Instead of depending only on system fonts, developers can use beautiful custom fonts.
Why Use Google Fonts?
Benefits:
- Modern typography
- Professional look
- Huge font collection
- Free to use
- Easy integration
Step-by-Step Integration
Step 1: Visit Google Fonts
Step 2: Choose Font
Example:
- Poppins
- Roboto
- Open Sans
Step 3: Copy Link
Google provides code like this:
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
Paste inside <head>.
Step 4: Use Font in CSS
body{
font-family: 'Poppins', sans-serif;
}
Complete Example
HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Poppins', sans-serif;
}
h1{
font-size: 40px;
font-weight: 700;
}
p{
font-size: 18px;
font-style: italic;
}
</style>
</head>
<body>
<h1>Learning CSS Fonts</h1>
<p>Typography makes websites beautiful.</p>
</body>
</html>
Typography Best Practices
1. Use Readable Fonts
Good:
- Arial
- Roboto
- Open Sans
Avoid overly decorative fonts for paragraphs.
2. Keep Proper Size
Recommended:
- Paragraph → 16px to 18px
- Heading → 32px+
3. Maintain Contrast
Dark text + light background improves readability.
4. Avoid Too Many Fonts
Best practice:
- 2 fonts maximum
Example:
- One for headings
- One for paragraphs
5. Use Proper Line Height
Example:
p{
line-height: 1.8;
}
Improves reading comfort.
Real World Example
News Website
Needs:
- Simple readable font
- Comfortable spacing
- Professional style
CSS:
body{
font-family: Georgia, serif;
line-height: 1.7;
}
Portfolio Website
Needs:
- Modern stylish typography
CSS:
body{
font-family: 'Poppins', sans-serif;
}
Common Beginner Mistakes
| Mistake | Problem |
|---|---|
| Very small text | Hard to read |
| Too many fonts | Messy design |
| Bright text colors | Eye strain |
| No fallback font | Design inconsistency |
| Extra bold everywhere | No visual hierarchy |
Quick Revision
| Property | Purpose |
|---|---|
| font-family | Changes font type |
| font-size | Changes text size |
| font-weight | Controls boldness |
| font-style | Makes italic/slanted text |
Learning Outcome
After learning CSS Fonts, students will:
- Understand typography basics
- Use different font families
- Control text size and thickness
- Create elegant readable designs
- Use web safe fonts correctly
- Integrate Google Fonts professionally
- Build modern website typography systems
Typography is silent poetry in web design.
A well-chosen font speaks before the words are even read.
