<!DOCTYPE html>
<html>
<head>
<style>
div { font-family: Segoe UI; }
.light { font-family: Segoe UI Light; }
.semibold { font-family: Segoe UI Semibold; }
</style>
</head>
<body>
<section>
<h2>font-weight: 200 vs light</h2>
<div style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
<div class="light">Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 200">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>font-weight: 600 vs semibold</h2>
<div style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold">Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 600">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 weight, Segoe UI</h2>
<div style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
<div style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
</section>
<section>
<h2>Specific weight, Segoe UI Light</h2>
<div class="light" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="light" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
</section>
<section>
<h2>Specific weight, Segoe UI Semibold</h2>
<div class="semibold" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
<div class="semibold" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
</section>
</body>
</html>
Codebase Browser
chromium