Typography

Fonts used by the Red Hat Developer Design Team.

Our font family

We use the open source Red Hat Text and Red Hat Display fonts.

Header XL

Font family	Font size	Font weight	Line height	Class + Modifier	Viewport size
RedHatDisplay	40px	300	53	`.pf-c-title .pf-m-4xl`	`992px & above`
RedHatDisplay	36px	300	43.2	`.pf-c-title .pf-m-4xl`	`991px to 480px`
RedHatDisplay	32px	300	38.4	`.pf-c-title .pf-m-4xl`	`479px & below`

<h1 class="pf-c-title pf-m-4xl">"Design is where science and art break even."</h1>

"Design is where science and art break even."

Header 1

Font family	Font size	Font weight	Line height	Class + Modifier or Element
RedHatDisplay	32px	400	42	`.pf-c-title .pf-m-3xl`

<h1 class="pf-c-title pf-m-3xl">"Design is where science and art break even."</h1>
<div class="pf-c-content">
  <h1>"Design is where science and art break even."</h1>
  <h1><a href="#" title="Design is where science and art break even. (Link)">"Design is where science and art break even. (Link)"</a></h1>
</div>

Header 2

Font family	Font size	Font weight	Line height	Class + Modifier or Element
RedHatDisplay	28px	400	31.2	`.pf-c-title .pf-m-2xl` or `<h2>`

<h2 class="pf-c-title pf-m-2xl">"Design is where science and art break even."</h2>
<div class="pf-c-content">
  <h2>"Design is where science and art break even."</h2>
  <h2><a href="#" title="Design is where science and art break even. (Link)">"Design is where science and art break even. (Link)"</a></h2>
</div>

Header 3

Font family	Font size	Font weight	Line height	Class + Modifier or Element
RedHatDisplay	20px	400	30	`.pf-c-title .pf-m-xl` or `<h3>`

<h3 class="pf-c-title pf-m-xl">"Design is where science and art break even."</h3>
<div class="pf-c-content">
  <h3>"Design is where science and art break even."</h3>
  <h3>
    <a href="#" title="Design is where science and art break even. (Link)">"Design is where science and art break even. (Link)"</a>
  </h3>
</div>

Header 4

Font family	Font size	Font weight	Line height	Class + Modifier or Element
RedHatDisplay	18px	400	27	`.pf-c-title .pf-m-lg` or `<h4>`

<h4 class="pf-c-title pf-m-lg">"Design is where science and art break even."</h4>
<div class="pf-c-content">
  <h4>"Design is where science and art break even."</h4>
  <h4>
    <a href="#" title="Design is where science and art break even. (Link)">"Design is where science and art break even. (Link)"</a>
  </h4>
</div>

Standard text / Link text / Line text + hover

Font family	Font size	Font weight	Line height	Color	Text decoration	Class or Element
RedHatText	16px	400	24	#333	none	`<p>`
RedHatText	16px	400	24	#0066cc	none	`.pf-m-link` or `<a>`
RedHatText	16px	400	24	#004080	underline	`.pf-m-link` or `<a>`

<p>This is standard text for the developer site</p>
<a>This is link text for the developer site</a>
<p style="font-family: var(--pfe-theme--font-family); font-size: 16px; font-weight: 400; color: #004080; text-decoration: underline;">This is hovered link text for the developer site</p>

Dark typography - on dark background

To properly use the dark theme, you can either place the content in a dark < section > with class="pf-c-page__main-section pf-m-dark-100", wrap the content with .pf-content or add pf-m-dark to your element.

example:

<section class="pf-c-page__main-section pf-m-dark-100"><p>"Design is where science and art break even."</p></section>
<div class="pf-c-content pf-m-dark"><p>"Design is where science and art break even."</p></div>
<h1 class="pf-c-title pf-m-lg pf-m-dark">"Design is where science and art break even."</h1>