CSS Fundamentals

Typography

⏱ 6 min read📖 Beginner

CSS typography controls how text looks — the font family, size, weight, line height, spacing, and color. Good typography is the foundation of readable, professional-looking pages.

Most of what users read on a web page is text. Getting typography right makes the difference between a page that feels polished and one that feels off, even if the reader can't say why.

Font Family

The font-family property sets the typeface. Always provide fallbacks in case the first font isn't available:

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

The browser tries each font in order and uses the first one it can find. The final value (sans-serif) is a generic fallback built into every browser.

Font Weight

Font weight ranges from 100 (thin) to 900 (black). Common values:

font-weight: 400;   /* regular / normal */
font-weight: 500;   /* medium */
font-weight: 600;   /* semibold */
font-weight: 700;   /* bold */
font-weight: 800;   /* extrabold */
font-weight: 900;   /* black / heavy */

Line Height

line-height controls the vertical space between lines of text. A unitless value is recommended — it scales relative to the font size:

p {
  line-height: 1.7;  /* comfortable for body text */
}

h1 {
  line-height: 1.2;  /* tighter for headings */
}

💡

For body text, a line height between 1.5 and 1.8 is usually ideal. Headings look better tighter, around 1.1–1.3. Long lines of text need more line height to remain scannable.

Letter Spacing

letter-spacing adds or removes space between characters. Use it subtly — a small amount goes a long way:

/* Slightly tighter for large headings */
h1 {
  letter-spacing: -0.02em;
}

/* Wider for small uppercase labels */
.label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Text Transform

text-transform: uppercase;    /* ALL CAPS */
text-transform: lowercase;    /* all lowercase */
text-transform: capitalize;   /* First Letter Of Each Word */

Text Alignment

text-align: left;    /* default */
text-align: center;
text-align: right;
text-align: justify; /* spread text to fill the full width */

Color

Use color for text color. Prefer hex values or HSL for predictable results:

body {
  color: #0f172a;         /* near-black for main text */
}

p {
  color: #374151;         /* slightly softer for body copy */
}

.muted {
  color: #64748b;         /* muted gray for secondary text */
}

Loading Web Fonts

To use a custom font like Inter or Nunito, load it from Google Fonts in your HTML <head>:

<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">

Then reference it in your CSS:

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

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.