CSS Text and Fonts

CSS text and font properties control how words look and read: the typeface, size, weight, spacing and alignment. Good typography is the quickest way to make a page look professional.

Font Properties

• font-family: a list of fonts with a generic fallback, like Arial, sans-serif
• font-size: 16px, 1.25rem, 120%
• font-weight: normal, bold, or numbers from 100 to 900
• font-style: normal or italic
• line-height: space between lines; unitless values like 1.6 are best

Font Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { font-family: Georgia, "Times New Roman", serif; }
h1 { font-family: system-ui, sans-serif; font-weight: 800; font-size: 2rem; }
p { font-size: 18px; line-height: 1.7; }
.light { font-weight: 300; font-style: italic; }
</style>
</head>
<body>
<h1>Typography Matters</h1>
<p>Body text in a serif font with comfortable line height makes long reading easier.</p>
<p class="light">A lighter, italic paragraph.</p>
</body>
</html>

Text Properties

text-align aligns lines (left, center, right, justify). text-decoration adds or removes underlines. text-transform changes case. letter-spacing adjusts the gap between characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { font-family: sans-serif; }
.center { text-align: center; }
.caps { text-transform: uppercase; letter-spacing: 3px; }
a { text-decoration: none; color: #2563eb; }
a:hover { text-decoration: underline; }
.shadow { text-shadow: 2px 2px 4px rgb(0 0 0 / 30%); font-size: 28px; }
</style>
</head>
<body>
<p class="center">Centered text</p>
<p class="caps">spaced capitals</p>
<p><a href="#">Link without underline (hover me)</a></p>
<p class="shadow">Text with a shadow</p>
</body>
</html>

Using Google Fonts

To use a web font, link it in the head and then name it in font-family. Always keep a generic fallback in case the font fails to load.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Fonts</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap">
<style>
body { font-family: "Poppins", sans-serif; }
h1 { font-weight: 700; }
</style>
</head>
<body>
<h1>Poppins Heading</h1>
<p>This paragraph also uses Poppins at weight 400.</p>
</body>
</html>

Frequently asked questions

What is a font stack in CSS?

A comma-separated list in font-family. The browser uses the first font it has, so the list should end with a generic family such as sans-serif.

What is the best line-height for body text?

Around 1.5 to 1.7 for paragraphs. Use a unitless number so it scales with the font size.

How do I remove the underline from links in CSS?

Set text-decoration: none on the a element, and consider adding it back on hover or focus so links stay recognizable.