Design notes · Typography

Why these typefaces

How I chose the type for this site and why. A short read on the decisions behind the design: what the type has to do, why I chose these three, and how they work together.

01

What the type has to do

Four requirements. Every choice that follows answers to them.

01

Lead with evidence

The numbers carry the argument. Metrics, outcomes, and sources need to read at a glance and hold up on a second look.

02

Read as editorial, not corporate

The site should feel like a well-set page, with strong type, real hierarchy, and generous rules, rather than a product landing page or a tech deck.

03

Show craft as proof

A career built on typography has to look it. The typesetting itself is evidence of the judgment the work describes.

04

Hold together everywhere

The same system has to work on the site, in a printed résumé, in social share images, and on a LinkedIn banner viewed on a phone.

02

Why these three

Each family does a job the other two can't. I chose them by setting the type at the sizes the brand actually uses and reading it there.

The briefThe starting point

Three families, three jobs, and the flexibility of variable type.

The system needed a serif voice for judgment, a plain sans for long passages, and a monospace for labels and data, without the three competing for attention.

I also wanted variable typefaces. A variable font holds a range of weights, and sometimes optical sizes, in one file, so each use can be tuned instead of picked from a short list of fixed styles. That flexibility is what lets one system cover a hero headline and a 48px avatar.

LinkedIn banner48px avatarPrinted résuméPhone body column
NewsreaderDisplay · serif

A serif built for reading on screens, with an editorial voice.

Newsreader was designed by Production Type for on-screen reading, and it carries the feel of a well-made magazine. I trust the foundry's craft, and it shows in how the type holds up at every size.

It works from an avatar to a hero headline because it has an optical-size axis: the letterforms adjust for the size they're set at, sturdier when small and more refined when large. That's why one family can carry the wordmark, the headlines, and the metric figures.

Hanken GroteskText · sans

Neutral on purpose, so the serif and the numbers stay loud.

The body sans has one job: stay out of the way. Hanken Grotesk reads cleanly at body size, so a reader gets through a case study without noticing the type, and its plain, even letterforms sit comfortably next to Newsreader.

Choosing it this way, by reading it rather than reaching for a familiar name, is the habit my research is about. In the Type Default Audit, I asked three AI model families to recommend typefaces 1,890 times. They named 1,029 typefaces, and about 40 of them carried half the answers. Defaults are where tools, and people, go without thinking. Every family on this site was chosen by setting it and reading it.

Spline Sans MonoDetail · mono

The details get their own voice.

In this system, monospace marks metadata: a label, a date, an index, a source. Spline Sans Mono is a humanist monospace rather than a coding-terminal face, so it carries that signal without reading as developer tooling, and it keeps its personality at the small sizes where labels live.

It's used only small and uppercase. That restriction is deliberate: once mono shows up in a paragraph, it stops signaling anything.

The pairingHow the three hold

Contrast by family, not by weight.

Hierarchy comes from three clearly different voices at a small number of sizes, rather than many weights of one family. A heading, a paragraph, and a label are easy to tell apart at a glance, and the variable axes let each be tuned for where it appears.

03

The type in use

Three families, three jobs: a serif for voice, a sans for clarity, and a mono for labels and data. Hierarchy comes from family and scale, not from stacking weights.

Display · SerifNewsreaderWordmark · headlines
pull quotes · figures

Judgment, set in type

AaBbCcDdEe · 0123456789 · &?!

The voice of the brand. Used for the wordmark, every headline, metric figures, and italic pull quotes.

Text · SansHanken GroteskBody · navigation
buttons · UI

Clear, plain prose

AaBbCcDdEe · 0123456789 · &?!

The workhorse for body copy, lead-ins, navigation, and buttons. Set at a comfortable 17px with generous line spacing. It keeps long passages quiet so the serif and the numbers stand out.

Detail · MonoSpline Sans MonoLabels · meta
indices · captions

Meta / 01

AaBbCcDdEe · 0123456789 · &?!

The connective tissue: eyebrow labels, section indices, dates, and citations. Always small, uppercase, and widely spaced. It signals metadata and never appears in body text.

The scale

DisplayNewsreader
58–138px
Nicole Miñoza
SectionNewsreader
30–50px
Signature work
SubheadNewsreader
20–29px
How I lead
QuoteNewsreader italic
20–27px
“Praised as the best annual strategy presentation they'd ever seen.”
BodyHanken Grotesk
17px
Numbers carry the argument. The design gives data room to breathe rather than dressing it up.
LabelSpline Sans Mono
11.5px
Product & Product Marketing
Why it matters

Choosing type is a small version of the job: set the requirements, weigh the options, commit, and explain the call. Everything on nicoleminoza.com is set in these three.