FTSE Russell Styleguide

Fonts 

<div class="ig-row">
    <div class="three ig-columns offset-by-one">
        <p class="secondary"> Designed by Jonas Schudel. Available from TypeKit </p>
        <p class="secondary"> Effra is our primary typeface and is used consistently across our brand. It was chosen for a number of reasons: It communicates clarity. It feels simple and contemporary, and implies confidence. It works well in both upper and lower case, offering
            flexibility in our approach to typography. We never use italics in main headlines, only within body copy. </p>
    </div>
    <!-- ig-column -->
    <div class="five ig-columns ">
        <div class="ig-typeface-weight ig-typeface-weight--light">
            <div class="ig-typeface-weight__label">Light font.primary.weight-light </div>
            <div class="ig-typeface-weight__typeface" contenteditable="true"> font.primary.typeface </div>
        </div>
        <!-- ig-typeface-weight-light -->
        <div class="ig-typeface-weight">
            <div class="ig-typeface-weight__label">Regular font.primary.weight </div>
            <div class="ig-typeface-weight__typeface" contenteditable="true"> font.primary.typeface </div>
        </div>
        <!-- ig-typeface-weight -->

        <div class="ig-typeface-weight ig-typeface-weight--bold">
            <div class="ig-typeface-weight__label ig-typeface-weight--bold">Bold font.primary.weight-bold </div>
            <div class="ig-typeface-weight__typeface" contenteditable="true"> font.primary.typeface </div>
        </div>
        <!-- ig-typeface-weight -->
    </div>
    <!-- ig-column -->
</div>
<!-- ig-row -->

<div class="ig-row ig-row--margin">
    <div class="two ig-columns offset-by-one">
        <h4>Lowercase</h4>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-transform ig-transform-weight--light">
        <p class="ig-label">Light</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-transform">
        <p class="ig-label">Regular</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->

    <div class="three ig-columns ig-typeface-transform ig-transform-weight--bold">
        <p class="ig-label">Bold</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
</div>
<!-- ig-row -->

<div class="ig-row">
    <div class="two ig-columns offset-by-one">
        <h4>Uppercase</h4>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-transform ig-typeface-uppercase ig-transform-weight--light">
        <p class="ig-label">Light</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-transform ig-typeface-uppercase">
        <p class="ig-label">Regular</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-transform ig-typeface-uppercase ig-transform-weight--bold">
        <p class="ig-label">Bold</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
</div>
<!-- ig-row -->

<div class="ig-row">
    <div class="two ig-columns offset-by-one">
        <h4>Italic</h4>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-style ig-transform-weight--light">
        <p class="ig-label">Light</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-style">
        <p class="ig-label">
            <!-- $typeface-primary -->Regular</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
    <div class="three ig-columns ig-typeface-style ig-transform-weight--bold">
        <p class="ig-label">
            <!-- $typeface-primary -->Bold</p>
        <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <!-- ig-column -->
</div>
<!-- ig-row -->

