-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlesson.html
More file actions
290 lines (268 loc) · 15 KB
/
Copy pathlesson.html
File metadata and controls
290 lines (268 loc) · 15 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seeing rhythm, colour and texture — Syllabus Bootstrap 6 Course Template</title>
<meta name="description" content="A free sample lesson from Typography for Interfaces, with notes, resources and the same progress tracking as the full curriculum.">
<link rel="stylesheet" href="assets/vendor/bootstrap6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-lessons='{"l1": 9, "l2": 14, "l3": 17, "l4": 25, "l5": 11, "l6": 13, "l7": 16, "l8": 12, "l9": 30, "l10": 15, "l11": 12, "l12": 18, "l13": 22, "l14": 35, "l15": 14, "l16": 13, "l17": 16, "l18": 11, "l19": 19, "l20": 40, "l21": 14, "l22": 12, "l23": 17, "l24": 10, "l25": 35, "l26": 15, "l27": 13, "l28": 14, "l29": 18, "l30": 30, "l31": 21, "l32": 16, "l33": 19, "l34": 90}'>
<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="#main">Skip to main content</a>
<header class="site-header">
<nav class="navbar lg:navbar-expand" aria-label="Main">
<div class="container">
<a class="wordmark" href="index.html"><svg class="brand-glyph" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M2.5 5.5A2 2 0 0 1 4.5 3.5H11v17H4.5a2 2 0 0 1-2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M21.5 5.5a2 2 0 0 0-2-2H13v17h6.5a2 2 0 0 0 2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" opacity=".45"/>
</svg><span>Syllabus</span></a>
<dialog class="drawer drawer-end" tabindex="-1" id="navDrawer" aria-labelledby="navDrawerLabel">
<div class="drawer-header">
<h5 class="drawer-title" id="navDrawerLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="drawer-body mb-2 lg:mb-0">
<ul class="nav navbar-nav ms-auto lg:gap-4">
<li class="nav-item"><a class="nav-link" href="index.html#outcomes">What you'll learn</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#curriculum">Curriculum</a></li>
<li class="nav-item"><a class="nav-link" href="lesson.html">Sample lesson</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#teacher">Who teaches it</a></li>
</ul>
</div>
</dialog>
<div class="d-flex align-items-center gap-2 ms-auto">
<button class="btn-icon" type="button" id="themeToggle" aria-label="Toggle color mode">
<svg class="theme-icon-light" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="3.25"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1m11-4-1 1M5 11l-1 1m0-8 1 1m6 6 1 1"/></svg>
<svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/></svg>
</button>
<a class="btn-solid theme-primary" href="index.html#enrol">Enrol — £180</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navDrawer" aria-controls="navDrawer" aria-label="Open navigation">
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
</header>
<main id="main" class="lesson-page">
<div class="container">
<div class="row g-5">
<div class="lg:col-8">
<p class="eyebrow fs-xs mb-3"><a href="index.html">Typography for Interfaces</a> · Module 01 · Lesson 3</p>
<h1 class="display-serif fs-4xl mb-3">Seeing rhythm, colour and texture</h1>
<p class="fg-3 fs-sm mb-4">17 minutes · Free sample · Updated March 2026</p>
<!-- Player stand-in. Deliberately not an <iframe> to a real service:
the template ships with nothing to embed and a dead embed looks
broken, whereas this reads as the placeholder it is. -->
<div class="player">
<img src="img/lesson.jpg" alt="Still from the lesson" width="1200" height="675" loading="eager">
<button class="player-btn" type="button" aria-label="Play lesson (demo)">
<svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13l11-6.5-11-6.5Z"/></svg>
</button>
<span class="player-time">17:04</span>
</div>
<div class="prose">
<p class="fs-lg">
Most people learn to read a typeface one letter at a time — the bowl
of the <em>a</em>, the terminal on the <em>f</em>. Useful for an exam.
Almost useless in front of a real screen, where what you are actually
judging is a paragraph you are looking at from two feet away.
</p>
<p>
This lesson swaps the microscope for a squint. Three properties do
nearly all the work at that distance, and once you can see them you
can diagnose a page in about four seconds.
</p>
<h2>Rhythm</h2>
<p>
The even alternation of stem and counter — black and white — as your
eye runs along a line. Broken rhythm is what you are noticing when a
paragraph feels "spotty" without your being able to say why. Common
causes: a face with inconsistent sidebearings at small sizes, letter
spacing applied to lowercase text, or a fallback font swapping in for
two of the twenty-six characters.
</p>
<h2>Colour</h2>
<p>
Not hue — the overall grey value of a block of set text. Two
paragraphs in the same size, weight and colour can have visibly
different densities, and that difference is what makes one column of
a two-column layout look heavier than its neighbour. Squint until the
words stop resolving and compare the greys.
</p>
<blockquote>
<p>If you can still read it, you are not squinting hard enough. The point is to stop reading and start seeing.</p>
</blockquote>
<h2>Texture</h2>
<p>
The combination of the two, plus the shape of the paragraph's ragged
edge. Texture is why a justified column and a ragged-right column of
identical text feel like different documents, and why a measure of
110 characters feels exhausting before you have consciously noticed
its width.
</p>
<h3>Try this now</h3>
<p>
Open any product you use daily. Blur your eyes until the text is
unreadable. Where does the page go grey and even, and where does it
clot? The clots are almost always where somebody set a heading and a
paragraph in the same weight, or where a table has crept to eleven
columns.
</p>
</div>
<div class="lesson-foot">
<a class="btn-outline theme-secondary" href="lesson.html">← Anatomy without the vocabulary test</a>
<a class="btn-solid theme-primary" href="lesson.html">Exercise: annotate three interfaces →</a>
</div>
</div>
<aside class="lg:col-4">
<div class="rail">
<div class="rail-card mb-4">
<p class="tracker-k mb-1">Your progress</p>
<p class="tracker-v mb-3"><span data-done>0</span> of 34 lessons</p>
<div class="progress" role="progressbar" aria-label="Course progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-bar-wrap>
<div class="progress-bar" style="width:0%" data-bar></div>
</div>
<p class="fs-sm fg-3 mt-3 mb-0"><span data-remaining>11h 26m</span> left to watch</p>
</div>
<div class="rail-card mb-4">
<p class="eyebrow fs-xs fg-3 mb-3">Resources for this lesson</p>
<ul class="link-list mb-0">
<li><a href="lesson.html">Squint-test worksheet (PDF)</a></li>
<li><a href="lesson.html">Specimen set used in the video</a></li>
<li><a href="lesson.html">Transcript</a></li>
</ul>
</div>
<p class="eyebrow fs-xs fg-3 mb-3">Course outline</p>
<div data-curriculum>
<details class="rail-module" open>
<summary>01 Reading type before you set it</summary>
<ul class="rail-list">
<li>
<input type="checkbox" class="check" id="sl1" data-lesson="l1" data-min="9">
<label for="sl1">Why screen type is a different problem</label>
<span class="lesson-min">9m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl2" data-lesson="l2" data-min="14">
<label for="sl2">Anatomy without the vocabulary test</label>
<span class="lesson-min">14m</span>
</li>
<li class="is-current">
<input type="checkbox" class="check" id="sl3" data-lesson="l3" data-min="17">
<label for="sl3">Seeing rhythm, colour and texture</label>
<span class="lesson-min">17m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl4" data-lesson="l4" data-min="25">
<label for="sl4">Exercise: annotate three interfaces</label>
<span class="lesson-min">25m</span>
</li>
</ul>
</details>
<details class="rail-module" >
<summary>02 Choosing, and defending the choice</summary>
<ul class="rail-list">
<li>
<input type="checkbox" class="check" id="sl5" data-lesson="l5" data-min="11">
<label for="sl5">What a brief actually constrains</label>
<span class="lesson-min">11m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl6" data-lesson="l6" data-min="13">
<label for="sl6">Superfamilies, and when you don't need one</label>
<span class="lesson-min">13m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl7" data-lesson="l7" data-min="16">
<label for="sl7">Testing a face against real content</label>
<span class="lesson-min">16m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl8" data-lesson="l8" data-min="12">
<label for="sl8">Licensing without the panic</label>
<span class="lesson-min">12m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl9" data-lesson="l9" data-min="30">
<label for="sl9">Exercise: shortlist and justify</label>
<span class="lesson-min">30m</span>
</li>
</ul>
</details>
<details class="rail-module" >
<summary>03 Scale, rhythm and the vertical grid</summary>
<ul class="rail-list">
<li>
<input type="checkbox" class="check" id="sl10" data-lesson="l10" data-min="15">
<label for="sl10">Modular scales, and their limits</label>
<span class="lesson-min">15m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl11" data-lesson="l11" data-min="12">
<label for="sl11">Line height is a ratio, not a number</label>
<span class="lesson-min">12m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl12" data-lesson="l12" data-min="18">
<label for="sl12">Optical sizing and why 14px lies</label>
<span class="lesson-min">18m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl13" data-lesson="l13" data-min="22">
<label for="sl13">Building the scale in code</label>
<span class="lesson-min">22m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl14" data-lesson="l14" data-min="35">
<label for="sl14">Exercise: retype a settings page</label>
<span class="lesson-min">35m</span>
</li>
<li>
<input type="checkbox" class="check" id="sl15" data-lesson="l15" data-min="14">
<label for="sl15">Review: common scale failures</label>
<span class="lesson-min">14m</span>
</li>
</ul>
</details>
</div>
<p class="fs-sm mt-3 mb-0"><a href="index.html#curriculum">See all 7 modules</a></p>
</div>
</aside>
</div>
</div>
</main>
<footer class="site-footer section pb-5">
<div class="container">
<div class="row g-5">
<div class="lg:col-5">
<p class="wordmark mb-3"><svg class="brand-glyph" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M2.5 5.5A2 2 0 0 1 4.5 3.5H11v17H4.5a2 2 0 0 1-2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M21.5 5.5a2 2 0 0 0-2-2H13v17h6.5a2 2 0 0 0 2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" opacity=".45"/>
</svg><span>Syllabus</span></p>
<p class="fg-2 fs-sm mb-0" style="max-width:24rem">
One course, taught properly, by someone who does the work. No cohort,
no deadline, no expiry.
</p>
</div>
<div class="md:col-6 lg:col-3">
<p class="eyebrow fs-xs fg-3 mb-3">Course</p>
<ul class="link-list"><li><a href="index.html#outcomes">What you'll learn</a></li><li><a href="index.html#curriculum">Curriculum</a></li><li><a href="lesson.html">Sample lesson</a></li><li><a href="index.html#faq">Questions</a></li></ul>
</div>
<div class="md:col-6 lg:col-4">
<p class="eyebrow fs-xs fg-3 mb-3">Your progress</p>
<p class="fg-2 fs-sm mb-0">
Ticks are stored in this browser only — nothing is sent anywhere and
there is no account. Clearing site data clears your progress, which is
the honest trade for not asking you to sign up.
</p>
</div>
</div>
<hr class="my-5">
<p class="fs-xs fg-3 mb-0">© <span data-year>2026</span> Syllabus — a free Bootstrap 6 template. The course, its teacher and every review here are fictional.</p>
</div>
</footer>
<script type="module" src="assets/js/main.js"></script>
</body>
</html>