Typography Matters: Why I Chose 'Seriously Nostalgic'

Why I ditched standard sans-serifs for a font with soul in my latest Next.js build. A deep dive into branding, psychology, and the technical implementation of custom fonts.

Look at your browser tabs right now. Open three different SaaS landing pages. I’ll wait.

What do you see? I’d bet good money it’s a sea of Inter, Roboto, or San Francisco. Maybe, if they’re feeling particularly spicy, they went with Poppins. It’s clean. It’s safe. It’s accessible.

It is also incredibly boring.

We are currently living through a homogenization of the web. As I pivoted from churning out high-volume WordPress sites to building custom SaaS platforms on Next.js and Supabase, I fell into the same trap. I spun up create-next-app, installed Shadcn UI, and accepted the defaults. I wanted to ship fast. I wanted to be an "Indie Hacker." And somewhere along the way, I forgot that software is meant to be used by humans, not just processed by LLMs.

That is why I made a deliberate, possibly controversial choice for my personal brand and my recent projects. I chose a font called "Seriously Nostalgic."

This isn't just a design preference. It is an engineering decision, a branding strategy, and a rebellion against the sterile, corporate aesthetic that has taken over the cloud computing and SaaS space. Here is why typography matters more than your tech stack, and why I went retro in a world obsessed with the future.

The "SaaS Sans" Fatigue

When I was freelancing with WordPress, the typography was usually dictated by whatever theme the client bought for $59 on ThemeForest. I didn't have to think about it. But moving into the world of Cloud Engineering and building my own products from scratch, I suddenly had a blank canvas.

The default instinct for a developer is optimization. We look at fonts like Inter or Geist Sans and we see perfection. They have perfect x-heights, great legibility at small sizes, and massive variable font files that cover every weight imaginable. They are objectively "good" fonts.

But here is the problem with objective quality in design: when everyone uses the "best" tool, everything looks the same.

I’m building in public. I’m trying to convince people that a solo developer in Ireland can build systems as robust as a venture-backed team in San Francisco. If my site looks exactly like the default Vercel template, I have already lost the battle for attention. I needed a voice.

"Seriously Nostalgic" is a serif font. It’s elegant, slightly quirky, and screams 1980s editorial magazine. It is the antithesis of a tech dashboard. And that is exactly why it works.

Typography is the Interface

There is a saying among designers that "Web Design is 95% Typography." As an engineer, I used to roll my eyes at this. I thought web design was about state management, caching strategies, and database schemas.

I was wrong.

When a user lands on your application, they aren't looking at your clean code. They aren't admiring your Supabase row-level security policies. They are reading text. That is it. The text conveys the value. The text tells them what to do.

If that text feels cold, robotic, and generic, the user feels nothing. But if the text has personality? That builds trust.

Using a font like Seriously Nostalgic for headers creates a visual hierarchy that standard sans-serifs struggle to achieve without massive weight differences. It allows me to keep the body text clean (I still use a sans-serif for readability there) while giving the brand a distinct "accent."

It signals to the user: "A human built this. A human with taste."

The Technical Implementation in Next.js

Let’s get technical. I didn't just drag a TTF file into a folder and hope for the best. Integrating a custom, non-Google font into a high-performance Next.js application requires care. You have to worry about Cumulative Layout Shift (CLS), Flash of Unstyled Text (FOUT), and loading speeds.

Next.js 13+ (App Router) makes this surprisingly pleasant with next/font/local.

Here is how I set up Seriously Nostalgic to play nice with Tailwind CSS and Shadcn, ensuring zero layout shift.

First, I set up the font loader in my layout file. I am not using a CDN here. I am self-hosting the font file within the repo to ensure it serves from the same edge location as my HTML.

typescript import localFont from 'next/font/local'

const seriouslyNostalgic = localFont({ src: [ { path: './fonts/SeriouslyNostalgic-Regular.woff2', weight: '400', style: 'normal', }, { path: './fonts/SeriouslyNostalgic-Italic.woff2', weight: '400', style: 'italic', }, ], variable: '--font-nostalgic', display: 'swap', })

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en" className={${seriouslyNostalgic.variable}}> <body>{children}</body> </html> ) }

Notice the variable property. This is the bridge between the Next.js optimization engine and Tailwind.

Next, I configure tailwind.config.js. I don't want to manually type font-['Seriously_Nostalgic'] every time I need a header. I want it to be part of the design system.