<div class="ig-row">
    <div class="three ig-columns offset-by-three">
        <h4>Characters</h4>
        <div class="ig-typeface-style">
            <p class="ig-label">Regular</p>
            <p class="ig-glyphs">&#63;&#33;&#40;&#37;&#41;&#91;&#35;&#93;&#64;&#47;&#38;&#60;&#62;&#36;&#8364;&#163;&#165;</p>
            <div class="ig-typeface-style__italic">
                <p class="ig-label">Italic</p>
                <p class="ig-glyphs">&#63;&#33;&#40;&#37;&#41;&#91;&#35;&#93;&#64;&#47;&#38;&#60;&#62;&#36;&#8364;&#163;&#165;</p>
            </div>
            <!-- ig-typeface-style__italic -->
            <div class="ig-typeface-style__bolditalic">
                <p class="ig-label">Bold Italic</p>
                <p class="ig-glyphs">&#63;&#33;&#40;&#37;&#41;&#91;&#35;&#93;&#64;&#47;&#38;&#60;&#62;&#36;&#8364;&#163;&#165;</p>
            </div>
            <!-- ig-typeface-style__bolditalic -->
        </div>
        <!-- ig-typeface-style -->
    </div>
    <!-- ig-column -->

    <div class="three ig-columns">
        <h4>Numerals</h4>
        <div class="ig-typeface-style">
            <div class="ig-typeface-style__light">
                <p class="ig-label">Light</p>
                <p class="ig-glyphs">1234567890</p>
            </div>
            <!-- ig-typeface-style__light -->
            <p class="ig-label">Regular</p>
            <p class="ig-glyphs">1234567890</p>
            <div class="ig-typeface-style__bold">
                <p class="ig-label">Bold</p>
                <p class="ig-glyphs">1234567890</p>
            </div>
            <!-- ig-typeface-style__bold -->
        </div>
        <!-- ig-typeface-style -->
    </div>
    <!-- ig-column -->
    <div class="three ig-columns">
        <h4>More</h4>
        <div class="ig-typeface-style">
            <div class="ig-typeface-style__lightitalic">
                <p class="ig-label">Light italic</p>
                <p class="ig-glyphs">1234567890</p>
            </div>
            <!-- ig-typeface-style__lightitalic -->
            <div class="ig-typeface-style__italic">
                <p class="ig-label">Regular italic</p>
                <p class="ig-glyphs">1234567890</p>
            </div>
            <!-- ig-typeface-style__italic -->
            <div class="ig-typeface-style__bolditalic">
                <p class="ig-label">Bold italic</p>
                <p class="ig-glyphs">1234567890</p>
            </div>
            <!-- ig-typeface-style__bolditalic -->
        </div>
        <!-- ig-typeface-style -->
    </div>
    <!-- ig-column -->
</div>
<!-- ig-row -->
 
<div class="ig-row">
  <div class="three ig-columns offset-by-one">
    <p class="secondary"> {{ typeface_primary_author }} </p>
    <p class="secondary"> {{ typeface_primary_description }} </p>
  </div><!-- ig-column -->
  <div class="five ig-columns ">
    <div class="ig-typeface-weight ig-typeface-weight--light">
      <div class="ig-typeface-weight__label">Light  font.primary.weight-light </div>
      <div class="ig-typeface-weight__typeface" contenteditable="true"> font.primary.typeface </div>
    </div><!-- ig-typeface-weight-light -->
    <div class="ig-typeface-weight">
      <div class="ig-typeface-weight__label">Regular  font.primary.weight </div>
      <div class="ig-typeface-weight__typeface" contenteditable="true"> font.primary.typeface </div>
    </div><!-- ig-typeface-weight -->

    <div class="ig-typeface-weight ig-typeface-weight--bold">
      <div class="ig-typeface-weight__label ig-typeface-weight--bold">Bold  font.primary.weight-bold </div>
      <div class="ig-typeface-weight__typeface" contenteditable="true"> font.primary.typeface </div>
    </div><!-- ig-typeface-weight -->
  </div><!-- ig-column -->
</div><!-- ig-row -->

<div class="ig-row ig-row--margin">
  <div class="two ig-columns offset-by-one">
    <h4>Lowercase</h4>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-transform ig-transform-weight--light">
    <p class="ig-label">Light</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-transform">
    <p class="ig-label">Regular</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->

  <div class="three ig-columns ig-typeface-transform ig-transform-weight--bold">
    <p class="ig-label">Bold</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
</div><!-- ig-row -->

<div class="ig-row">
  <div class="two ig-columns offset-by-one">
    <h4>Uppercase</h4>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-transform ig-typeface-uppercase ig-transform-weight--light">
    <p class="ig-label">Light</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-transform ig-typeface-uppercase">
    <p class="ig-label">Regular</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-transform ig-typeface-uppercase ig-transform-weight--bold">
    <p class="ig-label">Bold</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
