CSS Typography

📚 Lesson 13 of 30 • ⏱ 11 min read • Beginner

font-family

CSS

/* Always end with a generic family as fallback */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Generic families: serif, sans-serif, monospace, cursive, fantasy */

code, pre {
  font-family: 'Courier New', Courier, monospace;
}

Google Fonts

HTML

<!-- In <head>, before your stylesheet -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

CSS

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

font-size

CSS

/* rem — relative to root (html) font size. Best for accessibility */
html { font-size: 16px; }  /* 1rem = 16px */
h1   { font-size: 2.5rem; }   /* 40px */
h2   { font-size: 2rem; }     /* 32px */
h3   { font-size: 1.5rem; }   /* 24px */
p    { font-size: 1rem; }     /* 16px */
small{ font-size: 0.875rem; } /* 14px */

/* em — relative to PARENT font-size. Useful for component-scoped sizing */
.card { font-size: 0.875em; } /* 87.5% of parent */

font-weight & font-style

CSS

.normal  { font-weight: 400; }  /* normal */
.medium  { font-weight: 500; }
.semibold{ font-weight: 600; }
.bold    { font-weight: 700; }
.italic  { font-style: italic; }

line-height & letter-spacing

CSS

p {
  line-height: 1.6;  /* unitless = relative to font-size. 1.5-1.8 for body text */
}

h1 {
  line-height: 1.2;    /* tighter for headings */
  letter-spacing: -0.02em; /* slightly tighten large headings */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;  /* space out uppercase labels */
  font-size: 0.75rem;
}

text-align & text-decoration

CSS

.center { text-align: center; }
.right  { text-align: right; }
.justify{ text-align: justify; }  /* even edges — avoid for screen, ok for print */

a       { text-decoration: underline; }
a:hover { text-decoration: none; }

.strike { text-decoration: line-through; }
.price-old { text-decoration: line-through; color: #999; }

white-space & overflow

CSS

/* Truncate long text with ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line clamp (modern) */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

← Media Queries Next: Backgrounds →