-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathfont-weight-test.html
More file actions
151 lines (142 loc) · 10 KB
/
font-weight-test.html
File metadata and controls
151 lines (142 loc) · 10 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Albert Sans Weight Sampler</title>
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
.wt-section { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border-light); }
.wt-label { font-family: var(--font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); background: var(--color-bg-highlight); padding: 2px var(--space-2); display: inline-block; margin-bottom: var(--space-3); }
.wt-row { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.wt-col { flex: 1; min-width: 280px; }
.albert { font-family: 'Albert Sans', sans-serif !important; }
</style>
<script>
const t = localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', t);
</script>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul class="site-nav">
<li><a href="index.html"><svg class="brand-logo" viewBox="0 0 200 18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><rect x="0" y="0" width="4" height="4"/><rect x="0" y="5" width="4" height="4"/><rect x="0" y="10" width="4" height="4"/><rect x="5" y="0" width="4" height="4"/><rect x="5" y="10" width="4" height="4"/><rect x="10" y="5" width="4" height="4"/></svg></a></li>
<li><button class="theme-toggle" onclick="const d=document.documentElement;const n=d.getAttribute('data-theme')==='dark'?'light':'dark';d.setAttribute('data-theme',n);localStorage.setItem('theme',n);">◑</button></li>
</ul>
</nav>
</header>
<main>
<div class="page-title">
<h1 class="albert" style="font-weight: 700;">Albert Sans — Weight Sampler</h1>
</div>
<article class="prose">
<!-- Weight scale on heading -->
<section class="wt-section">
<span class="wt-label">H2 heading at every weight</span>
<div style="display: flex; flex-direction: column; gap: var(--space-2);">
<h2 class="albert" style="margin:0; font-weight:100;">100 Thin — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:200;">200 ExtraLight — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:300;">300 Light — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:400;">400 Regular — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:500;">500 Medium — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:600;">600 SemiBold — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:700;">700 Bold — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:800;">800 ExtraBold — US Economic Indicators</h2>
<h2 class="albert" style="margin:0; font-weight:900;">900 Black — US Economic Indicators</h2>
</div>
</section>
<!-- Realistic combos -->
<section class="wt-section">
<span class="wt-label">Realistic weight combinations</span>
<div class="wt-row">
<div class="wt-col">
<p class="wt-label">Option A: 700 headings, 600 labels, 400 nav</p>
<h1 class="albert" style="margin:0; font-weight:700;">Monthly GDP</h1>
<h3 class="albert" style="margin:var(--space-2) 0 0; font-weight:700;">Data Sources</h3>
<div class="albert" style="font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; margin-top: var(--space-3);">Reports Guides Blog About</div>
<div style="margin-top: var(--space-3);"><span class="albert" style="font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">Category Label</span></div>
<div class="card accent-red" style="max-width: 350px; margin-top: var(--space-3);">
<div class="card-header"><span class="card-title albert" style="font-weight: 700;">Unemployment Rate</span></div>
<div class="card-body"><p style="font-size: var(--text-sm);">Body text in Lato.</p></div>
</div>
</div>
<div class="wt-col">
<p class="wt-label">Option B: 800 headings, 700 labels, 500 nav</p>
<h1 class="albert" style="margin:0; font-weight:800;">Monthly GDP</h1>
<h3 class="albert" style="margin:var(--space-2) 0 0; font-weight:800;">Data Sources</h3>
<div class="albert" style="font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-top: var(--space-3);">Reports Guides Blog About</div>
<div style="margin-top: var(--space-3);"><span class="albert" style="font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">Category Label</span></div>
<div class="card accent-red" style="max-width: 350px; margin-top: var(--space-3);">
<div class="card-header"><span class="card-title albert" style="font-weight: 800;">Unemployment Rate</span></div>
<div class="card-body"><p style="font-size: var(--text-sm);">Body text in Lato.</p></div>
</div>
</div>
</div>
<div class="wt-row">
<div class="wt-col">
<p class="wt-label">Option C: 900 headings, 700 labels, 500 nav (THICK)</p>
<h1 class="albert" style="margin:0; font-weight:900;">Monthly GDP</h1>
<h3 class="albert" style="margin:var(--space-2) 0 0; font-weight:900;">Data Sources</h3>
<div class="albert" style="font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-top: var(--space-3);">Reports Guides Blog About</div>
<div style="margin-top: var(--space-3);"><span class="albert" style="font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">Category Label</span></div>
<div class="card accent-red" style="max-width: 350px; margin-top: var(--space-3);">
<div class="card-header"><span class="card-title albert" style="font-weight: 900;">Unemployment Rate</span></div>
<div class="card-body"><p style="font-size: var(--text-sm);">Body text in Lato.</p></div>
</div>
</div>
<div class="wt-col">
<p class="wt-label">Option D: Mixed — 800 h1, 600 h3, 500 nav, 700 labels</p>
<h1 class="albert" style="margin:0; font-weight:800;">Monthly GDP</h1>
<h3 class="albert" style="margin:var(--space-2) 0 0; font-weight:600;">Data Sources</h3>
<div class="albert" style="font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-top: var(--space-3);">Reports Guides Blog About</div>
<div style="margin-top: var(--space-3);"><span class="albert" style="font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">Category Label</span></div>
<div class="card accent-red" style="max-width: 350px; margin-top: var(--space-3);">
<div class="card-header"><span class="card-title albert" style="font-weight: 700;">Unemployment Rate</span></div>
<div class="card-body"><p style="font-size: var(--text-sm);">Body text in Lato.</p></div>
</div>
</div>
</div>
</section>
<!-- Table headers at different weights -->
<section class="wt-section">
<span class="wt-label">Table headers at 600, 700, 800</span>
<div class="wt-row">
<div class="wt-col">
<table>
<thead><tr><th class="albert" style="font-weight:600;">Indicator</th><th class="albert" style="font-weight:600;">Value</th><th class="albert" style="font-weight:600;">Change</th></tr></thead>
<tbody><tr><td>GDP Growth</td><td>2.8%</td><td>+0.3</td></tr><tr><td>Unemployment</td><td>4.1%</td><td>-0.1</td></tr></tbody>
</table>
<span class="wt-label" style="margin-top: var(--space-2);">600 weight</span>
</div>
<div class="wt-col">
<table>
<thead><tr><th class="albert" style="font-weight:700;">Indicator</th><th class="albert" style="font-weight:700;">Value</th><th class="albert" style="font-weight:700;">Change</th></tr></thead>
<tbody><tr><td>GDP Growth</td><td>2.8%</td><td>+0.3</td></tr><tr><td>Unemployment</td><td>4.1%</td><td>-0.1</td></tr></tbody>
</table>
<span class="wt-label" style="margin-top: var(--space-2);">700 weight</span>
</div>
<div class="wt-col">
<table>
<thead><tr><th class="albert" style="font-weight:800;">Indicator</th><th class="albert" style="font-weight:800;">Value</th><th class="albert" style="font-weight:800;">Change</th></tr></thead>
<tbody><tr><td>GDP Growth</td><td>2.8%</td><td>+0.3</td></tr><tr><td>Unemployment</td><td>4.1%</td><td>-0.1</td></tr></tbody>
</table>
<span class="wt-label" style="margin-top: var(--space-2);">800 weight</span>
</div>
</div>
</section>
<!-- Footer at different weights -->
<section class="wt-section">
<span class="wt-label">Footer / small uppercase at 500, 600, 700, 800</span>
<div style="display: flex; flex-direction: column; gap: var(--space-3);">
<div class="albert" style="font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">500 — © 2026 BD Economics · Data · Guides · About</div>
<div class="albert" style="font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">600 — © 2026 BD Economics · Data · Guides · About</div>
<div class="albert" style="font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">700 — © 2026 BD Economics · Data · Guides · About</div>
<div class="albert" style="font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);">800 — © 2026 BD Economics · Data · Guides · About</div>
</div>
</section>
</article>
</main>
</body>
</html>