<!DOCTYPE html>
<html>
<head>
<style>
div { font-family: Arial; }
.narrow { font-family: Arial Narrow; }
</style>
</head>
<body>
<section>
<h2>font-stretch: condensed vs Arial Narrow</h2>
<div style="font-stretch: condensed">Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow">Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font: extra-condensed">Back in June we delivered oxygen equipment of the same size.</div>
<p>
The three lines above should have the same weight.
</p>
</section>
<section>
<h2>Specific width, Arial</h2>
<div style="font-stretch: ultra-condensed">font-stretch: ultra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: extra-condensed">font-stretch: extra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: condensed">font-stretch: condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: semi-condensed">font-stretch: semi-condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: normal">font-stretch: normal - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: semi-expanded">font-stretch: semi-expanded - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: expanded">font-stretch: expanded - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: extra-expanded">font-stretch: extra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-stretch: ultra-expanded">font-stretch: ultra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
</section>
<section>
<h2>Specific width, Arial Narrow</h2>
<div class="narrow" style="font-stretch: ultra-condensed">font-stretch: ultra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: extra-condensed">font-stretch: extra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: condensed">font-stretch: condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: semi-condensed">font-stretch: semi-condensed - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: normal">font-stretch: normal - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: semi-expanded">font-stretch: semi-expanded - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: expanded">font-stretch: expanded - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: extra-expanded">font-stretch: extra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
<div class="narrow" style="font-stretch: ultra-expanded">font-stretch: ultra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
</section>
</body>
</html>
Codebase Browser
chromium