Labels

Appearance

 

The font size of a label is 16px or 1rem IBM Plex Sans.

To create a visual hierarchy with inputs and options the font-weight is set to bold. This draws the user's attention to the label first.

Labels have a max-width of 480px. When this is combined with the stated font size and weight the amount of characters per line becomes easier to read.

Labels with a character count longer than 480px will wrap and the height of the label grows with its contents.

Line height for labels is 150% or 1.5rem for extra readability.

 

 


 

Spacing labels

 

All labels have a 4px bottom-margin between themselves and the help prompt, input container, first option or button below (depending on what sub-components are present).

 

 

 


 

Writing effective labels

A well-written label should negate the need for a help prompt or tooltip. Labels should use consistent patterns and capitalization.

 

Headings

Don’t use punctuation for headings except for question marks or an occasional exclamation mark. Make sure headings use a consistent pattern and are parallel. Also, ensure you look across screens for consistent headings, especially page (screen) headings.

 

Text Below Headings

Use complete sentences, including periods and punctuation, for lines of text that fall below headings and subheads.

 

Numbers

Don’t spell them!

Cognitive processing says users recognize numerals faster. Use 3 not three, despite the official grammar rule that says to spell out numbers less than 10.