Most web designers focus on graphics, gradients, and custom illustrations. But the truth is, the vast majority of web content is text. If your typography is weak, your design is weak. In this post, we discuss the core typographic choices we made for our personal website to achieve a premium, readable, and highly technical aesthetic.

1. Choosing the Right Font Stack

For a developer portfolio, a monospaced font represents technical accuracy and structure, while a clean sans-serif represents modern utility. We opted for a hybrid approach: using Sans-Serif for body paragraphs to reduce cognitive strain, and high-quality Monospace (like Inter and JetBrains Mono) for headers, labels, and metadata.

2. The Magic of Line Length and Height

The single most common mistake in web layout is long lines of text. For optimal reading comfort, line length should be restricted to 60-80 characters. Any wider, and the eye struggles to find the start of the next line; any narrower, and the reading rhythm is broken.

"By setting our main text container to max-w-2xl (approx. 650px) and line-height to 1.625 (relaxed), reading feels natural and effortless on any screen size."

3. Designing with OKLCH Colors

Color contrast is crucial for typographic accessibility. Using OKLCH color spaces allows us to define hues based on human perception. This makes transitioning between dark and light themes mathematically consistent, ensuring that text contrast levels remain stable without manual tweaking.

/* OKLCH definitions in CSS */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
}

Focus on typography first. Set a solid font scale, dial in your line-height, restrict your paragraph width, and you'll instantly elevate the premium feel of your web applications.