Text StylesGuidelines for the appearance and size of text
- Font Units — All font sizes are to be declared in em (not px ).
- Font Type — Use Lato web font for our headlines
- 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).
|Visual Element||Usage||Code Reference|
Headers facilitate quick scanning of a page to understand and locate content. Each header level is responsible for a certain role in this process.
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;
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.
A form field has several parts that may be included to help someone use it to enter data into the system.
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
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.
The system provides feedback about the state of various objects of interest, through use of italics or a lozenge.
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.