Text Styling
📌 Covered in this chapter:
font-size · line-height · letter-spacing · word-spacing · text-align · text-decoration · text-transform · text-indent · text-shadow · white-space · text-overflow · ellipsis · Readability · Typography Scale
Welcome to Chapter 17: Text Styling — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Font Size, Line Height & Spacing
CSS — Readable Text▶ Try in Editor
.description {
max-width: 65ch;
line-height: 1.6;
color: #4b5563;
font-size: 1rem;
letter-spacing: 0.01em;
word-spacing: normal;
}Readability: Body text line-height: 1.5–1.7, max width 65ch, sufficient contrast.
2Text Alignment, Decoration & Transform
CSS
h1 { text-align: center; text-transform: capitalize; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.label { text-transform: uppercase; letter-spacing: 0.05em; }
.quote { text-indent: 2rem; }3Text Shadow, White Space & Ellipsis
CSS
.hero-title {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preserve {
white-space: pre-wrap;
}4Typography Scale
CSS — Type Scale
:root {
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
}Consistent modular scale — design system lo headings and body harmonious ga untayi.