<h2>Using bolder/lighter keywords<br>with <code>font-weight</code></h2>

<div class="box">
  Box
  <div class="box-2">
    - Box 2
    <div class="box-3">
      -- Box 3
      <div class="box-4">
        --- Box 4
        <div class="box-5">
          ---- Box 5
          <div class="box-6">
            ----- Box 6
            <div class="box-7">
              ------ Box 7
              <div class="box-8">
                ------- Box 8
                <div class="box-9">
                  -------- Box 9
                  <div class="box-10">
                    --------- Box 10
                    <div class="box-11">
                      ---------- Box 11
                      <div class="box-12">
                        ----------- Box 12
                      </div>
                      <!-- box 12 -->
                    </div>
                    <!-- box 11 -->
                  </div>
                  <!-- box 10 -->
                </div>
                <!-- box 9 -->
              </div>
              <!-- box 8 -->
            </div>
            <!-- box 7 -->
          </div>
          <!-- box 6 -->
        </div>
        <!-- box 5 -->
      </div>
      <!-- box 4 -->
    </div>
    <!-- box 3 -->
  </div>
  <!-- box 2 -->
</div>
<!-- box -->

<p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>

body {
  font-family: 'Exo 2', serif;
  text-align: center;
  font-size: 22px;
}

h2 {
  margin: 14px;
  font-family: Arial, sans-serif;
  font-size: 1.4em;
}

.box {
  font-weight: 100;
}

.box-2 {
  font-weight: bolder; /* 400 */
}

.box-3 {
  font-weight: bolder; /* 700 */
}

.box-4 {
  font-weight: 400;
}

.box-5 {
  font-weight: bolder; /* 700 */
}

.box-6 {
  font-weight: bolder; /* 900 */
}

.box-7 {
  font-weight: 700;
}

.box-8 {
  font-weight: bolder; /* 900 */
}

.box-9 {
  font-weight: bolder; /* 900 */
}

.box-10 {
  font-weight: lighter; /* 700 */
}

.box-11 {
  font-weight: lighter; /* 400 */
}

.box-12 {
  font-weight: lighter; /* 100 */
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}