demo.html (43908B)
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: 'Basis Grotesque Pro Mono'; font-weight: bold; font-style: italic;"> 180 <h1>Basis Grotesque Pro Mono Bold Italic</h1> 181 <pre>.your-style { 182 font-family: 'Basis Grotesque Pro Mono'; 183 font-weight: bold; 184 font-style: italic; 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: 'Basis Grotesque Pro'; font-weight: 300; font-style: normal;"> 206 <h1>Basis Grotesque Pro Light</h1> 207 <pre>.your-style { 208 font-family: 'Basis Grotesque Pro'; 209 font-weight: 300; 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: 'Basis Grotesque Pro'; font-weight: 500; font-style: italic;"> 232 <h1>Basis Grotesque Pro Medium Italic</h1> 233 <pre>.your-style { 234 font-family: 'Basis Grotesque Pro'; 235 font-weight: 500; 236 font-style: italic; 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: 'Basis Grotesque Pro Off White'; font-weight: normal; font-style: italic;"> 258 <h1>Basis Grotesque Pro Off White Italic</h1> 259 <pre>.your-style { 260 font-family: 'Basis Grotesque Pro Off White'; 261 font-weight: normal; 262 font-style: italic; 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: 'Basis Grotesque Pro'; font-weight: normal; font-style: italic;"> 284 <h1>Basis Grotesque Pro Italic</h1> 285 <pre>.your-style { 286 font-family: 'Basis Grotesque Pro'; 287 font-weight: normal; 288 font-style: italic; 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: 'Basis Grotesque Pro'; font-weight: 300; font-style: italic;"> 310 <h1>Basis Grotesque Pro Light Italic</h1> 311 <pre>.your-style { 312 font-family: 'Basis Grotesque Pro'; 313 font-weight: 300; 314 font-style: italic; 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: 'Basis Grotesque Pro Off White'; font-weight: normal; font-style: normal;"> 336 <h1>Basis Grotesque Pro Off White</h1> 337 <pre>.your-style { 338 font-family: 'Basis Grotesque Pro Off White'; 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 class="demo" style="font-family: 'Basis Grotesque Pro Mono'; font-weight: bold; font-style: normal;"> 362 <h1>Basis Grotesque Pro Mono Bold</h1> 363 <pre>.your-style { 364 font-family: 'Basis Grotesque Pro Mono'; 365 font-weight: bold; 366 font-style: normal; 367 }</pre> 368 <div class="font-container"> 369 <p class="letters"> 370 abcdefghijklmnopqrstuvwxyz<br> 371 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 372 0123456789.:,;()*!?'@#<>$%&^+-=~ 373 </p> 374 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 375 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 376 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 377 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 378 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 379 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 380 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 381 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 382 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 383 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 384 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 385 </div> 386 </div> 387 <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 900; font-style: italic;"> 388 <h1>Basis Grotesque Pro Black Italic</h1> 389 <pre>.your-style { 390 font-family: 'Basis Grotesque Pro'; 391 font-weight: 900; 392 font-style: italic; 393 }</pre> 394 <div class="font-container"> 395 <p class="letters"> 396 abcdefghijklmnopqrstuvwxyz<br> 397 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 398 0123456789.:,;()*!?'@#<>$%&^+-=~ 399 </p> 400 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 401 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 402 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 403 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 404 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 405 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 406 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 407 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 408 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 409 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 410 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 411 </div> 412 </div> 413 <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: bold; font-style: italic;"> 414 <h1>Basis Grotesque Pro Bold Italic</h1> 415 <pre>.your-style { 416 font-family: 'Basis Grotesque Pro'; 417 font-weight: bold; 418 font-style: italic; 419 }</pre> 420 <div class="font-container"> 421 <p class="letters"> 422 abcdefghijklmnopqrstuvwxyz<br> 423 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 424 0123456789.:,;()*!?'@#<>$%&^+-=~ 425 </p> 426 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 427 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 428 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 429 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 430 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 431 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 432 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 433 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 434 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 435 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 436 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 437 </div> 438 </div> 439 <div class="demo" style="font-family: 'Basis Grotesque Pro Mono'; font-weight: normal; font-style: italic;"> 440 <h1>Basis Grotesque Pro Mono Italic</h1> 441 <pre>.your-style { 442 font-family: 'Basis Grotesque Pro Mono'; 443 font-weight: normal; 444 font-style: italic; 445 }</pre> 446 <div class="font-container"> 447 <p class="letters"> 448 abcdefghijklmnopqrstuvwxyz<br> 449 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 450 0123456789.:,;()*!?'@#<>$%&^+-=~ 451 </p> 452 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 453 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 454 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 455 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 456 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 457 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 458 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 459 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 460 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 461 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 462 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 463 </div> 464 </div> 465 <div class="demo" style="font-family: 'Basis Grotesque Pro Mono'; font-weight: normal; font-style: normal;"> 466 <h1>Basis Grotesque Pro Mono</h1> 467 <pre>.your-style { 468 font-family: 'Basis Grotesque Pro Mono'; 469 font-weight: normal; 470 font-style: normal; 471 }</pre> 472 <div class="font-container"> 473 <p class="letters"> 474 abcdefghijklmnopqrstuvwxyz<br> 475 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 476 0123456789.:,;()*!?'@#<>$%&^+-=~ 477 </p> 478 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 479 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 480 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 481 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 482 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 483 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 484 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 485 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 486 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 487 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 488 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 489 </div> 490 </div> 491 <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 500; font-style: normal;"> 492 <h1>Basis Grotesque Pro Medium</h1> 493 <pre>.your-style { 494 font-family: 'Basis Grotesque Pro'; 495 font-weight: 500; 496 font-style: normal; 497 }</pre> 498 <div class="font-container"> 499 <p class="letters"> 500 abcdefghijklmnopqrstuvwxyz<br> 501 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 502 0123456789.:,;()*!?'@#<>$%&^+-=~ 503 </p> 504 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 505 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 506 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 507 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 508 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 509 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 510 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 511 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 512 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 513 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 514 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 515 </div> 516 </div> 517 <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: bold; font-style: normal;"> 518 <h1>Basis Grotesque Pro Bold</h1> 519 <pre>.your-style { 520 font-family: 'Basis Grotesque Pro'; 521 font-weight: bold; 522 font-style: normal; 523 }</pre> 524 <div class="font-container"> 525 <p class="letters"> 526 abcdefghijklmnopqrstuvwxyz<br> 527 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 528 0123456789.:,;()*!?'@#<>$%&^+-=~ 529 </p> 530 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 531 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 532 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 533 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 534 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 535 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 536 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 537 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 538 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 539 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 540 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 541 </div> 542 </div> 543 <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: normal; font-style: normal;"> 544 <h1>Basis Grotesque Pro</h1> 545 <pre>.your-style { 546 font-family: 'Basis Grotesque Pro'; 547 font-weight: normal; 548 font-style: normal; 549 }</pre> 550 <div class="font-container"> 551 <p class="letters"> 552 abcdefghijklmnopqrstuvwxyz<br> 553 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 554 0123456789.:,;()*!?'@#<>$%&^+-=~ 555 </p> 556 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 557 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 558 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 559 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 560 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 561 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 562 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 563 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 564 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 565 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 566 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 567 </div> 568 </div> 569 <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 900; font-style: normal;"> 570 <h1>Basis Grotesque Pro Black</h1> 571 <pre>.your-style { 572 font-family: 'Basis Grotesque Pro'; 573 font-weight: 900; 574 font-style: normal; 575 }</pre> 576 <div class="font-container"> 577 <p class="letters"> 578 abcdefghijklmnopqrstuvwxyz<br> 579 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 580 0123456789.:,;()*!?'@#<>$%&^+-=~ 581 </p> 582 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 583 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 584 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 585 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 586 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 587 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 588 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 589 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 590 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 591 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 592 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 593 </div> 594 </div> 595 <div class="demo" style="font-family: 'Archive Pro'; font-weight: 800; font-style: normal;"> 596 <h1>Archive Pro ExtraBold</h1> 597 <pre>.your-style { 598 font-family: 'Archive Pro'; 599 font-weight: 800; 600 font-style: normal; 601 }</pre> 602 <div class="font-container"> 603 <p class="letters"> 604 abcdefghijklmnopqrstuvwxyz<br> 605 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 606 0123456789.:,;()*!?'@#<>$%&^+-=~ 607 </p> 608 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 609 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 610 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 611 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 612 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 613 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 614 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 615 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 616 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 617 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 618 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 619 </div> 620 </div> 621 <div class="demo" style="font-family: 'Archive Pro'; font-weight: normal; font-style: normal;"> 622 <h1>Archive Pro</h1> 623 <pre>.your-style { 624 font-family: 'Archive Pro'; 625 font-weight: normal; 626 font-style: normal; 627 }</pre> 628 <div class="font-container"> 629 <p class="letters"> 630 abcdefghijklmnopqrstuvwxyz<br> 631 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 632 0123456789.:,;()*!?'@#<>$%&^+-=~ 633 </p> 634 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 635 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 636 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 637 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 638 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 639 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 640 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 641 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 642 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 643 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 644 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 645 </div> 646 </div> 647 <div class="demo" style="font-family: 'Archive Pro'; font-weight: normal; font-style: italic;"> 648 <h1>Archive Pro Italic</h1> 649 <pre>.your-style { 650 font-family: 'Archive Pro'; 651 font-weight: normal; 652 font-style: italic; 653 }</pre> 654 <div class="font-container"> 655 <p class="letters"> 656 abcdefghijklmnopqrstuvwxyz<br> 657 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 658 0123456789.:,;()*!?'@#<>$%&^+-=~ 659 </p> 660 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 661 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 662 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 663 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 664 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 665 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 666 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 667 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 668 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 669 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 670 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 671 </div> 672 </div> 673 <div class="demo" style="font-family: 'Archive Pro'; font-weight: 600; font-style: italic;"> 674 <h1>Archive Pro SemiBold Italic</h1> 675 <pre>.your-style { 676 font-family: 'Archive Pro'; 677 font-weight: 600; 678 font-style: italic; 679 }</pre> 680 <div class="font-container"> 681 <p class="letters"> 682 abcdefghijklmnopqrstuvwxyz<br> 683 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 684 0123456789.:,;()*!?'@#<>$%&^+-=~ 685 </p> 686 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 687 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 688 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 689 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 690 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 691 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 692 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 693 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 694 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 695 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 696 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 697 </div> 698 </div> 699 <div class="demo" style="font-family: 'Archive Pro'; font-weight: 800; font-style: italic;"> 700 <h1>Archive Pro ExtraBold Italic</h1> 701 <pre>.your-style { 702 font-family: 'Archive Pro'; 703 font-weight: 800; 704 font-style: italic; 705 }</pre> 706 <div class="font-container"> 707 <p class="letters"> 708 abcdefghijklmnopqrstuvwxyz<br> 709 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 710 0123456789.:,;()*!?'@#<>$%&^+-=~ 711 </p> 712 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 713 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 714 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 715 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 716 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 717 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 718 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 719 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 720 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 721 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 722 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 723 </div> 724 </div> 725 <div class="demo" style="font-family: 'Archive Pro'; font-weight: 600; font-style: normal;"> 726 <h1>Archive Pro SemiBold</h1> 727 <pre>.your-style { 728 font-family: 'Archive Pro'; 729 font-weight: 600; 730 font-style: normal; 731 }</pre> 732 <div class="font-container"> 733 <p class="letters"> 734 abcdefghijklmnopqrstuvwxyz<br> 735 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 736 0123456789.:,;()*!?'@#<>$%&^+-=~ 737 </p> 738 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 739 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 740 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 741 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 742 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 743 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 744 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 745 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 746 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 747 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 748 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 749 </div> 750 </div> 751 <div class="demo" style="font-family: 'Archive Pro'; font-weight: bold; font-style: normal;"> 752 <h1>Archive Pro Bold</h1> 753 <pre>.your-style { 754 font-family: 'Archive Pro'; 755 font-weight: bold; 756 font-style: normal; 757 }</pre> 758 <div class="font-container"> 759 <p class="letters"> 760 abcdefghijklmnopqrstuvwxyz<br> 761 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 762 0123456789.:,;()*!?'@#<>$%&^+-=~ 763 </p> 764 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 765 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 766 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 767 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 768 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 769 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 770 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 771 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 772 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 773 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 774 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 775 </div> 776 </div> 777 <div class="demo" style="font-family: 'Archive Pro'; font-weight: bold; font-style: italic;"> 778 <h1>Archive Pro Bold Italic</h1> 779 <pre>.your-style { 780 font-family: 'Archive Pro'; 781 font-weight: bold; 782 font-style: italic; 783 }</pre> 784 <div class="font-container"> 785 <p class="letters"> 786 abcdefghijklmnopqrstuvwxyz<br> 787 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 788 0123456789.:,;()*!?'@#<>$%&^+-=~ 789 </p> 790 <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> 791 <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> 792 <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> 793 <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> 794 <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> 795 <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> 796 <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> 797 <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> 798 <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> 799 <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> 800 <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> 801 </div> 802 </div> 803 </div> 804 </body> 805 </html>