diff --git a/working-on/typography/cpts-lg-en.html b/working-on/typography/cpts-lg-en.html
new file mode 100644
index 000000000..2c35d660f
--- /dev/null
+++ b/working-on/typography/cpts-lg-en.html
@@ -0,0 +1,9 @@
+<div id="inline-captions">
+  <section>
+    <h2>Transcript</h2>
+    <p class="wb-vd"><strong>(Animated pen draws a red line that leads into the text Looking for A Job)</strong></p>
+    <p class="wb-vd"><strong>(Cut to a medium shot of the Host. LINE DRAWING GRAPHIC: Stick person appears and waves.)</strong></p>
+    <p><span class="wb-tmtxt" data-begin="2.50s" data-dur="3.84s">Hi, my name is Eric, and I&#39;m a Service Canada employee.</span></p>
+    ...
+  </section>
+</div>
\ No newline at end of file
diff --git a/working-on/typography/demo/video1-en.jpg b/working-on/typography/demo/video1-en.jpg
new file mode 100644
index 000000000..8904d5d90
Binary files /dev/null and b/working-on/typography/demo/video1-en.jpg differ
diff --git a/working-on/typography/font-size.md b/working-on/typography/font-size.md
new file mode 100644
index 000000000..50a681d4d
--- /dev/null
+++ b/working-on/typography/font-size.md
@@ -0,0 +1,415 @@
+---
+altLangPage: #
+dateModified: 2021-07-20
+lang: en
+layout: fluid
+title: Font sizes
+---
+
+<h2 class="page-header">72px</h2>
+
+<h3>Jumbotron</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.jumbotron h1</code>, <code>.jumbotron .h1</code></dd>
+      <dt>font-size</dt>
+      <dd><code>72px</code></dd>
+      <dt>line-height</dt>
+      <dd><code>79.9px</code></dd>
+      <dt>font-family</dt>
+      <dd><code>Lato</code></dd>
+      <dt>source</dt>
+      <dd>Bootstrap 3.3.7</dd>
+    </dl>
+    <p>Demo:</p>
+    <section class="jumbotron">
+      <h1>Hello, world!</h1>
+      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+      <p><a class="btn btn-call-to-action" href="#" role="button">Learn more about Jumbotron</a></p>
+    </section>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.jumbotron h1</code>, <code>.jumbotron .h1</code></dd>
+      <dt>font-size</dt>
+      <dd><code>3.6em</code></dd>
+      <dt>line-height</dt>
+      <dd><code>1.5em</code></dd>
+      <dt>font-family</dt>
+      <dd><code>Lato</code></dd>
+      <dt>source</dt>
+      <dd>Bootstrap 3.3.7</dd>
+    </dl>
+    <p>Demo:</p>
+    <style>
+      .proposed.jumbotron h1 {
+        font-size: 3.6em;
+        line-height: 1.5em;
+      }
+    </style>
+    <section class="proposed jumbotron">
+      <h1>Hello, world!</h1>
+      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+      <p><a class="btn btn-call-to-action" href="#" role="button">Learn more about Jumbotron</a></p>
+    </section>
+  </section>
+</div>
+
+<h2 class="page-header">65px</h2>
+
+<h3>Multimedia player</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.wb-mltmd.video:not(.playing):not(.waiting) .display:after</code></dd>
+      <dt>font size</dt>
+      <dd><code>65px</code></dd>
+      <dt>font family</dt>
+      <dd><code>Glyphicons Halflings</code></dd>
+      <dt>source</dt>
+      <dd>WET 4</dd>
+    </dl>
+    <p>Demo:</p>
+    <figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/themes-dist/GCWeb/demos/multimedia/multimedia-en.html"}'>
+      <video poster="demo/video1-en.jpg" title="Looking for a Job">
+        <source type="video/webm" src="https://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" />
+        <source type="video/mp4" src="https://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" />
+        <track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
+      </video>
+      <figcaption>
+        <p>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</p>
+      </figcaption>
+    </figure>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>Out of scope</p>
+  </section>
+</div>
+
+<h2 class="page-header">34px</h2>
+
+<h3>Lightbox</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.mfp-content:before</code></dd>
+      <dt>font size</dt>
+      <dd><code>34px</code></dd>
+      <dt>font family</dt>
+      <dd><code>Glyphicons Halflings</code></dd>
+      <dt>source</dt>
+      <dd>WET 4</dd>
+    </dl>
+    <p>Demo:</p>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>Out of scope</p>
+  </section>
+</div>
+
+<h3>Overlay</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.wb-overlay.open:before</code></dd>
+      <dt>font size</dt>
+      <dd><code>34px</code></dd>
+      <dt>font family</dt>
+      <dd><code>Glyphicons Halflings</code></dd>
+      <dt>source</dt>
+      <dd>WET 4</dd>
+    </dl>
+    <p>Demo:</p>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>Out of scope</p>
+  </section>
+</div>
+
+<h2 class="page-header">32px</h2>
+
+<h3>Share sheet</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.shr-pg .email:before</code></dd>
+      <dt>font size</dt>
+      <dd><code>32px</code></dd>
+      <dt>font family</dt>
+      <dd><code>Glyphicons Halflings</code></dd>
+      <dt>source</dt>
+      <dd></dd>
+    </dl>
+    <p>Demo:</p>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>Ou of scope</p>
+  </section>
+</div>
+
+<h3>Mega menu</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.gcweb-menu [role=menu] [role=menu] li:first-child [role=menuitem]</code></dd>
+      <dt>font size</dt>
+      <dd><code>32px</code></dd>
+      <dt>font family</dt>
+      <dt>line-height</dt>
+      <dd><code>39.6px</code></dd>
+      <dd><code>Noto Sans</code></dd>
+      <dt>source</dt>
+      <dd>GCWeb</dd>
+    </dl>
+    <p>Demo:</p>
+    <nav class="gcweb-menu" typeof="SiteNavigationElement">
+      <div class="container">
+        <h2 class="wb-inv">Menu</h2>
+        <button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
+        <ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html"><li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
+          <li role="presentation"><a role="menuitem" href="https://travel.gc.ca/">Travel and tourism</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/health.html">Health</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
+          <li role="presentation"><a role="menuitem" href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li></ul>
+      </div>
+    </nav>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.gcweb-menu [role=menu] [role=menu] li:first-child [role=menuitem]</code></dd>
+      <dt>font size</dt>
+      <dd><code>1.2em</code></dd>
+      <dt>line-height</dt>
+      <dd><code>1.5em</code></dd>
+      <dt>font family</dt>
+      <dd><code>Noto Sans</code></dd>
+      <dt>source</dt>
+      <dd>GCWeb</dd>
+    </dl>
+    <p>Demo:</p>
+    <style>
+      .proposed.gcweb-menu [role=menu] [role=menu] li:first-child [role=menuitem] {
+        font-size: 1.2em;
+        line-height: 1.5em;
+      }
+    </style>
+    <nav class="proposed gcweb-menu" typeof="SiteNavigationElement">
+      <div class="container">
+        <h2 class="wb-inv">Menu</h2>
+        <button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
+        <ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html"><li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
+          <li role="presentation"><a role="menuitem" href="https://travel.gc.ca/">Travel and tourism</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/health.html">Health</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
+          <li role="presentation"><a role="menuitem" href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li>
+          <li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li></ul>
+      </div>
+    </nav>
+  </section>
+</div>
+
+<h2 class="page-header">3.5em</h2>
+
+<h3>Canada wordmark</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.cndwrdmrk</code></dd>
+      <dt>font size</dt>
+      <dd><code>3.5em</code></dd>
+      <dt>font family</dt>
+      <dd><code>gcweb</code></dd>
+      <dt>source</dt>
+      <dd>GCWeb</dd>
+    </dl>
+    <p>Demo:</p>
+    <p class="cndwrdmrk"></p>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>To be deprecated</p>
+  </section>
+</div>
+
+<h2 class="page-header">2em</h2>
+
+<h3>Normalized <code>h1</code></h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd></dd>
+      <dt>font size</dt>
+      <dd><code>2em</code></dd>
+      <dt>font family</dt>
+      <dd><code>sans-serif</code></dd>
+      <dt>source</dt>
+      <dd>Bootstrap</dd>
+    </dl>
+    <p>Demo:</p>
+    <style>
+      #normalize {
+        font-size: 16px;
+        line-height: 1.4375em;
+      }
+      #normalize h1 {
+        border-bottom: none;
+        font-family: sans-serif;
+        font-size: 2em;
+        font-weight: bold;
+        margin: .67em 0; 
+      }
+    </style>
+    <div id="normalize">
+      <h1>Normalized</h1>
+    </div>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>To be deprecated</p>
+  </section>
+</div>
+
+<h3>Pagination</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.pagntn-prv-nxt .glyphicon-chevron-left</code>, <code>.pagntn-prv-nxt .glyphicon-chevron-right</code></dd>
+      <dt>font size</dt>
+      <dd><code>2em</code></dd>
+      <dt>font family</dt>
+      <dd><code>Glyphicons Halflings</code></dd>
+      <dt>source</dt>
+      <dd></dd>
+    </dl>
+    <p>Demo:</p>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>Out of scope</p>
+  </section>
+</div>
+
+<h3>Department badge</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.badge.badge-dept</code></dd>
+      <dt>font size</dt>
+      <dd><code>2em</code></dd>
+      <dt>line height</dt>
+      <dd><code>1em</code></dd>
+      <dt>font family</dt>
+      <dd><code>Noto Sans</code></dd>
+      <dt>source</dt>
+      <dd>GCWeb</dd>
+    </dl>
+    <p>Demo:</p>
+    <h2>[List heading]</h2>
+    <p>Minim non mollit quis labore consectetur ipsum exercitation et ex.
+Culpa amet nisi minim tempor culpa Lorem nostrud occaecat magna laboris commodo veniam est veniam officia.</p>
+    <p class="pull-left"><span class="badge badge-dept">42<span class="wb-inv"> [List heading 1]</span></span></p>
+    <ul class="list-unstyled mrgn-tp-xl">
+      <li>No [List heading 1's] found</li>
+    </ul>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.badge.badge-dept</code></dd>
+      <dt>font size</dt>
+      <dd><code>2em</code></dd>
+      <dt>line height</dt>
+      <dd><code>1.5em</code></dd>
+      <dt>font family</dt>
+      <dd><code>Noto Sans</code></dd>
+      <dt>source</dt>
+      <dd>GCWeb</dd>
+    </dl>
+    <p>Demo:</p>
+    <style>
+      proposed.badge.badge-dept {
+        line-height: 1.5em;
+      }
+    </style>
+    <h2>[List heading]</h2>
+    <p>Minim non mollit quis labore consectetur ipsum exercitation et ex.
+Culpa amet nisi minim tempor culpa Lorem nostrud occaecat magna laboris commodo veniam est veniam officia.</p>
+    <p class="pull-left"><span class="proposed badge badge-dept">42<span class="wb-inv"> [List heading 1]</span></span></p>
+    <ul class="list-unstyled mrgn-tp-xl">
+      <li>No [List heading 1's] found</li>
+    </ul>
+  </section>
+</div>
+
+<h3>Pagination</h3>
+<div class="row">
+  <section class="col-sm-6">
+    <h4>Current</h4>
+    <dl>
+      <dt>class</dt>
+      <dd><code>.pagntn-prv-nxt .glyphicon-chevron-left</code>, <code>.pagntn-prv-nxt .glyphicon-chevron-right</code></dd>
+      <dt>font size</dt>
+      <dd><code>2em</code></dd>
+      <dt>font family</dt>
+      <dd><code>Glyphicons Halflings</code></dd>
+      <dt>source</dt>
+      <dd></dd>
+    </dl>
+    <p>Demo:</p>
+  </section>
+  <section class="col-sm-6">
+    <h4>Proposed</h4>
+    <p>Out of scope</p>
+  </section>
+</div>
\ No newline at end of file
diff --git a/working-on/typography/index.md b/working-on/typography/index.md
new file mode 100644
index 000000000..0012a36a3
--- /dev/null
+++ b/working-on/typography/index.md
@@ -0,0 +1,13 @@
+---
+altLangPage: #
+dateModified: 2021-07-20
+lang: en
+layout: default
+title: Typography experiments
+---
+## Table of content
+- [Links](links.md)
+- [Monospace](monospace.md)
+- [Tables](tables.md)
+- [Text spacing](word-spacing.md)
+- [Font sizes](font-size.md)
\ No newline at end of file