Text Styling with CSS
Making Your Words Worth Reading
The Typography Disaster
What exactly am I looking at? The client said they "spiced up" their website, but this looks like seven different fonts had a violent street fight on the screen.
IT'S MAGNIFICENT! Look at that heading—Comic Sans AND Papyrus together at last! It's like watching matter and antimatter collide! *chef's kiss* Pure chaos!
This... this ABOMINATION is a SECURITY RISK! Users will be so DISORIENTED they'll click ANYTHING just to escape! It's like PSYCHOLOGICAL WARFARE!
I... um... thought fonts were just personal preference? My free tutorial said—
No, Cody. Typography is a cornerstone of user experience design. It's not just aesthetic—it's functional. A website with poor text styling is like trying to read a novel written in refrigerator magnets.
You know what I love most? The center-aligned paragraphs that are ALSO justified. That's advanced level confusion right there. Premium tier incomprehensibility.
Unfortunately, our contract explicitly states that we'll "implement client-requested styling changes." But it doesn't say we can't... educate them first.
Let me guess... client discovered the font dropdown menu?
And the text-align property. And font-size. All at once. With no restraint.
Could we maybe... create a sample to show them? With proper styling?
*drops a stylish collar with "TYPOGRAPHY MATTERS" engraved on it* Woof!
See that? Clean font, proper spacing, high contrast, perfect alignment. Snowzie understands the importance of legibility even on a dog collar. Let's create a proper text styling guide to show the client.
What We'll Learn
In this episode, we'll explore three essential CSS properties for styling text:
font-family
Choose the typeface for your text - the actual design of the letters, numbers, and symbols.
font-size
Control how large or small your text appears on the screen.
text-align
Determine how text is aligned within its container (left, right, center, or justified).
The Problem: Typography Gone Wild
Welcome to My Cool Website!!!
This is my awesome site where I talk about all the things I like. I'm using lots of different fonts because I think it makes my site look more interesting and fun! Don't you think it's great? I spent hours picking all these fonts!
Click here to see more cool stuff!!!Welcome to My Website
This is my personal site where I share my interests and projects. I've used consistent typography to make the content easy to read and navigate.
Click here to explore more
Wait, you're saying the one on the left ISN'T better? But it's so... expressive!
Typography should serve the content, not distract from it. Good typography is often invisible - it helps users read without even thinking about the fonts.
1. Font Family
The font-family property sets the typeface for your text. You can specify multiple fonts in order of preference, with a generic family as a fallback.
font-family: 'Open Sans', Arial, sans-serif;
Always include fallback fonts. Not all computers have the same fonts installed. The last option should be a generic family like sans-serif, serif, or monospace.
Font Family Types
Serif Fonts
Have small lines at the ends of characters
The quick brown fox jumps over the lazy dog.
font-family: 'Times New Roman', Times, serif;
Sans-Serif Fonts
Clean fonts without the small lines
The quick brown fox jumps over the lazy dog.
font-family: Arial, Helvetica, sans-serif;
Monospace Fonts
Each character has the same width
The quick brown fox jumps over the lazy dog.
font-family: 'Courier New', Courier, monospace;
Display/Fantasy Fonts
Decorative fonts for special purposes
The quick brown fox jumps over the lazy dog.
font-family: Impact, fantasy;
USE DISPLAY FONTS SPARINGLY! They're like hot sauce - a little adds flavor, too much ruins the meal. And NEVER use Comic Sans unless you want your site to scream "I LEARNED HTML IN 1997!"
Try It: Change the Font Family
This is a heading
This paragraph demonstrates how this font family looks in normal text. Good typography should be readable and appropriate for your content.
2. Font Size
The font-size property controls the size of your text. You can use different units like pixels (px), em, rem, or percentages.
font-size: 16px; /* Absolute unit in pixels */ font-size: 1.5em; /* Relative to parent element */ font-size: 1.5rem; /* Relative to root element */
For responsive design, it's better to use relative units like em or rem rather than fixed pixel sizes. This allows text to scale based on user preferences.
Font Size Examples
Bigger isn't always better. Using a proper hierarchy of sizes makes your content more scannable and helps users understand what's important.
Try It: Change the Font Size
This text will change size based on the slider value. Good typography maintains readability at different sizes.
3. Text Alignment
The text-align property controls how text is aligned within its container.
text-align: left; /* Default in left-to-right languages */ text-align: center; text-align: right; text-align: justify; /* Spreads text to fill the width */
For most content, left alignment is most readable. Center alignment works for short headings, but not for paragraphs. Justified text can create awkward spacing on the web.
Text Alignment Examples
Left Aligned (text-align: left)
This paragraph is aligned to the left. This is the most common alignment for body text in languages that read from left to right. It provides a consistent starting point for each line, making it easy for readers to find the beginning of the next line.
Center Aligned (text-align: center)
This paragraph is centered. Center alignment works well for headings, short quotes, or other brief text elements that you want to emphasize. However, it can be difficult to read for longer blocks of text because the starting point of each line is different.
Right Aligned (text-align: right)
This paragraph is aligned to the right. Right alignment is less common for main content but can be useful for specific elements like dates in a timeline, or in languages that read from right to left. It provides a consistent ending point for each line.
Justified (text-align: justify)
This paragraph is justified, which means the text is spread out to align with both the left and right margins. While this creates neat, straight edges on both sides, it can result in uneven spacing between words, especially with narrow columns. Justified text is common in print but can reduce readability on the web.
But what if I want DIAGONAL text alignment? Or text that forms a spiral? Or maybe text that's upside down?
NO! JUST... NO! Text is meant to be READ, not to induce MIGRAINES! Stick to the standard alignments unless you want users to FLEE your website in TERROR!
Try It: Change the Text Alignment
Sample Heading
This is a paragraph that demonstrates text alignment. You can see how the text flows differently based on the alignment option you select. Good typography considers how alignment affects readability. For most content, left alignment provides the best reading experience because it gives readers a consistent starting point for each line.
Putting It All Together
Let's combine font-family, font-size, and text-align to create a cohesive typography system:
/* Base styles for the whole document */ body { font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } /* Heading styles */ h1 { font-family: 'Merriweather', Georgia, serif; font-size: 2.5rem; text-align: center; } h2 { font-family: 'Merriweather', Georgia, serif; font-size: 2rem; text-align: left; } /* Paragraph styles */ p { text-align: left; margin-bottom: 1rem; }
Notice how we're using a serif font for headings and a sans-serif font for body text. This creates visual hierarchy while maintaining readability.
Typography Best Practices
Do
- Limit your design to 2-3 font families
- Create a clear size hierarchy (headings to body text)
- Ensure sufficient contrast between text and background
- Use left alignment for most content
- Include fallback fonts and generic families
- Set an appropriate line-height (1.4-1.6 for body text)
Don't
- Mix too many different fonts on one page
- Use fonts that are difficult to read
- Set font sizes too small (below 14px for body text)
- Use center alignment for long paragraphs
- Rely on exotic fonts without proper fallbacks
- Use ALL CAPS for large blocks of text
So I should remove the blinking rainbow text from my portfolio? ...And the marquee tag? ...And the text that changes font every 3 seconds?
YES! ALL OF IT! IMMEDIATELY! And while you're at it, DEACTIVATE that text-shadow that makes everything look like it's ON FIRE!
Font Showcase Activity
Now it's your turn to create a font showcase! Use the CSS editor below to style the preview pane with font-family, font-size, and text-align properties.
Font Showcase
Demonstrating CSS Text Styling
This paragraph shows how body text appears with the current styling. Good typography enhances readability and helps users understand your content more easily.
"Typography is what language looks like."
— Ellen Lupton
Challenge:
Try creating a typography system with the following requirements:
- Use a serif font for headings and a sans-serif font for body text
- Create a clear size hierarchy between heading, subheading, and body text
- Make the quote centered and italic
- Add some line-height to improve readability
Mission Accomplished!
So with just these three properties - font-family, font-size, and text-align - we can make text much more readable?
Exactly! These are the foundation of good typography. There are more properties we can use later, but mastering these three will dramatically improve your designs.
The client's site may be a typographic disaster now, but with these principles, we can transform it into something readable and professional.
*happily wags tail and barks approvingly*
CODE IS COMMITTED!
Proper typography: making words worth reading since the invention of the printing press.