font-stretch「フォントの形状（幅広・幅狭）」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-ultra-condensed{font-stretch : ultra-condensed;}
.css-extra-condensed{font-stretch : extra-condensed;}
.css-condensed{font-stretch : condensed;}
.css-semi-condensed{font-stretch : semi-condensed;}
.css-normal{font-stretch : normal;}
.css-semi-expanded{font-stretch : semi-expanded;}
.css-expanded{font-stretch : expanded;}
.css-extra-expanded{font-stretch : extra-expanded;}
.css-ultra-expanded{font-stretch : ultra-expanded;}
.css-font-family{font-family : 'Arial';}

<!-- html -->
<div class="common">
  <div class="cssTitle">font-stretch 表示例</div>
  <div>
  <span class="css-ultra-condensed css-font-family">
  text with the font stretched  :  ultra-condensed</span><br>
  <span class="css-extra-condensed css-font-family">
  text with the font stretched  :  extra-condensed</span><br>
  <span class="css-condensed css-font-family">
  text with the font stretched  :  condensed</span><br>
  <span class="css-semi-condensed css-font-family">
  text with the font stretched  :  semi-condensed</span><br>
  <span class="css-normal css-font-family">
  text with the font stretched  :  normal</span><br>
  <span class="css-semi-expanded css-font-family">
  text with the font stretched  :  semi-expanded</span><br>
  <span class="css-expanded css-font-family">
  text with the font stretched  :  expanded</span><br>
  <span class="css-extra-expanded css-font-family">
  text with the font stretched  :  extra-expanded</span><br>
  <span class="css-ultra-expanded css-font-family">
  text with the font stretched  :  ultra-expanded</span><br>
  </div>
</div>