Label Design
The typographic style of small descriptor text that identifies inputs, data fields, and UI sections.
Plain English
Labels are the small text above inputs, beside data points, and under icons — "Email address", "Total revenue", "Last updated". Done well, they are barely noticeable because the UI is self-evident. Done badly, they are missing, ambiguous, or styled so similarly to content that users can't distinguish what is a label and what is a value. Good label design is about creating a clear visual distinction between "what this thing is" and "the thing itself".
Technical
Labels typically use font-size: 12–14px, font-weight: 500–600, letter-spacing: 0.03–0.06em, color: muted (60–70% of body text contrast). In forms, use <label for="..."> elements pointing to input IDs for accessibility. For data display (key-value pairs), the label is the key and should be visually subordinate to the value. text-transform: uppercase + wide letter-spacing is a classic label treatment that signals "this is a label, not content".
Live Demo
Form label patterns
Trendy — can confuse users
Click / type to see the label animate up. Works best for short forms.
Most accessible — recommended
Label always visible. Works for all form lengths. Screen-reader friendly.
Disappears on type — avoid
Label inside can't be associated semantically. Use only for single-field search inputs.
Top-aligned labels are most accessible. Floating labels are trendy but can confuse.
Usage
✓ Good usage
Style form labels at 13px/500 weight in ink-600, positioned above the input with 6px gap — clearly readable but visually subordinate to the input value.
✗ Bad usage
Styling labels at the same size, weight, and colour as the values they describe — users cannot tell labels from content at a glance.
Recommended values
- Font size: 11–13px
- Font weight: 500–600
- Color: muted (ink-500/ink-600)
- Letter-spacing: 0 to 0.05em
- Optional: text-transform: uppercase + letter-spacing: 0.06em for section labels
Common mistakes
- Missing labels on form inputs — relying on placeholder text fails when the user starts typing.
- Labels too small to read (below 11px).
- Label and value in the same colour and weight — they look like the same type of content.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Style all form labels at 13px, 500 weight, ink-600 colour, 6px below the label before the input. For data display labels (key-value pairs), use 11px uppercase with 0.06em letter-spacing in ink-400.