🔤 Text and Typography Properties

Typography on the Web

Typography is the art of arranging type so written language is legible, readable, and appealing. On the web it does far more than decorate — it establishes hierarchy, signals brand identity, and directly shapes how easily someone can read your content. Get it right and readers never notice; get it wrong and they leave.

💬 "Typography is what language looks like." — Ellen Lupton. Just as different voices can deliver the same sentence with different tone, typography gives your text a visual voice that carries meaning beyond the words.

CSS splits typographic control into two families of properties: font properties (which typeface, how big, how bold) and text properties (alignment, spacing, decoration, and overflow of the rendered text). We will cover both, favoring modern, accessible defaults throughout.

Font Families & Web Fonts

The font-family property takes a comma-separated stack. The browser uses the first family it can find and falls back to the next. Always end with a generic family so there is a sensible last resort.

/* Specific fonts, then a generic fallback at the end */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The five classic generics plus two modern keywords */
.serif      { font-family: serif; }
.sans       { font-family: sans-serif; }
.mono       { font-family: monospace; }
.system     { font-family: system-ui; }        /* the OS's native UI font */
.emoji-safe { font-family: system-ui, "Segoe UI Emoji", sans-serif; }

Think of a font stack like listing your preferred voice actors with understudies: if your first pick is unavailable, the show still goes on with someone similar.

Using web fonts

Beyond fonts the user already has installed, you can ship your own with @font-face or pull them from a service. Prefer the modern WOFF2 format and always set font-display: swap so text is visible while the font loads.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;   /* a variable font covers a whole weight range */
  font-style: normal;
  font-display: swap;     /* show fallback text immediately, swap when ready */
}

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

<!-- Google Fonts: preconnect first, then load the stylesheet -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Sizing Text

The font-size property accepts absolute units, relative units, percentages, and keywords. Which you choose has real accessibility consequences.

/* Absolute — ignores user preferences */
h1 { font-size: 32px; }

/* Relative to the PARENT's computed font-size (compounds when nested) */
.child { font-size: 1.25em; }

/* Relative to the ROOT (html) font-size — does NOT compound */
p { font-size: 1rem; }      /* usually 16px unless the user changed it */

/* Percentage of the parent's font-size */
small { font-size: 85%; }

A modern touch is fluid typography with clamp(), which sets a minimum, a preferred (viewport-scaled) value, and a maximum in one line — no media queries needed:

h1 {
  /* never smaller than 1.75rem, never larger than 3rem, fluid in between */
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}

Weight, Style & Variant

font-weight

Weight is the thickness of the strokes — like the volume of a voice. Keywords normal (400) and bold (700) map onto a numeric 100–900 scale.

.thin    { font-weight: 100; }
.light   { font-weight: 300; }
.regular { font-weight: 400; }  /* same as normal */
.semi    { font-weight: 600; }
.bold    { font-weight: 700; }  /* same as bold */
.black   { font-weight: 900; }

Not every typeface ships every weight. If a weight is missing, the browser picks the nearest one available. Variable fonts, by contrast, offer a continuous range so any value in between works.

font-style

.normal  { font-style: normal; }
.italic  { font-style: italic; }   /* uses the font's true italic glyphs if present */
.oblique { font-style: oblique 14deg; } /* a mechanical slant of the upright glyphs */

font-variant & small caps

The classic use of font-variant is small caps — capital letterforms sized like lowercase, great for acronyms and refined headings. Modern CSS splits this into more precise sub-properties.

.acronym { font-variant: small-caps; }

/* Granular, modern controls */
.figures {
  font-variant-numeric: tabular-nums oldstyle-nums;  /* aligned, old-style digits */
  font-variant-caps: small-caps;
  font-variant-ligatures: common-ligatures;
}

The font Shorthand

The font shorthand sets several properties at once. The order matters, and font-size and font-family are required — omit anything else and it resets to its initial value.

/* order: style variant weight size/line-height family */
p {
  font: italic small-caps 700 1rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Spacing for Readability

line-height

line-height sets the vertical space each line occupies. Use a unitless value — it multiplies the element's own font size and, crucially, inherits sanely into children (a unit like 1.5em computes once on the parent and can crowd differently-sized descendants).

body     { line-height: 1.5; }   /* comfortable for body copy */
h1, h2   { line-height: 1.2; }   /* headings look better tighter */

letter-spacing & word-spacing

letter-spacing (tracking) adjusts gaps between characters; word-spacing adjusts gaps between words. Prefer em here so the spacing scales with the text.

.badge {
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* all-caps almost always needs positive tracking */
}

h1 { letter-spacing: -0.02em; }  /* large display text often wants tighter tracking */

.spaced-out { word-spacing: 0.25em; }

Text-Level Properties

text-align

.article  { text-align: left; }     /* most readable for LTR languages */
.headline { text-align: center; }   /* short blocks only */
.rtl      { text-align: right; }    /* RTL languages, numeric table columns */
.print    { text-align: justify; }  /* even edges, but watch for "rivers" */

Left alignment is the safe default for left-to-right languages. Justified text can open ugly "rivers" of whitespace in narrow columns, so use it deliberately.

text-decoration

a { text-decoration: none; }

/* The modern longhands give you full control */
.link {
  text-decoration-line: underline;
  text-decoration-style: wavy;        /* solid | double | dotted | dashed | wavy */
  text-decoration-color: var(--primary-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;         /* breathing room under the text */
}

text-transform

.caps  { text-transform: uppercase; }
.title { text-transform: capitalize; }
.lower { text-transform: lowercase; }

Prefer text-transform: uppercase over typing in all-caps in your HTML. The underlying text stays properly cased for screen readers and search engines, and you keep the option to change presentation later.

text-shadow

/* offset-x offset-y blur-radius color */
.hero-title { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }

/* Layer multiple shadows for a glow or outline */
.outline {
  color: var(--card-bg);
  text-shadow: 1px 1px 0 var(--text-color), -1px -1px 0 var(--text-color);
}

Shadows shine for lifting text off busy hero images, but restraint matters: heavy shadows hurt legibility, and the text should still read acceptably without them.

Overflow: white-space & text-overflow

To truncate a single line with an ellipsis you need three properties working together:

.truncate {
  white-space: nowrap;      /* keep it on one line */
  overflow: hidden;         /* clip what spills out */
  text-overflow: ellipsis;  /* show the tell-tale … */
}

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

Hands-on Exercise

.poster h1 {
  font-family: system-ui, sans-serif;
  font-size: clamp(2.5rem, 1rem + 8vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--primary-color);
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.news p:first-of-type::first-letter {
  font-size: 3.2em;
  float: left;
  line-height: 0.8;
  padding-right: 0.08em;
  font-weight: 700;
}

Summary & Quiz

📚 Further Reading

• MDN — CSS Fonts
• web.dev — Learn CSS: Typography
• Google Fonts  •  Type Scale calculator

🚀 What's Next?

Next we turn from letterforms to hue: Colors, Backgrounds, and Gradients — every way CSS lets you specify colour, plus backgrounds and the three kinds of gradients.