</div><!-- ig-row -->

<div class="ig-row">
  <div class="two ig-columns offset-by-one">
    <h4>Italic</h4>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-style ig-transform-weight--light">
    <p class="ig-label">Light</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-style">
    <p class="ig-label"><!-- $typeface-primary --> Regular</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
  <div class="three ig-columns ig-typeface-style ig-transform-weight--bold">
    <p class="ig-label"><!-- $typeface-primary --> Bold</p>
    <p class="ig-glyphs" contenteditable="true">abcdefghijklmnopqrstuvwxyz</p>
  </div><!-- ig-column -->
</div><!-- ig-row -->

<div class="ig-row">
  <div class="three ig-columns offset-by-three">
    <h4>Characters</h4>
    <div class="ig-typeface-style">
      <p class="ig-label">Regular</p>
      <p class="ig-glyphs">&#63;&#33;&#40;&#37;&#41;&#91;&#35;&#93;&#64;&#47;&#38;&#60;&#62;&#36;&#8364;&#163;&#165;</p>
      <div class="ig-typeface-style__italic">
        <p class="ig-label">Italic</p>
        <p class="ig-glyphs">&#63;&#33;&#40;&#37;&#41;&#91;&#35;&#93;&#64;&#47;&#38;&#60;&#62;&#36;&#8364;&#163;&#165;</p>
      </div><!-- ig-typeface-style__italic -->
      <div class="ig-typeface-style__bolditalic">
        <p class="ig-label">Bold Italic</p>
        <p class="ig-glyphs">&#63;&#33;&#40;&#37;&#41;&#91;&#35;&#93;&#64;&#47;&#38;&#60;&#62;&#36;&#8364;&#163;&#165;</p>
      </div><!-- ig-typeface-style__bolditalic -->
    </div><!-- ig-typeface-style -->
  </div><!-- ig-column -->

  <div class="three ig-columns">
    <h4>Numerals</h4>
    <div class="ig-typeface-style">
      <div class="ig-typeface-style__light">
        <p class="ig-label">Light</p>
        <p class="ig-glyphs">1234567890</p>
      </div><!-- ig-typeface-style__light -->
      <p class="ig-label">Regular</p>
      <p class="ig-glyphs">1234567890</p>
      <div class="ig-typeface-style__bold">
        <p class="ig-label">Bold</p>
        <p class="ig-glyphs">1234567890</p>
      </div><!-- ig-typeface-style__bold -->
    </div><!-- ig-typeface-style -->
  </div><!-- ig-column -->
  <div class="three ig-columns">
    <h4>More</h4>
    <div class="ig-typeface-style">
      <div class="ig-typeface-style__lightitalic">
        <p class="ig-label">Light italic</p>
        <p class="ig-glyphs">1234567890</p>
      </div><!-- ig-typeface-style__lightitalic -->
      <div class="ig-typeface-style__italic">
        <p class="ig-label">Regular italic</p>
        <p class="ig-glyphs">1234567890</p>
      </div><!-- ig-typeface-style__italic -->
      <div class="ig-typeface-style__bolditalic">
        <p class="ig-label">Bold italic</p>
        <p class="ig-glyphs">1234567890</p>
      </div><!-- ig-typeface-style__bolditalic -->
    </div><!-- ig-typeface-style -->
  </div><!-- ig-column -->
</div><!-- ig-row -->
 
{
  "typeface_primary_author": "Designed by Jonas Schudel. Available from TypeKit",
  "typeface_primary_description": "Effra is our primary typeface and is used consistently across our brand. It was chosen for a number of reasons: It communicates clarity. It feels simple and contemporary, and implies confidence. It works well in both upper and lower case, offering flexibility in our approach to typography. We never use italics in main headlines, only within body copy."
}

There are no notes for this item.