One Typeface, Many Voices: Hierarchy Without a Second Font

When a page feels flat, the usual fix is a second typeface. Pair a serif with a sans, and the headline suddenly stands apart. It works, but it is often a shortcut around a harder question: what is each piece of text supposed to do?

A single family can answer that question with more precision. You need four controls and the discipline to use them consistently.

Why the second font is usually a shortcut

A second typeface creates contrast for free. Two different skeletons are obviously different, so the eye sorts them without help.

The cost shows up later. Two families mean two sets of metrics, two loading budgets, and two sets of decisions every time a new component is designed. Contrast that is built into the font can hide a weak hierarchy. Contrast you build yourself, with size, weight, tracking and opacity, has to be deliberate, so it tends to be better.

Size: pick a ratio and commit

Hierarchy starts with scale. The Urbanist system we use at Artasce is built on a 1.25 ratio (Major Third), with values rounded to numbers that sit cleanly on a grid. Body is 16px. Headings step up through 20, 24, 32, 40, 56 and 72px. Above those sits Display, which scales fluidly from 72px to 140px.

The point is not the exact math. It is that every size has one job, so no one eyeballs a new heading size on a Friday afternoon.

Weight: heavier is not always higher

The system uses four weights: 400, 500, 600 and 700. Loading only those keeps the font payload small.

The assignment is less obvious than “bigger means bolder.” H1 through H3 sit at 500. H4 through H6 move up to 600. Large type carries its own presence, so a medium weight reads as calm and confident. Small headings sit close to body text in size, so they need the extra weight to keep their rank. Weight compensates for size, not the other way around.

Tracking: tighten as type grows

Letter-spacing is the quietest control and the one most often ignored. At large sizes, default spacing looks loose, so headlines get tighter as they get bigger:

/* Display */  letter-spacing: -0.04em;
/* H1 */       letter-spacing: -0.03em;
/* H3 */       letter-spacing: -0.02em;
/* Body */     letter-spacing: 0;

Body text stays neutral. At 16px, the type designer’s spacing is already tuned for reading, and tightening it only hurts legibility. Positive tracking on a headline is the one thing we rule out entirely.

Uppercase: reserve it for labels

All-caps strips away word shapes, which makes long text slower to read. So uppercase has exactly one home: labels, captions and section identifiers. These are 12px, weight 500 to 600, with +0.06em of tracking.

This is the only place positive spacing appears. Capitals need room to breathe, and the small size and short length keep the readability cost negligible. Because uppercase appears nowhere else, it works as a signal. A reader learns that small caps text means “this is a category,” not content.

Opacity: hierarchy inside one hue

The fourth control is color value. Instead of inventing new colors for secondary text, step the same ink down:

On light backgrounds, primary text is #141414, secondary is #6B6B6B, and tertiary metadata is #9A9A9A. On dark backgrounds, secondary text is white at 50% opacity. At the far end sits ghost text, oversized type at roughly 3.5% opacity, which acts as texture rather than content.

Because every level comes from one ink, the page stays cohesive. The tradeoff is contrast: lighter tints fail accessibility checks faster than you expect, so test every step against its actual background, not just the primary.

Where this stops working

One family only works if the family has range. You need real weights, sensible numerals and a form that holds up at both 12px and 140px. Urbanist’s circular counters also echo our mark, which is why it fits our brand.

It is also a choice made per brand, not a universal rule. Within the core Artasce family, one typeface keeps everything consistent. Our other ventures each get their own type identity, because they have different personalities to express.

A checklist for auditing your own type

Open your design file or stylesheet and check each of these:

• Count your sizes. If you have more than a dozen distinct font sizes, some are accidents. Consolidate to a ratio.
• List your weights. Four is usually enough. Remove any weight you cannot assign to a specific role.
• Check weight against size. Do your smallest headings have enough weight to outrank body text?
• Inspect headline tracking. Large type should be tightened, and none of it should have positive spacing.
• Confirm body tracking is neutral. Body text should sit at the font’s default.
• Find every uppercase string. Is it a label or caption? If it is a sentence, change it to sentence case.
• Define your text tints. You should have primary, secondary and tertiary values derived from one ink, not unrelated grays.
• Test contrast on each tint. Check every step on every background it appears on.
• Squint test. Blur the page. You should still be able to tell what is a title, what is body, and what is metadata.

Constraint is the craft

A second font is a fine tool when a brand calls for it. But the exercise of removing it is valuable on its own, because it forces every level of the hierarchy to justify itself.

If you are auditing a system and want a second set of eyes, that is the kind of work we do at Artasce. We are glad to talk it through.