Font

Family

Orange's default typeface is Rubik, designed by Philipp Hubert and Sebastian Fischer at Hubert & Fischer.

SCSS
    .example {
  font-family: $font-primary;
}
  

Weights

HTML apply weights by adding .font-{weight} class to text elements

SCSS recall weights with the fontWeight('{weight}') function

  • 700 Extra Bold

    700 Extra Bold

  • 600 Bold

    600 Bold

  • 500 Medium

    500 Medium

  • 400 Normal

    400 Normal

HTML
    <p class="font-extrabold">700 Extra Bold</p>
<p class="font-bold">600 Bold</p>
<p class="font-medium">500 Medium</p>
<p class="font-normal">400 Normal</p>
  
SCSS
    .example {
  font-weight: fontWeight('extrabold');
}
  

Italic

HTML apply italic font style by adding .text-italic class to text elements

  • 700 Extra Bold Italic

    700 Extra Bold Italic

  • 600 Bold Italic

    600 Bold Italic

  • 500 Medium Italic

    500 Medium Italic

  • 400 Normal Italic

    400 Normal Italic

HTML
    <p class="font-extrabold text-italic">700 Extra Bold Italic</p>
<p class="font-bold text-italic">600 Bold Italic</p>
<p class="font-medium text-italic">500 Medium Italic</p>
<p class="font-normal text-italic">400 Normal Italic</p>