CSS Typography

Introduction

Typography controls how text looks on a webpage — fonts, spacing, readability, alignment, weight, and overall visual hierarchy. Good typography is what makes a design look clean and professional.

1. Font Family

body {
  font-family: "Inter", Arial, sans-serif;
}

2. Font Size

p {
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

3. Responsive Font Sizes

h1 {
  font-size: clamp(24px, 4vw, 40px);
}

4. Font Weight

h1 { font-weight: 700; }
p  { font-weight: 400; }

5. Line Height (crucial for readability)

p {
  line-height: 1.6;
}

6. Letter Spacing

h2 {
  letter-spacing: 1px;
}

7. Text Transform

.uppercase { text-transform: uppercase; }
.capital   { text-transform: capitalize; }

8. Text Alignment

p {
  text-align: justify;
}

9. Text Decorations

a {
  text-decoration: none;
}

10. Web Safe Fonts

11. Using Google Fonts

12. Text Shadows

h1 {
  text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
}

13. Max Width for Better Reading

p {
  max-width: 700px;
}

14. Vertical Rhythm

Keep consistent spacing between text elements.

p, h1, h2, h3 {
  margin-bottom: 20px;
}

15. Using rem Instead of px

html { font-size: 16px; }

p { font-size: 1rem; }
h1 { font-size: 2rem; }

16. Hyphenation

p {
  hyphens: auto;
}

Summary