UI Style Guide

Headline-style

  • Table titles
  • Table column headers
  • Chart titles
  • Menu items (both menu bar and context menus)
  • Menu titles
  • Step titles
  • Tab titles
  • Toolbar buttons
  • Dialog box titles
  • Icon labels

Headline-style example

Capitalize every word in the text, except:

  • Articles, except as the first word (a, an, the)
  • Coordinating conjunctions (and, or)
  • Prepositions, except the first or last word
  • Infinitives (to, in, an)

Example: A Guide to Understanding Capitalization for User Interface Elements

Sentence-style

  • Page and section headings (H1-6)
  • Messages/alerts (information, warning, and error)
  • Button labels
  • Form field labels
  • Headings for groups of radio buttons or check boxes
  • Hover help text
  • Input hints
  • Page instructions or descriptions
  • Progress bar label
  • Status bar text

Sentence-style example

Only capitalize the first word in the text unless the word is a proper noun.

Example: A design system for IU

Symbols in relation to screen readers

Symbols and other special characters do not always sound the way we think it should when read by a screen reader. The following resource from Deque can be used to determine how a character will sound when read by a screen reader.

Learn more about how characters are read by screen readers

Screen readers most commonly used are JAWS, Voice Over, and NVDA.

Example

The greater than symbol > is read as just "greater" in JAWS, "greater than" in Voice Over, but not read at all in NVDA.

When used in breadcrumbs as a separator, it is possible it will read as "Home greater than About". In this case it should be replaced with » which will not be read in any screen reader and just adds a longer pause.

When used in place of the words it represents, it could change the meaning from "greater than ten" to just "ten". In this case the words should be used over the symbol.