For years, developer portfolios followed an austere template: Inter, Roboto, or monospace fonts on dark backgrounds. While functional, they often lacked personality. Today, a new wave of digital craftsmanship pairs editorial serif display faces with clean grotesque sans-serifs.
Why Instrument Serif?
Instrument Serif brings a warm, editorial dignity reminiscent of classic book typography and high-end print design. Its delicate terminals and tall x-height create an immediate focal point.
When paired with Geist Sans—an engineered, neutral font designed for interfaces—the contrast between literary elegance and technical precision creates a memorable visual identity.
Key Takeaway: The golden rule of type pairing: Pair fonts with distinct personalities, but keep their roles strictly partitioned (serif for display, sans for UI/body).
Hierarchy and Semantic Heading Tags
A common mistake when styling portfolios is sacrificing HTML semantics for aesthetic flair—such as styling <code> tags as section headings or skipping from h1 directly to h3.
True accessibility requires a valid document outline (h1 → h2 → h3), with styling applied via utility classes rather than hijacking semantic elements:
<h2>
<code className="rounded bg-black/[.06] px-1.5 py-0.5 font-serif text-2xl dark:bg-white/[.08]">
Projects
</code>
</h2>Conclusion
Typography is the bedrock of interface design. Thoughtful pairing elevates a portfolio from a generic resume into a curated digital workspace.