@@ -62,10 +62,10 @@ <h3 class="f2 f1-m f-subheadline-l fw4 garamond ttu tracked mt0">Garamond</h3>
62
62
< p class ="f4 f2-m f1-l tracked "> œ∑´®†¥¨ˆøπ“‘«åß∂ƒ©˙∆˚¬…æΩ≈ç√∫˜µ≤≥÷</ p >
63
63
</ div >
64
64
< section >
65
- < h3 class ="f6 ttu fw4 "> Font Weights</ h3 >
65
+ < h3 class ="f6 ttu fw4 "> Font Weights</ h3 >
66
66
< div class ="w-100 overflow-x-auto ">
67
67
< table class ="mt4 ">
68
- < caption class ="f6 tl pb3 "> 600- 900</ caption >
68
+ < caption class ="f6 tl pb3 "> 900</ caption >
69
69
< tr >
70
70
< td class ="tc f-headline fw9 br b--black-10 v-base "> A</ td >
71
71
< td class ="tc ph2 br f-subheadline fw9 br b--black-10 v-base "> A</ td >
@@ -88,7 +88,99 @@ <h3 class="f6 ttu fw4">Font Weights</h3>
88
88
</ tr >
89
89
</ table >
90
90
< table class ="mt4 ">
91
- < caption class ="f6 tl pb3 "> 100-500</ caption >
91
+ < caption class ="f6 tl pb3 "> 800</ caption >
92
+ < tr >
93
+ < td class ="tc f-headline fw8 br b--black-10 v-base "> A</ td >
94
+ < td class ="tc ph2 br f-subheadline fw8 br b--black-10 v-base "> A</ td >
95
+ < td class ="tc f1 fw8 br b--black-10 v-base "> A</ td >
96
+ < td class ="tc f2 fw8 br b--black-10 v-base "> A</ td >
97
+ < td class ="tc f3 fw8 br b--black-10 v-base "> A</ td >
98
+ < td class ="tc f4 fw8 br b--black-10 v-base "> A</ td >
99
+ < td class ="tc f5 fw8 br b--black-10 v-base "> A</ td >
100
+ < td class ="tc f6 fw8 b--black-10 v-base "> A</ td >
101
+ </ tr >
102
+ < tr >
103
+ < td class ="tc gray f6 fw2 pr2 bt br b--black-10 pt1 "> 6rem (96px)</ td >
104
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 5rem (80px)</ td >
105
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 3rem (48px)</ td >
106
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 2.25rem (36px)</ td >
107
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.5rem (24px)</ td >
108
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.25rem (20px)</ td >
109
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1rem (16px)</ td >
110
+ < td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
111
+ </ tr >
112
+ </ table >
113
+ < table class ="mt4 ">
114
+ < caption class ="f6 tl pb3 "> 700</ caption >
115
+ < tr >
116
+ < td class ="tc f-headline fw7 br b--black-10 v-base "> A</ td >
117
+ < td class ="tc ph2 br f-subheadline fw7 br b--black-10 v-base "> A</ td >
118
+ < td class ="tc f1 fw7 br b--black-10 v-base "> A</ td >
119
+ < td class ="tc f2 fw7 br b--black-10 v-base "> A</ td >
120
+ < td class ="tc f3 fw7 br b--black-10 v-base "> A</ td >
121
+ < td class ="tc f4 fw7 br b--black-10 v-base "> A</ td >
122
+ < td class ="tc f5 fw7 br b--black-10 v-base "> A</ td >
123
+ < td class ="tc f6 fw7 b--black-10 v-base "> A</ td >
124
+ </ tr >
125
+ < tr >
126
+ < td class ="tc gray f6 fw2 pr2 bt br b--black-10 pt1 "> 6rem (96px)</ td >
127
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 5rem (80px)</ td >
128
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 3rem (48px)</ td >
129
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 2.25rem (36px)</ td >
130
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.5rem (24px)</ td >
131
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.25rem (20px)</ td >
132
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1rem (16px)</ td >
133
+ < td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
134
+ </ tr >
135
+ </ table >
136
+ < table class ="mt4 ">
137
+ < caption class ="f6 tl pb3 "> 600</ caption >
138
+ < tr >
139
+ < td class ="tc f-headline fw6 br b--black-10 v-base "> A</ td >
140
+ < td class ="tc ph2 br f-subheadline fw6 br b--black-10 v-base "> A</ td >
141
+ < td class ="tc f1 fw6 br b--black-10 v-base "> A</ td >
142
+ < td class ="tc f2 fw6 br b--black-10 v-base "> A</ td >
143
+ < td class ="tc f3 fw6 br b--black-10 v-base "> A</ td >
144
+ < td class ="tc f4 fw6 br b--black-10 v-base "> A</ td >
145
+ < td class ="tc f5 fw6 br b--black-10 v-base "> A</ td >
146
+ < td class ="tc f6 fw6 b--black-10 v-base "> A</ td >
147
+ </ tr >
148
+ < tr >
149
+ < td class ="tc gray f6 fw2 pr2 bt br b--black-10 pt1 "> 6rem (96px)</ td >
150
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 5rem (80px)</ td >
151
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 3rem (48px)</ td >
152
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 2.25rem (36px)</ td >
153
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.5rem (24px)</ td >
154
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.25rem (20px)</ td >
155
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1rem (16px)</ td >
156
+ < td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
157
+ </ tr >
158
+ </ table >
159
+ < table class ="mt4 ">
160
+ < caption class ="f6 tl pb3 "> 500</ caption >
161
+ < tr >
162
+ < td class ="tc f-headline fw5 br b--black-10 v-base "> A</ td >
163
+ < td class ="tc ph2 br f-subheadline fw5 br b--black-10 v-base "> A</ td >
164
+ < td class ="tc f1 fw5 br b--black-10 v-base "> A</ td >
165
+ < td class ="tc f2 fw5 br b--black-10 v-base "> A</ td >
166
+ < td class ="tc f3 fw5 br b--black-10 v-base "> A</ td >
167
+ < td class ="tc f4 fw5 br b--black-10 v-base "> A</ td >
168
+ < td class ="tc f5 fw5 br b--black-10 v-base "> A</ td >
169
+ < td class ="tc f6 fw5 b--black-10 v-base "> A</ td >
170
+ </ tr >
171
+ < tr >
172
+ < td class ="tc gray f6 fw2 pr2 bt br b--black-10 pt1 "> 6rem (96px)</ td >
173
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 5rem (80px)</ td >
174
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 3rem (48px)</ td >
175
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 2.25rem (36px)</ td >
176
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.5rem (24px)</ td >
177
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.25rem (20px)</ td >
178
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1rem (16px)</ td >
179
+ < td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
180
+ </ tr >
181
+ </ table >
182
+ < table class ="mt4 ">
183
+ < caption class ="f6 tl pb3 "> 400</ caption >
92
184
< tr >
93
185
< td class ="tc f-headline fw4 br b--black-10 v-base "> A</ td >
94
186
< td class ="tc ph2 br f-subheadline fw4 br b--black-10 v-base "> A</ td >
@@ -110,6 +202,75 @@ <h3 class="f6 ttu fw4">Font Weights</h3>
110
202
< td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
111
203
</ tr >
112
204
</ table >
205
+ < table class ="mt4 ">
206
+ < caption class ="f6 tl pb3 "> 300</ caption >
207
+ < tr >
208
+ < td class ="tc f-headline fw3 br b--black-10 v-base "> A</ td >
209
+ < td class ="tc ph2 br f-subheadline fw3 br b--black-10 v-base "> A</ td >
210
+ < td class ="tc f1 fw3 br b--black-10 v-base "> A</ td >
211
+ < td class ="tc f2 fw3 br b--black-10 v-base "> A</ td >
212
+ < td class ="tc f3 fw3 br b--black-10 v-base "> A</ td >
213
+ < td class ="tc f4 fw3 br b--black-10 v-base "> A</ td >
214
+ < td class ="tc f5 fw3 br b--black-10 v-base "> A</ td >
215
+ < td class ="tc f6 fw3 b--black-10 v-base "> A</ td >
216
+ </ tr >
217
+ < tr >
218
+ < td class ="tc gray f6 fw2 pr2 bt br b--black-10 pt1 "> 6rem (96px)</ td >
219
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 5rem (80px)</ td >
220
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 3rem (48px)</ td >
221
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 2.25rem (36px)</ td >
222
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.5rem (24px)</ td >
223
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.25rem (20px)</ td >
224
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1rem (16px)</ td >
225
+ < td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
226
+ </ tr >
227
+ </ table >
228
+ < table class ="mt4 ">
229
+ < caption class ="f6 tl pb3 "> 200</ caption >
230
+ < tr >
231
+ < td class ="tc f-headline fw2 br b--black-10 v-base "> A</ td >
232
+ < td class ="tc ph2 br f-subheadline fw2 br b--black-10 v-base "> A</ td >
233
+ < td class ="tc f1 fw2 br b--black-10 v-base "> A</ td >
234
+ < td class ="tc f2 fw2 br b--black-10 v-base "> A</ td >
235
+ < td class ="tc f3 fw2 br b--black-10 v-base "> A</ td >
236
+ < td class ="tc f4 fw2 br b--black-10 v-base "> A</ td >
237
+ < td class ="tc f5 fw2 br b--black-10 v-base "> A</ td >
238
+ < td class ="tc f6 fw2 b--black-10 v-base "> A</ td >
239
+ </ tr >
240
+ < tr >
241
+ < td class ="tc gray f6 fw2 pr2 bt br b--black-10 pt1 "> 6rem (96px)</ td >
242
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 5rem (80px)</ td >
243
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 3rem (48px)</ td >
244
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 2.25rem (36px)</ td >
245
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.5rem (24px)</ td >
246
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.25rem (20px)</ td >
247
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1rem (16px)</ td >
248
+ < td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
249
+ </ tr >
250
+ </ table >
251
+ < table class ="mt4 ">
252
+ < caption class ="f6 tl pb3 "> 100</ caption >
253
+ < tr >
254
+ < td class ="tc f-headline fw1 br b--black-10 v-base "> A</ td >
255
+ < td class ="tc ph2 br f-subheadline fw1 br b--black-10 v-base "> A</ td >
256
+ < td class ="tc f1 fw1 br b--black-10 v-base "> A</ td >
257
+ < td class ="tc f2 fw1 br b--black-10 v-base "> A</ td >
258
+ < td class ="tc f3 fw1 br b--black-10 v-base "> A</ td >
259
+ < td class ="tc f4 fw1 br b--black-10 v-base "> A</ td >
260
+ < td class ="tc f5 fw1 br b--black-10 v-base "> A</ td >
261
+ < td class ="tc f6 fw1 b--black-10 v-base "> A</ td >
262
+ </ tr >
263
+ < tr >
264
+ < td class ="tc gray f6 fw2 pr2 bt br b--black-10 pt1 "> 6rem (96px)</ td >
265
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 5rem (80px)</ td >
266
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 3rem (48px)</ td >
267
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 2.25rem (36px)</ td >
268
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.5rem (24px)</ td >
269
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1.25rem (20px)</ td >
270
+ < td class ="tc gray f6 fw2 ph2 bt br b--black-10 pt1 "> 1rem (16px)</ td >
271
+ < td class ="tc gray f6 fw2 pl2 bt b--black-10 pt1 "> .875rem (14px)</ td >
272
+ </ tr >
273
+ </ table >
113
274
</ div >
114
275
</ section >
115
276
< section class ="mt5 ">
@@ -129,9 +290,9 @@ <h3 class="f6 ttu fw4">Italic</h3>
129
290
the clarity and harmony of their forms they have survived until the present.
130
291
</ p >
131
292
< p class ="f5 lh-copy measure-narrow dib mt0 v-top ">
132
- Both normal and medium weights are available. The normal face is
293
+ The normal or medium faces are
133
294
often used in small sizes for marginalia and captions to
134
- pictures. The medium and italic faces are used mostly as display
295
+ pictures. The semi-bold, bold, and italic faces are used mostly as display
135
296
faces.
136
297
</ p >
137
298
< p class ="f5 lh-copy measure-narrow dib mt0 v-top ">
0 commit comments