Skip to end of metadata
Go to start of metadata

Text Styles

Guidelines for the appearance and size of text

Tag: text-styles

Guiding Principles

  • Font Units — All font sizes are to be declared in em (not px ).
  • Font Type — Use Lato web font for our headlines  

Decorations

  • Capitals Avoid using ALLCAPS. 
  • Italics Italicized text is used to communicate status on items (e.g.,   “You have unsaved changes” ), and also used within inputs for watermaks to display example input formats.
  • Bold  Bold fonts are used for emphasis to make certain words and phrases stand out from surrounding text. Use restraint when using bold type. Whole paragraphs of text set in bold type are hard to read. The reason bold type creates emphasis is that it slows down the reader and forces their eye to really take in the words more carefully. But if you slow them down too much they may just skip over what you have to say.
  • Underline   A solid underline indicates text that will navigate away from the current context ,and a dotted underline indicates text that will trigger a dialog (i.e., popovers, lightboxes, tooltips).

Element Styles

Visual ElementUsageCode Reference

Headers

Headers facilitate quick scanning of a page to understand and locate content. Each header level is responsible for a certain role in this process.

  • h1View Titles or Unified Titles  
  • h2Page Titles, when present
  • h3 —  Section Headers
  • h4 —  Subsection Headers
  • h5 / h6 —  Use only as nested sections demand
StandardCSSClassName

UIFJavaBeanName 

Paragraph

General text used for description and instruction is styled as the base font, with line spacing and maximum widths to facilitate optimal reading.

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em; or 13px
line-height: 18px;
color: #000000;

 

Text may be used as navigation, linking the current view to another context. This special text should provide a good target (through use of different colors and decoration) and be labeled in a way to explain where the link will end up.

 

Form Input

A form field has several parts that may be included to help someone use it to enter data into the system.

  • Form LabelText to identify the data object represented by the form field, located above or to the left of the input.
  • Instructional TextA clear and concise description of how complete a task, placed above the input
  • Data Entry TextText typed into form fields should be clearly distinguished as entered data
  • Constraint TextGuides placed below the input to specify the format needed for valid data entry.
 

Watermark

Temporary text is displayed within text fields and areas to prompt a user with an example of data entry. Watermarks disappear when data is present, making it useful only to help populate blank fields. Because it can be confused with actual data, the styling should clearly distinguish a watermark from user data.


font-size: 1em; or 13px
font-style: italic;
color: #ABABAB;
 

User Data (read-only)

When read-only data is mixed with form fields, the text will be displayed using the base font and black text.


 

Search To Select

A link, located below the input in place of constraint text, opens a lightbox to allow the user to search for a specific value to return to a text field. The label for the link should be in the form “Find a [Object]” to make the goal of the subtask clear.


 

Status

The system provides feedback about the state of various objects of interest, through use of italics or a lozenge.    

  • Document save status — Italicized, gray text placed in proximity to form submission controls
  • Inline status messages — Italicized text to indicate a status statement within a larger body of text
  • Object state A color-coded state type indicator displayed in a lozenge, with the state name displayed in ALLCAPS, in lozenge. Although to be generally avoided, use of ALLCAPS helps differentiate the lozenge from a button while having minimal impact with regard to accessibility.

 

Margin Settings

Margin values applied to headings, disclosures, etc.

 

Note An Issue

A Living Document

This resource is a work-in-progress. Please contribute any issues or suggested improvements to either the documentation of this component or to how its functionality might be improved in the future.

Discussion Sandbox

0%

Comments