5 div { font-family: Segoe UI; }
6 .light { font-family: Segoe UI Light; }
7 .semibold { font-family: Segoe UI Semibold; }
12 <h2>font-weight:
200 vs light
</h2>
13 <div style=
"font-weight: 200">Back in June we delivered oxygen equipment of the same size.
</div>
14 <div class=
"light">Back in June we delivered oxygen equipment of the same size.
</div>
15 <div class=
"light" style=
"font-weight: 200">Back in June we delivered oxygen equipment of the same size.
</div>
17 The three lines above should have the same weight.
22 <h2>font-weight:
600 vs semibold
</h2>
23 <div style=
"font-weight: 600">Back in June we delivered oxygen equipment of the same size.
</div>
24 <div class=
"semibold">Back in June we delivered oxygen equipment of the same size.
</div>
25 <div class=
"semibold" style=
"font-weight: 600">Back in June we delivered oxygen equipment of the same size.
</div>
27 The three lines above should have the same weight.
32 <h2>Specific weight, Segoe UI
</h2>
33 <div style=
"font-weight: 100">font-weight:
100 - Back in June we delivered oxygen equipment of the same size.
</div>
34 <div style=
"font-weight: 200">font-weight:
200 - Back in June we delivered oxygen equipment of the same size.
</div>
35 <div style=
"font-weight: 300">font-weight:
300 - Back in June we delivered oxygen equipment of the same size.
</div>
36 <div style=
"font-weight: 400">font-weight:
400 - Back in June we delivered oxygen equipment of the same size.
</div>
37 <div style=
"font-weight: 500">font-weight:
500 - Back in June we delivered oxygen equipment of the same size.
</div>
38 <div style=
"font-weight: 600">font-weight:
600 - Back in June we delivered oxygen equipment of the same size.
</div>
39 <div style=
"font-weight: 700">font-weight:
700 - Back in June we delivered oxygen equipment of the same size.
</div>
40 <div style=
"font-weight: 800">font-weight:
800 - Back in June we delivered oxygen equipment of the same size.
</div>
41 <div style=
"font-weight: 900">font-weight:
900 - Back in June we delivered oxygen equipment of the same size.
</div>
45 <h2>Specific weight, Segoe UI Light
</h2>
46 <div class=
"light" style=
"font-weight: 100">font-weight:
100 - Back in June we delivered oxygen equipment of the same size.
</div>
47 <div class=
"light" style=
"font-weight: 200">font-weight:
200 - Back in June we delivered oxygen equipment of the same size.
</div>
48 <div class=
"light" style=
"font-weight: 300">font-weight:
300 - Back in June we delivered oxygen equipment of the same size.
</div>
49 <div class=
"light" style=
"font-weight: 400">font-weight:
400 - Back in June we delivered oxygen equipment of the same size.
</div>
50 <div class=
"light" style=
"font-weight: 500">font-weight:
500 - Back in June we delivered oxygen equipment of the same size.
</div>
51 <div class=
"light" style=
"font-weight: 600">font-weight:
600 - Back in June we delivered oxygen equipment of the same size.
</div>
52 <div class=
"light" style=
"font-weight: 700">font-weight:
700 - Back in June we delivered oxygen equipment of the same size.
</div>
53 <div class=
"light" style=
"font-weight: 800">font-weight:
800 - Back in June we delivered oxygen equipment of the same size.
</div>
54 <div class=
"light" style=
"font-weight: 900">font-weight:
900 - Back in June we delivered oxygen equipment of the same size.
</div>
58 <h2>Specific weight, Segoe UI Semibold
</h2>
59 <div class=
"semibold" style=
"font-weight: 100">font-weight:
100 - Back in June we delivered oxygen equipment of the same size.
</div>
60 <div class=
"semibold" style=
"font-weight: 200">font-weight:
200 - Back in June we delivered oxygen equipment of the same size.
</div>
61 <div class=
"semibold" style=
"font-weight: 300">font-weight:
300 - Back in June we delivered oxygen equipment of the same size.
</div>
62 <div class=
"semibold" style=
"font-weight: 400">font-weight:
400 - Back in June we delivered oxygen equipment of the same size.
</div>
63 <div class=
"semibold" style=
"font-weight: 500">font-weight:
500 - Back in June we delivered oxygen equipment of the same size.
</div>
64 <div class=
"semibold" style=
"font-weight: 600">font-weight:
600 - Back in June we delivered oxygen equipment of the same size.
</div>
65 <div class=
"semibold" style=
"font-weight: 700">font-weight:
700 - Back in June we delivered oxygen equipment of the same size.
</div>
66 <div class=
"semibold" style=
"font-weight: 800">font-weight:
800 - Back in June we delivered oxygen equipment of the same size.
</div>
67 <div class=
"semibold" style=
"font-weight: 900">font-weight:
900 - Back in June we delivered oxygen equipment of the same size.
</div>