Typography and Text Styling

Font Families and Fallbacks

Always define a font stack so users get a consistent experience even if a custom font fails to load.

body {
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

Font Sizes and Line Height

Use rem for scalable typography and set a comfortable line height for readability.

:root { font-size: 16px; }

h1 { font-size: 2.5rem; line-height: 1.2; }
p { font-size: 1rem; line-height: 1.6; }

Font Weight, Style, and Spacing

h1 { font-weight: 700; }
em { font-style: italic; }

.title { letter-spacing: 0.5px; }
.caption { word-spacing: 2px; }

Text Alignment & Decoration

p { text-align: left; }
.center { text-align: center; }
.caps { text-transform: uppercase; }
a { text-decoration: underline; }
.muted { text-decoration: none; }

Truncation & Line Clamping

Keep text tidy when space is limited:

/* Single-line ellipsis */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

Readable Line Length

Comfortable reading is around 60–75 characters per line:

.content {
  max-width: 65ch;
  line-height: 1.6;
}

Loading Custom Fonts

Use @font-face and prefer modern formats like WOFF2.

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}