CSS Text Styling

Beginner ~8 min read

Typography Fundamentals

Text styling is crucial for readability and visual hierarchy. CSS provides powerful properties to control how text appears on your website.

Font Family

The font-family property specifies which font to use. Always provide fallback fonts in case the primary font isn't available.

HTML

CSS

<h1>Different Font Families</h1>
<p class='serif'>This uses a serif font (Times New Roman)</p>
<p class='sans'>This uses a sans-serif font (Arial)</p>
<p class='mono'>This uses a monospace font (Courier)</p>

Font Weight

The font-weight property controls how bold or light text appears. Values range from 100 (thin) to 900 (black), or use keywords like normal and bold.

HTML

CSS

<p class='light'>Light text (300)</p>
<p class='normal'>Normal text (400)</p>
<p class='semibold'>Semi-bold text (600)</p>
<p class='bold'>Bold text (700)</p>

Font Style & Line Height

font-style makes text italic, and line-height controls spacing between lines for better readability.

HTML

CSS

<p class='normal-text'>Normal text</p>
<p class='italic-text'>Italic text</p>
<p class='tall-lines'>This paragraph has increased line height for better readability. Notice how the lines are spaced further apart.</p>

Best Practice: Use line-height: 1.5 to 1.8 for body text to improve readability.

Key Takeaways

font-family - Choose fonts with fallbacks
font-size - Control text size (px, em, rem)
font-weight - Make text bold or light (100-900)
font-style - Make text italic
line-height - Space between lines (1.5-1.8 recommended)

Quick Quiz

Which property controls the boldness of text?

font-size

font-weight

font-style

font-family

Previous Colors

Next Text Formatting

Typography Fundamentals

Font Family

Font Size

Font Weight

Font Style & Line Height

Key Takeaways

Quick Quiz

Enjoying these tutorials?