javascript /** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { fontFamily: { // This sets it as the default for serif utilities serif: ['var(--font-nostalgic)', 'serif'], // Or purely as a display font display: ['var(--font-nostalgic)', 'serif'], }, }, }, }

Now, in my React components, I can simply use utility classes. This keeps the markup clean and the design consistent.

tsx

<h1 className="font-display text-4xl md:text-6xl text-primary"> Build Faster. </h1>

Because I'm using next/font, the font file is automatically optimized and preloaded. Next.js determines the fallback font metrics to ensure that when the font swaps, the text takes up the exact same amount of space. No jumping content. No layout shift. Just smooth, buttery performance.

Performance vs. Aesthetics: A Cloud Engineer's Take

In my Master's program, we talk a lot about optimization. Every kilobyte counts. AWS bills you for egress. Latency kills conversion.

So, can I justify adding a 40KB font file to my bundle?

Yes. Absolutely.

There is a concept in performance engineering called "Perceived Performance." It doesn't matter if your site loads in 100ms if it looks broken or unfinished. Conversely, users are willing to forgive a few extra milliseconds of load time if the experience feels premium.

However, we don't have to compromise. By using WOFF2 format (which has better compression than WOFF or TTF) and subsetting the font (removing characters I don't need, like Cyrillic or specialized symbols), I kept the file size negligible.

Furthermore, since I am deploying to Vercel (which runs on AWS infrastructure under the hood), these assets are cached at the Edge. The font file is delivered from a server physically close to the user, often faster than a Google Font request which requires a DNS lookup to a different origin.

We optimize images without thinking twice. We ship massive JavaScript bundles for interactivity. Why are we so stingy when it comes to the primary way users consume our content?

Branding for the Indie Hacker

I am not a VC-backed startup. I do not have a marketing department. I do not have a budget for A/B testing different shades of blue.

When you are an indie hacker, you are the brand. Your taste is the moat.

Using "Seriously Nostalgic" creates a specific vibe. It feels a bit retro. It feels like a throwback to when the internet was weird and personal. It aligns with the "Indie" in Indie Hacker.

It contrasts sharply with the "Corporate Memphis" art style and generic sans-serifs of the Big Tech companies. It signals that I am building for the sake of building, not just to exit to Salesforce in 18 months.

This choice influences how I write copy, too. When you are typing in a font that looks like a 1970s fashion magazine header, you can't write dry, technical jargon. You are forced to write with more flair. You write headlines that punch. You write stories.

The Psychology of Serifs in a Digital Age

For a long time, the rule was: "Serifs for print, Sans-serifs for screens." The logic was that low-resolution screens couldn't render the fine details of serifs clearly.

That logic is dead. We have Retina displays. We have 4K monitors. We have sub-pixel antialiasing. Screens are now better than paper.

Yet, the association remains. Serifs feel "old school." But in a digital context, "old school" now means "authoritative." It means "established."

When I put a technical tutorial about AWS Lambda or Next.js Middleware under a Serif header, it subconsciously adds weight to the content. It moves the content from "random blog post" to "published article."

It also reduces eye fatigue. This is debated, but many typographers argue that the distinct shapes of serif letters make them easier to distinguish, allowing for faster recognition. While I use a sans-serif for long blocks of code and body text, the serif headers act as clear, distinct signposts that break up the rhythm of the page.

Breaking the Shadcn Mold

I love Shadcn UI. It has revolutionized how fast I can ship. The copy-paste nature of it aligns perfectly with my goal of freedom and speed.

But the danger of Shadcn is that it encourages laziness. You paste the button component, you paste the card component, and you are done. The result is a site that looks like... well, a Shadcn site.

By simply changing the typography global variables, I completely transformed the feel of the component library.

Check out how a simple card looks with standard Inter versus Seriously Nostalgic headers.

tsx // The Standard Way (Boring) <Card> <CardTitle className="font-sans">Deploy to the Edge</CardTitle> <CardDescription>Global low latency at scale.</CardDescription> </Card>

// The Asika Way (Distinct) <Card> <CardTitle className="font-display text-2xl tracking-tight"> Deploy to the Edge </CardTitle> <CardDescription>Global low latency at scale.</CardDescription> </Card>

The code change is minimal. The visual impact is massive. It takes the component from "bootstrapped prototype" to "bespoke product" instantly.

Freedom in Design

This pivots back to why I am doing this in the first place. Freedom.

When I was a freelancer, I built what others wanted. Now, as I study Cloud Computing and build my own SaaS products, I build what I want.

Choosing a font like "Seriously Nostalgic" is a small exercise of that freedom. It is a rejection of the "best practices" that say everything must look like Linear or Airbnb.

It is okay to be decorative. It is okay to be expressive. In fact, in the age of AI-generated content where ChatGPT churns out the same generic advice in the same generic tone, being expressive is the only way to prove you are actually there.

Final Thoughts

If you are an engineer looking to step up your design game, stop looking at color palettes. Stop looking at complex CSS animations.

Look at your type.

Go to a site like Creative Market or check out independent type foundries. Buy a font. Yes, actually pay money for a font file (or find a high-quality open-source one that isn't Roboto).

Integrate it into your Next.js project. Configure Tailwind to use it.

Watch how it changes the way you view your own product. It gives it a soul. And when you are grinding at 2 AM trying to fix a Supabase connection string or debug an AWS permission error, looking at a UI that has a soul makes the work a hell of a lot easier.

Typography matters. It is the voice of your code. Make sure it doesn't sound like a robot.