Typography

Typography

PatternFly uses Open Sans, an open-licensed, sans serif, typeface designed by Steve Matteson. The type family includes a complete 897 character set, along with Cyrillic character sets. There are ten type-face variants available with this font. Use the CSS rule “@font-face” to include these fonts in your application styles. For more information, check out Mozilla Developer Network’s @font-face Summary.

#open-sans-image ___

Typographic Styles

The below style samples represent commonly-used typographic layouts. Check out more samples including description lists, alignment classes, unstyled lists, and inline lists on the PatternFly Typography test page.

Application Heading (h1)

Level 2 Heading

Level 3 Heading

Style Samples

This line of small text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

The following snippet of text is rendered as link text.

Style Point Size Weight Line Height Usage
Application Header h1 24 300 (Light) 1.1em Only to be used in the Application Name at Top of Screen
Level 2 Header h2 22 300 (Light) 1.1em Only to be used in the Second-Level Headers.
Level 3 Header h3 16 500 (Regular) 1.1em Only to be used in the Third-Level Headers.
Lead Body Copy 13 300 (Light) 1.4em Should only be used before regular body text, for larger ideas or descriptions before real data.
Body Copy 12 500 (Regular) 1.666em This base font size is used for all content and data, with the exception of Lead Body Copy.
Body Copy (Bolded) 12 700 (Bold) 1.666em This should be used for descriptors, and for emphasized text.
Body Copy (Italicized) 12 Italic 1.666em Italics should be used sparingly. See the PatternFly Typography test page for an example.
Link Text 12 500 (Regular) 1.666em Link text should always be blue (#0088ce), and should never be underlined.
Small Text 10 500 (Regular) 1.666em This is the minimum font size. Use sparingly, only as needed.

List Samples

Unordered

  • Lorem ipsum
  • Consectetur
    • Phasellus
    • Purus
  • Faucibus
  • Aenean sit

Ordered

  1. Lorem
  2. Consectetur
  3. Aenean sit
  4. Eget

Unstyled

  • Lorem
  • Consectetur
  • Nulla
    • Phasellus
    • Purus
  • Faucibus
  • Aenean
  • Eget

Inline

  • Lorem ipsum
  • Phasellus
  • Nulla

Color Usage

Style Color (Hex#) Usage
Regular Copy #363636 This text color is used as often as possible, and always on body text.
Text Links #0088ce This color is reserved only for links.
Disabled Text #9c9c9c This color is reserved for disabled text.