HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
MetricHPE styles
Heading
Semantic usage of heading levels
Best practices for headings
Heading sizes
Paragraph
Text
Fonts for offline usage
Foundation

Typography

The MetricHPE font is an integral part of our personality and design. When we’re making a statement, our visual language is clear, recognized and understood.

Our typography is about more than words. It’s an integral part of our personality and design. When we’re making a statement, we want our visual language to be clear, recognized and understood.

See in Figma

MetricHPE styles

The weights and styles shown are part of the HPE Design System theme. MetricHPE comes in a varity of weights. For digital experiences we use Light, Regular, Medium, and Bold weights at a variety of scales to compliment the content in a given design.

Heading

h1 Heading

h2 Heading

h3 Heading

h4 Heading

Semantic usage of heading levels

For accessibility reasons, always ensure semantically correct heading levels are applied.

Heading levels create a scaffold of a web page's content structure by defining the main page title, page sections, and subsections of those sections.

Correctly implementing heading levels:

  • establishes a more scannable visual hierarchy
  • creates a clear HTML structure which is critical for use by assistive technologies

If heading levels are not implemented in the correct hierarchy, users of screen readers and other assistive technologies will have a more effortful and difficult experience using the application.

Best practices for headings

  • Each web page should only have a single h1: <Heading level={1} />.
  • The main page sections following the page title should receive level={2}.
  • Any sub-topics of sections with level={2} should receive level={3}.
  • Never skip heading levels. For example, a heading with level={3} must always following a heading with level={2} but can never immediately proceed a heading with level={1}.
  • Do not use semantically incorrect headings to achieve a desired style. Instead, apply the semantically correct heading, then adjust the size by means of Heading's size prop.
  • It is rare that you should need to use a Heading level greater than 3, as this indicates the information on that page may be very dense. Before implementing heading levels 4-6, consider if there is a more concise way to present the page information or to separate it into more sections
  • Do not use Heading for Card titles since a Card does not define a page section. Instead, use Text with a bold treatment. See examples of how to properly implement this in our Card examples.
  • Treat Layers as if they were their own page with the exceptions that the first heading in a Layer would be a Heading with level={2}.

Below is an example of how Heading levels should be implemented for a page called "Page title" with 3 topics called Topic A, Topic B, and Topic C. Each topic has 2 subtopics.

<Heading level={1}>Page title</Heading>

  <Heading level={2}>Topic A</Heading>
    <Heading level={3}>Subtopic 1a</Heading>
    <Heading level={3}>Subtopic 2a</Heading>

  <Heading level={2}>Topic B</Heading>
    <Heading level={3}>Subtopic 1b</Heading>
    <Heading level={3}>Subtopic 2b</Heading>

  <Heading level={2}>Topic C</Heading>
    <Heading level={3}>Subtopic 1c</Heading>
    <Heading level={3}>Subtopic 2c</Heading>

When implementing heading levels, always begin with the correct heading level, then apply size adjustments to fit your styling needs. This allows for flexibility in design while maintaining well structured HTML documents needed by assistive technologies.

Heading sizes

If Heading size is adjusted, it should be adjusted for all levels. For example, if size="small" is desired for a Heading level 1, then "small" should be used for the size of all levels.

h1 default

h2 default

h3 default

h4 default

h1 xlarge

h2 xlarge

h3 xlarge

h4 xlarge

h1 large

h2 large

h3 large

h4 large

h1 small

h2 small

h3 small

h4 small

Paragraph

Paragraph xxlarge

Paragraph xlarge

Paragraph large

Paragraph default

Paragraph small

Text

Text 6xl
Text 5xl
Text 4xl
Text 3xl
Text xxlarge
Text xlarge
Text large
Text default
Text small
Text xsmall

Fonts for offline usage

In rare cases where a product needs to reference the MetricHPEXS fonts but users don't have internet access from their browser or maybe a designer needs the fonts locally, you can download the fonts for local use.

Download MetricHPEXS fonts: OTF/Vector, Web

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page