Typography

In accordance with Refinitiv's Halo Design System, the default font in your application should be Proxima Nova Fin, which is automatically applied when you import native styles from EF themes.

The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text

Font styles in Halo theme are only Regular, Semi Bold and Bold. Do not use 'Itatic' style due to the license on Proxima Nova Fin font.

<h6>Proxima Nova Fin Regular (400)</h6>
<div class="fonts">
  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  a b c d e f g h i j k l m n o p q r s t u v w x y z
  0 1 2 3 4 5 6 7 8 9
</div>
<h6>Proxima Nova Fin Semibold (500)</h6>
<div class="fonts semibold">
  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  a b c d e f g h i j k l m n o p q r s t u v w x y z
  0 1 2 3 4 5 6 7 8 9
</div>
<h6>Proxima Nova Fin Bold (600)</h6>
<div class="fonts bold">
  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  a b c d e f g h i j k l m n o p q r s t u v w x y z
  0 1 2 3 4 5 6 7 8 9
</div>

.semibold {
  font-weight: 500;
}

.bold {
  font-weight: 600;
}

.fonts {
  font-size: 24px;
}

The theme also includes heading styles and uses body 3 as the default style for the body tag.

<table>
  <thead>
    <tr>
      <td>HEADINGS</td>
      <td>SUBHEADINGS</td>
      <td>PARAGRAPH</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <h1>Header 1</h1><small>Regular 44px</small>
      </td>
      <td>
        <div class="subhead_1">SUBHEAD 1</div><small>Semibold 16px</small>
      </td>
      <td>
        <div class="body_1">Body 1</div><small>Regular 16px</small>
      </td>
    </tr>
    <tr>
      <td>
        <h2>Header 2</h2><small>Regular 36px</small>
      </td>
      <td>
        <div class="subhead_2">SUBHEAD 2</div><small>Semibold 14px</small>
      </td>
      <td>
        <div class="body_2">Body 2</div><small>Regular 14px</small>
      </td>
    </tr>
    <tr>
      <td>
        <h3>Header 3</h3><small>Regular 28px</small>
      </td>
      <td>
        <div class="subhead_3">SUBHEAD 3</div><small>Semibold 12px</small>
      </td>
      <td>
        <div class="body_3">Body 3</div><small>Regular 12px</small>
      </td>
    </tr>
    <tr>
      <td>
        <h4>Header 4</h4><small>Bold 24px</small>
      </td>
      <td></td>
      <td>
        <div class="body_4">Body 4</div><small>Regular 12px</small>
      </td>
    </tr>
    <tr>
      <td>
        <h5>Header 5</h5><small>Bold 18px</small>
      </td>
      <td></td>
      <td>
        <div class="body_5">Body 5</div><small>Semibold 14px</small>
      </td>
    </tr>
    <tr>
      <td>
        <h6>Header 6</h6><small>Bold 16px</small>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

thead {
  font-weight: 600;
}

thead td {
  padding-bottom: 15px;
}

tr {
  background-color: white;
}

td {
  border-width: 0px;
  border-right-width: 1px;
  padding-bottom: 10px;
}

.subhead_1 {
  font-weight: 500;
  font-size: 16px;
}

.subhead_2 {
  font-weight: 500;
  font-size: 14px;
}

.subhead_3 {
  font-weight: 500;
  font-size: 12px
}

.body_1 {
  font-size: 16px;
}

.body_2 {
  font-size: 14px;
}

.body_3 {
  font-size: 12px;
}

.body_4 {
  font-weight: 500;
  font-size: 12px;
}

.body_5 {
  font-weight: 500;
  font-size: 14px;
}

Element Framework

Typography