Skip to content

Commit 352b1db

Browse files
author
mrmrs
committed
Update garamond
1 parent 7a5e671 commit 352b1db

File tree

2 files changed

+332
-10
lines changed

2 files changed

+332
-10
lines changed

‎docs/typography/font-family/garamond/index.html

Lines changed: 166 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ <h3 class="f2 f1-m f-subheadline-l fw4 garamond ttu tracked mt0">Garamond</h3>
6262
<p class="f4 f2-m f1-l tracked">œ∑´®†¥¨ˆøπ“‘«åß∂ƒ©˙∆˚¬…æΩ≈ç√∫˜µ≤≥÷</p>
6363
</div>
6464
<section>
65-
<h3 class="f6 ttu fw4">Font Weights</h3>
65+
<h3 class="f6 ttu fw4">Font Weights</h3>
6666
<div class="w-100 overflow-x-auto">
6767
<table class="mt4">
68-
<caption class="f6 tl pb3">600-900</caption>
68+
<caption class="f6 tl pb3">900</caption>
6969
<tr>
7070
<td class="tc f-headline fw9 br b--black-10 v-base">A</td>
7171
<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>
8888
</tr>
8989
</table>
9090
<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>
92184
<tr>
93185
<td class="tc f-headline fw4 br b--black-10 v-base">A</td>
94186
<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>
110202
<td class="tc gray f6 fw2 pl2 bt b--black-10 pt1">.875rem (14px)</td>
111203
</tr>
112204
</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>
113274
</div>
114275
</section>
115276
<section class="mt5">
@@ -129,9 +290,9 @@ <h3 class="f6 ttu fw4">Italic</h3>
129290
the clarity and harmony of their forms they have survived until the present.
130291
</p>
131292
<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
133294
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
135296
faces.
136297
</p>
137298
<p class="f5 lh-copy measure-narrow dib mt0 v-top">

0 commit comments

Comments
 (0)