Text styles

There are 9 font styles in the Plasma design system.

  • 6 bold styles to be used in headers, form labels and bold statements.
  • 3 regular styles to be used in copy and form inputs.
  • Each style (below) covers typeface, weight, size, line-height and letter-spacing specifications. And also what sort of scenarios to use each style.

Bold 1

  • Special use case only.
  • Examples include the login screen and messaging.
  • Should only be used once on a screen/page.

Bold 1

font-family: Helvetica;
font-weight: bold;
font-size: 80px;
letter-spacing: -3px;
line-height: 80px;

Bold 2

  • Special use case only.
  • Examples include data entry in the Data Query product.
  • Should only be used once on a screen/page.

Bold 2

font-family: Helvetica;
font-weight: bold;
font-size: 40px;
letter-spacing: -1px;
line-height: 44px;

Bold 3

  • Primary style for all headers, excluding form labels.

Bold 3

font-family: Helvetica;
font-weight: bold;
font-size: 30px;
letter-spacing: -0.3px;
line-height: 30px;

Bold 4

  • Special use case for form labels (when a larger style than Bold 5 is needed).

Bold 4

font-family: Helvetica;
font-weight: bold;
font-size: 16px;
line-height: 20px;

Bold 5

  • Primary style for all form labels, and sub-headers.

Bold 5

font-family: Helvetica;
font-weight: bold;
font-size: 13px;
line-height: 20px;

Bold 6

  • Used sparingly, for small print or actions/links.
  • Examples include an “Add new category” link aside a multi-select.

Bold 6

font-family: Helvetica;
font-weight: bold;
font-size: 11px;
line-height: 18px;

Regular 1

  • Special use case style for copy and form inputs (when a larger style than Regular 2 is needed).

Regular 1

font-family: Helvetica;
font-weight: regular;
font-size: 16px;
line-height: 20px;

Regular 2

  • Primary style for all body copy and form inputs.

Regular 2

font-family: Helvetica;
font-weight: regular;
font-size: 13px;
line-height: 20px;

Regular 3

  • Used as small print.
  • Examples include a note, starred item, or an ID code.

Regular 3

font-family: Helvetica;
font-weight: regular;
font-size: 11px;
line-height: 18px;

results matching ""

    No results matching ""