Menu font

Appearance → Customize → Design → Header → Menu typography.

One control, five fields, for the primary menu — in the header bar and in the mobile panel.

The face follows your headings

Left alone, the menu is in your heading font and keeps following it if you change it. That is almost always what you want: the menu is chrome, and chrome that tracks the headings looks designed rather than assembled.

Set it to System default or a specific family only when the heading face is wrong at menu size — a display serif with fine strokes, say, that goes muddy at 1em.

Weight and case are the menu’s own

Notice that only the face offers “Same as heading”. Weight and case read plain Default, and they mean the theme’s own values (400, as typed) rather than an inherit from the headings.

That is deliberate: a menu is a row of links, not a row of headings. A menu that went bold and uppercase because you made your headings bold and uppercase would be a surprise.

The small-caps menu

The classic blog menu treatment — small, semi-bold, uppercase, tracked out:

That was the theme’s default up to version 1.3.1, and any site created before then still has exactly those values written into this control. Clear all four to take the current, plainer menu.

Size in practice

1em reads at body size, which is a modern and quiet look. 0.9em is a small step down that still reads comfortably. Below about 12px you are into small-caps territory and should add weight and tracking to compensate.

Remember the menu has to fit the bar. On the Logo center header layout especially, a larger menu font runs out of room fast.

Related

• Header colours — including the menu hover background
• Primary menu