Applying Everything in Practice

Let's create styles for a long article where reading will be maximally pleasant.

.article {
  max-width: 65ch; /* Ideal line width for reading */
  margin: 0 auto;
  font-family: "Georgia", serif;
  font-size: 1.125rem; /* Slightly larger than standard */
  line-height: 1.6;
  color: #1a1a1a;
  text-rendering: optimizeLegibility;
}

.article h1 {
  font-family: "Inter", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em; /* Tighten letters in heading */
}

.article p + p {
  text-indent: 1.5rem; /* First line of paragraph if no top margin */
  margin-top: 0;
}

Why This Works?

• 65ch: Eye doesn't get tired running left to right.
• Serif for text: Serifs help gaze glide along the line.
• Inter for headings: Modern contrast with classic text.
• letter-spacing: Negative value makes bold heading dense and professional.