CSS Text & Fonts
This post covers all essential CSS properties for controlling text styling, font settings, spacing, and web fonts — everything you need to make your content readable, stylish, and responsive.
✅ Font Basics
font-family
Defines the font stack to use:
body {
font-family: 'Poppins', Arial, sans-serif;
}
💡 Always include fallbacks and a generic family like sans-serif
, serif
, or monospace
.
font-size
Sets the size of the font:
h1 {
font-size: 2rem; /* or px, %, em */
}
Use relative units like em
, rem
for better scalability.
font-weight
Sets how bold the text is:
p {
font-weight: 400; /* normal: 400, bold: 700 */
}
font-style
Used for italic or oblique fonts:
em {
font-style: italic;
}
font
Shorthand for multiple font properties:
p {
font: italic 400 16px/1.5 'Open Sans', sans-serif;
}
Text Styling
text-align
Aligns text horizontally:
h2 {
text-align: center; /* left, right, justify */
}
text-decoration
Applies decoration like underline:
a {
text-decoration: none;
}
Options: underline
, overline
, line-through
, none
text-transform
Controls case styling:
p.upper {
text-transform: uppercase; /* lowercase, capitalize */
}
text-indent
Indents the first line:
p {
text-indent: 2em;
}
text-shadow
Adds a shadow to text:
h1 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
Line Height & Spacing
line-height
Controls vertical spacing between lines:
body {
line-height: 1.6;
}
letter-spacing
& word-spacing
h1 {
letter-spacing: 1px;
word-spacing: 3px;
}
White Space & Wrapping
white-space
Controls how white space is handled:
pre {
white-space: pre-wrap;
}
Values:
normal
(default)nowrap
pre
,pre-wrap
,pre-line
word-break
and overflow-wrap
p {
word-break: break-word;
overflow-wrap: break-word;
}
These prevent long words from breaking layouts.
direction
Sets text direction:
body {
direction: rtl; /* or ltr */
}
🔗 Using Web Fonts
Google Fonts
- Go to Google Fonts
- Copy the
<link>
tag:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
- Add to your HTML
<head>
, then use in CSS:
body {
font-family: 'Roboto', sans-serif;
}
@font-face
(Self-hosted Fonts)
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
}
Use like this:
body {
font-family: 'MyFont', sans-serif;
}
Pro Tips
- Use
rem
for font sizing across your site for better control. - Keep
line-height
around1.4–1.8
for readability. - Avoid using too many different fonts — 2 is ideal.
- Use
text-align: justify
carefully; it can create awkward spaces.
Final Example
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
word-spacing: 1px;
letter-spacing: 0.2px;
}
h1 {
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}