Visual weight comes from several properties together
Font weight, border width, icon stroke, size, and contrast all affect how strongly an element attracts attention. Increasing one property can change the balance of the whole component. A heavy icon beside a light label may dominate even when both are individually attractive.
This guide helps you define a small set of roles and test them together. Use the actual font and icon family at the sizes you intend to ship. A zoomed-in design canvas can hide the differences people encounter in the running interface.
Treat the specimen as a decision tool, then record the approved values in the system. The aim is a clear hierarchy that survives different content and layouts.
Step 1. Decide what should stand out
Identify the primary action, the content hierarchy, and the information that should recede. If every border, label, and icon is bold, the interface loses useful distinctions. Compare a complete component at its real size before changing individual values in isolation.
Step 2. Choose supported font weights
CSS font-weight accepts numeric values from 1 to 1000, but the font you deliver determines which weights are available. Static fonts may fall back when a requested weight is missing; variable fonts can support a range. Inspect the actual files rather than assuming that 500 or 600 exists.
| Role | Example starting value | Review question |
|---|---|---|
| Body text | 400 | Is sustained reading comfortable? |
| Control label | 500 or 600, if supported | Does it remain clear at its rendered size? |
| Section heading | 600 or 700, if supported | Is hierarchy clear without excess emphasis? |
Step 3. Separate border roles
A decorative divider, an input boundary, and a focus indicator serve different purposes. The sample widths below are starting choices, not accessibility guarantees. Contrast and context still matter.
:root {
--border-divider: 1px;
--border-emphasis: 2px;
--icon-stroke: 1.5;
}
.control:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
Step 4. Compare icons at actual size
Use one icon family where possible. Inspect line caps, joins, filled areas, and stroke thickness together; identical numeric widths can look different across shapes. Check whether small details survive at the intended size. Do not mix a delicate outline icon with a heavy filled icon unless that distinction has a clear purpose.
Step 5. Review the whole component
Compare the label, icon, border, and adjacent content. Adjust the strongest element first. Check keyboard focus, necessary component boundaries, and status cues with the relevant accessibility criteria. A thicker line does not automatically compensate for an unsuitable contrast pair.
Worked example: balance a settings row
Imagine a row with a label, a supporting sentence, an icon, and a toggle. If the label is bold, the icon has a thick stroke, and the container has a strong border, all four elements can compete. Decide which element should lead the reading order before adjusting values.
Start by keeping the text hierarchy simple. Use the label to identify the setting and the supporting sentence to explain it. Then choose an icon weight that supports recognition without becoming the dominant element. Finally, decide whether the row needs a border at all or whether spacing provides sufficient separation.
| Element | Possible role | What to compare |
|---|---|---|
| Label | Primary identification | Weight relative to body text |
| Hint | Supporting explanation | Readability without competing emphasis |
| Icon | Recognition cue | Stroke and apparent size beside the label |
| Border | Grouping or control boundary | Whether it carries essential information |
| Focus indicator | Keyboard location | Visibility against adjacent surfaces |
Distinguish font weight from perceived emphasis
The same numeric weight can look different across typefaces. Letter proportions, size, spacing, and contrast also affect the result. Compare the actual font files rather than assuming that 500 or 600 produces the same emphasis everywhere.
Limit the number of roles consumers choose from. If every component selects its own intermediate weight, the interface can become inconsistent while appearing technically tokenized. Document where regular, medium, or strong emphasis belongs and show those roles together.
Keep icon families and strokes coherent
Use a consistent icon family where possible, and inspect icons at their rendered size. Some shapes naturally carry more visual mass than others. A small optical adjustment may be appropriate, but record intentional exceptions instead of mixing unrelated styles arbitrarily.
Do not make an icon the only source of a critical meaning when a label is needed. An unfamiliar symbol can remain ambiguous no matter how carefully its stroke matches the typography. Review meaning and appearance together.
Separate decorative borders from interactive boundaries
A divider that groups content is different from a boundary needed to recognize a control. Decide what information the line carries before choosing its treatment. Very faint decorative lines may be acceptable in a composition where grouping remains clear, while essential control information needs the relevant contrast review.
Focus treatment has its own job: show the current keyboard location. Do not simply reuse a decorative border because it matches the brand. Check the focused control on every intended surface and ensure the indicator is not clipped by overflow.
Review at actual size and with real content
Inspect the component in the browser at narrow and wide widths. Check long labels, different number lengths, and error states. A weight choice that works for a two-word label can become overpowering across a multi-line heading.
Record the final text, icon, border, and focus roles in one specimen. Link to that example from your component documentation so a future contributor can see the relationships. Continue with type scales, spacing, and contrast review when the balance needs further work.
Completion checklist
- Each text role uses a supported font weight.
- Border thickness is assigned by purpose.
- Icons remain recognizable at their rendered size.
- Focus remains visible beside adjacent colors.
- Strong emphasis is reserved for meaningful hierarchy.
Common questions
Is a 1px border always too thin?
No. Its usefulness depends on contrast, purpose, size, and rendering. Check the actual interface instead of treating a width as inherently accessible or inaccessible.
Should font weight and icon stroke use the same number?
No. They use different systems. Compare their apparent emphasis visually in the component.