| <!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> |
