Font Weights for UI: Regular, Medium, Semibold and Bold

Font weight is one of the fastest ways to establish priority in an interface, but it is easy to overuse. When every label is semibold, the screen becomes a collection of equally loud fragments. A useful weight system assigns emphasis deliberately and keeps ordinary reading comfortable.

Separate weight problems from contrast problems

Before changing a weak-looking label from regular to bold, check its text color against its actual surface. Use the contrast checker on body copy, metadata, and controls. Increasing weight is not a reliable substitute for an inadequate foreground and background pairing.

Then inspect the label in context. Does it disappear because its strokes are too delicate, because nearby content is heavier, or because its role is unclear? These require different solutions. Weight hierarchy should describe information priority rather than compensate for every layout or color problem.

Make a small inventory of repeated roles: body copy, helper text, field labels, navigation, card headings, page headings, and inline emphasis. Start by mapping those roles onto a few available weights. Do not add another number simply because one screenshot seems slightly unbalanced; first check whether size, spacing, or wording is causing the problem.

Assign regular and medium to everyday reading

Regular, conventionally 400, is a sensible starting point for paragraphs, descriptions, inputs, and ordinary values. It leaves room for stronger emphasis without making the screen uniformly dense. Some families have a sturdier regular than others, so compare actual rendered text rather than assuming the label means a consistent darkness.

Medium, conventionally 500, can help short labels remain visible at compact sizes. It often works for field labels, navigation items, and button text when regular feels too quiet. It is not automatically better for every control, especially in a family whose medium is visually close to semibold.

Try a form with regular input values and medium labels. The distinction should help readers find each field without making the entered information feel subordinate or hard to read. Test a filled form as well as an empty one: placeholder text can conceal whether the chosen hierarchy works with real values.

For longer explanatory text, compare a paragraph at 400 and 500. If medium makes the page feel crowded, preserve regular and improve size or contrast instead. The existing serif and sans-serif pairing guide is useful when different families make nominally identical weights appear mismatched.

Reserve semibold and bold for clear priority

Semibold, conventionally 600, often suits section headings, selected navigation labels, and compact card titles. It creates a noticeable step without the density of a heavy display treatment. In a small interface, that may be enough for most structural emphasis.

Bold, conventionally 700, works for page headings and selective emphasis where a stronger signal is needed. Avoid treating every number, label, and action as bold by default. Weight contrast depends on there being a quieter baseline; the more bold text you add, the less informative each bold phrase becomes.

Inline emphasis needs editorial discipline. Highlight the phrase that carries the distinction, not an entire sentence simply because it is important. For a warning, combine clear language and an appropriate visual treatment rather than expecting bold alone to communicate urgency.

Do not rely solely on weight to indicate an interactive state. A selected navigation item can also have an underline, background, or other persistent marker. This supports readers who do not perceive a subtle weight difference and reduces ambiguity when the chosen font has a weak distinction between adjacent weights.

Match numeric requests to the actual font

CSS accepts numeric weights, but a number does not guarantee that a corresponding face exists. A static family containing only regular and bold cannot supply a unique medium design just because you request 500. Browser matching rules choose among available faces, and synthetic emboldening can occur in some situations.

The MDN font-weight documentation explains matching and numeric values. The MDN font-synthesis reference describes controls for browser-generated styles. Use those controls only after confirming that your intended emphasis still renders correctly.

A variable font can provide an intermediate range, but its declared range must match the asset. A font supporting 300–700 does not gain a genuine 900 design because a stylesheet requests it. This is an asset and typography contract, not a reason to choose increasingly precise numbers by eye.

:root {
--weight-body: 400;
--weight-label: 500;
--weight-heading: 600;
--weight-strong: 700;
}

body {
font-family: "Interface Sans", system-ui, sans-serif;
font-weight: var(--weight-body);
}

input, textarea, select, button { font: inherit; }
.field-label, .button { font-weight: var(--weight-label); }
.section-title { font-weight: var(--weight-heading); }
.page-title, strong { font-weight: var(--weight-strong); }

.nav-link {
display: inline-block;
padding: 0.5rem 0.75rem;
font-weight: var(--weight-label);
}

.nav-link[aria-current="page"] {
text-decoration: underline;
text-underline-offset: 0.25em;
}

This navigation example keeps the same weight in both states. Changing weight can change glyph widths and move neighboring items. If a design requires that change, measure the effect rather than assuming all weights share identical metrics. MDN's variable font guide explains the broader axis model without implying that every family behaves alike.

Validate the map in components, not isolated words

Build a weight specimen from complete components: a paragraph, a populated form, a navigation bar, a card, and a compact table. Use identical sizes while comparing weights first. Then restore the intended sizes to check whether the combined hierarchy becomes excessive.

Include digits, punctuation, and similar-looking characters. A weight that looks attractive in a large heading may close counters or crowd currency values in a small table. Check ordinary displays at normal zoom, then repeat with enlarged text and a fallback font.

Review disabled and secondary states too. Reducing both opacity and weight can make a label unnecessarily fragile. Prefer a consistent typographic role, then evaluate the state's visual treatment separately. Also inspect long translated labels; heavier text can widen enough to wrap where the default language stays on one line.

Document a short role map with examples and exceptions. The existing design tokens guide can help turn that map into stable shared values. Keep the number of exceptions small: a system with four named weights and twelve undocumented overrides is not actually a four-weight system.

If two adjacent weights barely differ in your chosen family, remove one from the working palette. A clear three-weight system is more useful than a theoretical four-weight ladder that readers cannot distinguish. Revisit the decisions whenever the font family changes.

Key takeaways

• Establish adequate text contrast before using weight as a repair.
• Give regular, medium, semibold, and bold explicit roles.
• Request only weights the font can meaningfully provide.
• Check state changes for width shifts and weak distinctions.
• Validate complete components and document a small, repeatable map.