source for lucas.co
archive/fonts/butler/demo.html (15.7K)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <meta name="robots" content="noindex, noarchive">
8 <meta name="format-detection" content="telephone=no">
9 <title>Transfonter demo</title>
10 <link href="stylesheet.css" rel="stylesheet">
11 <style>
12 /*
13 http://meyerweb.com/eric/tools/css/reset/
14 v2.0 | 20110126
15 License: none (public domain)
16 */
17 html, body, div, span, applet, object, iframe,
18 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
19 a, abbr, acronym, address, big, cite, code,
20 del, dfn, em, img, ins, kbd, q, s, samp,
21 small, strike, strong, sub, sup, tt, var,
22 b, u, i, center,
23 dl, dt, dd, ol, ul, li,
24 fieldset, form, label, legend,
25 table, caption, tbody, tfoot, thead, tr, th, td,
26 article, aside, canvas, details, embed,
27 figure, figcaption, footer, header, hgroup,
28 menu, nav, output, ruby, section, summary,
29 time, mark, audio, video {
30 margin: 0;
31 padding: 0;
32 border: 0;
33 font-size: 100%;
34 font: inherit;
35 vertical-align: baseline;
36 }
37 /* HTML5 display-role reset for older browsers */
38 article, aside, details, figcaption, figure,
39 footer, header, hgroup, menu, nav, section {
40 display: block;
41 }
42 body {
43 line-height: 1;
44 }
45 ol, ul {
46 list-style: none;
47 }
48 blockquote, q {
49 quotes: none;
50 }
51 blockquote:before, blockquote:after,
52 q:before, q:after {
53 content: '';
54 content: none;
55 }
56 table {
57 border-collapse: collapse;
58 border-spacing: 0;
59 }
60 /* common styles */
61 body {
62 background: #f1f1f1;
63 color: #000;
64 }
65 .page {
66 background: #fff;
67 width: 920px;
68 margin: 0 auto;
69 padding: 20px 20px 0 20px;
70 overflow: hidden;
71 }
72 .font-container {
73 overflow-x: auto;
74 overflow-y: hidden;
75 margin-bottom: 40px;
76 line-height: 1.3;
77 white-space: nowrap;
78 padding-bottom: 5px;
79 }
80 h1 {
81 position: relative;
82 background: #444;
83 font-size: 32px;
84 color: #fff;
85 padding: 10px 20px;
86 margin: 0 -20px 12px -20px;
87 }
88 .letters {
89 font-size: 25px;
90 margin-bottom: 20px;
91 }
92 .s10:before {
93 content: '10px';
94 }
95 .s11:before {
96 content: '11px';
97 }
98 .s12:before {
99 content: '12px';
100 }
101 .s14:before {
102 content: '14px';
103 }
104 .s18:before {
105 content: '18px';
106 }
107 .s24:before {
108 content: '24px';
109 }
110 .s30:before {
111 content: '30px';
112 }
113 .s36:before {
114 content: '36px';
115 }
116 .s48:before {
117 content: '48px';
118 }
119 .s60:before {
120 content: '60px';
121 }
122 .s72:before {
123 content: '72px';
124 }
125 .s10:before, .s11:before, .s12:before, .s14:before,
126 .s18:before, .s24:before, .s30:before, .s36:before,
127 .s48:before, .s60:before, .s72:before {
128 font-family: Arial, sans-serif;
129 font-size: 10px;
130 font-weight: normal;
131 font-style: normal;
132 color: #999;
133 padding-right: 6px;
134 }
135 pre {
136 display: block;
137 position: relative;
138 padding: 9px;
139 margin: 0 0 10px;
140 font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
141 font-size: 13px;
142 line-height: 1.428571429;
143 color: #333;
144 font-weight: normal !important;
145 font-style: normal !important;
146 background-color: #f5f5f5;
147 border: 1px solid #ccc;
148 overflow-x: auto;
149 border-radius: 4px;
150 }
151 pre:after {
152 display: block;
153 position: absolute;
154 right: 0;
155 top: 0;
156 content: 'Usage';
157 line-height: 1;
158 padding: 5px 8px;
159 font-size: 12px;
160 color: #767676;
161 background-color: #fff;
162 border: 1px solid #ccc;
163 border-right: none;
164 border-top: none;
165 border-radius: 0 4px 0 4px;
166 z-index: 10;
167 }
168 /* responsive */
169 @media (max-width: 959px) {
170 .page {
171 width: auto;
172 margin: 0;
173 }
174 }
175 </style>
176 </head>
177 <body>
178 <div class="page">
179 <div class="demo" style="font-family: 'Butler'; font-weight: 200; font-style: normal;">
180 <h1>Butler UltraLight</h1>
181 <pre>.your-style {
182 font-family: 'Butler';
183 font-weight: 200;
184 font-style: normal;
185 }</pre>
186 <div class="font-container">
187 <p class="letters">
188 abcdefghijklmnopqrstuvwxyz<br>
189 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
190 0123456789.:,;()*!?'@#<>$%&^+-=~
191 </p>
192 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
193 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
194 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
195 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
196 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
197 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
198 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
199 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
200 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
201 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
202 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
203 </div>
204 </div>
205 <div class="demo" style="font-family: 'Butler'; font-weight: 500; font-style: normal;">
206 <h1>Butler Medium</h1>
207 <pre>.your-style {
208 font-family: 'Butler';
209 font-weight: 500;
210 font-style: normal;
211 }</pre>
212 <div class="font-container">
213 <p class="letters">
214 abcdefghijklmnopqrstuvwxyz<br>
215 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
216 0123456789.:,;()*!?'@#<>$%&^+-=~
217 </p>
218 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
219 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
220 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
221 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
222 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
223 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
224 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
225 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
226 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
227 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
228 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
229 </div>
230 </div>
231 <div class="demo" style="font-family: 'Butler'; font-weight: 300; font-style: normal;">
232 <h1>Butler Light</h1>
233 <pre>.your-style {
234 font-family: 'Butler';
235 font-weight: 300;
236 font-style: normal;
237 }</pre>
238 <div class="font-container">
239 <p class="letters">
240 abcdefghijklmnopqrstuvwxyz<br>
241 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
242 0123456789.:,;()*!?'@#<>$%&^+-=~
243 </p>
244 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
245 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
246 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
247 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
248 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
249 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
250 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
251 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
252 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
253 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
254 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
255 </div>
256 </div>
257 <div class="demo" style="font-family: 'Butler'; font-weight: 900; font-style: normal;">
258 <h1>Butler Black</h1>
259 <pre>.your-style {
260 font-family: 'Butler';
261 font-weight: 900;
262 font-style: normal;
263 }</pre>
264 <div class="font-container">
265 <p class="letters">
266 abcdefghijklmnopqrstuvwxyz<br>
267 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
268 0123456789.:,;()*!?'@#<>$%&^+-=~
269 </p>
270 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
271 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
272 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
273 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
274 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
275 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
276 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
277 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
278 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
279 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
280 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
281 </div>
282 </div>
283 <div class="demo" style="font-family: 'Butler'; font-weight: bold; font-style: normal;">
284 <h1>Butler Bold</h1>
285 <pre>.your-style {
286 font-family: 'Butler';
287 font-weight: bold;
288 font-style: normal;
289 }</pre>
290 <div class="font-container">
291 <p class="letters">
292 abcdefghijklmnopqrstuvwxyz<br>
293 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
294 0123456789.:,;()*!?'@#<>$%&^+-=~
295 </p>
296 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
297 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
298 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
299 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
300 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
301 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
302 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
303 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
304 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
305 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
306 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
307 </div>
308 </div>
309 <div class="demo" style="font-family: 'Butler'; font-weight: 800; font-style: normal;">
310 <h1>Butler ExtraBold</h1>
311 <pre>.your-style {
312 font-family: 'Butler';
313 font-weight: 800;
314 font-style: normal;
315 }</pre>
316 <div class="font-container">
317 <p class="letters">
318 abcdefghijklmnopqrstuvwxyz<br>
319 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
320 0123456789.:,;()*!?'@#<>$%&^+-=~
321 </p>
322 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
323 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
324 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
325 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
326 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
327 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
328 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
329 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
330 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
331 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
332 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
333 </div>
334 </div>
335 <div class="demo" style="font-family: 'Butler'; font-weight: normal; font-style: normal;">
336 <h1>Butler</h1>
337 <pre>.your-style {
338 font-family: 'Butler';
339 font-weight: normal;
340 font-style: normal;
341 }</pre>
342 <div class="font-container">
343 <p class="letters">
344 abcdefghijklmnopqrstuvwxyz<br>
345 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
346 0123456789.:,;()*!?'@#<>$%&^+-=~
347 </p>
348 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
349 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
350 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
351 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
352 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
353 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
354 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
355 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
356 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
357 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
358 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
359 </div>
360 </div>
361 </div>
362 </body>
363 </html>