├── README.md
├── curtis.css
├── grid.png
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Curtis CSS Typeface
 2 | 
 3 | Curtis is the name I’ve given for a family of geometric sans-serif fonts. Other incarnations exist as Fontstructions: [Curtis Heavy](http://fontstruct.fontshop.com/fontstructions/show/180805) and [Curtis Pixel 14](http://fontstruct.fontshop.com/fontstructions/show/curtis_pixel_14). This version takes form in CSS. All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning. You can get a better idea of how the letters were formed with the Inspect display option.
 4 | 
 5 | Each character is wrapped in a `<span>` and then depending on the complexity of that character, more empty `<span>` elements are added to the markup to render each shape. Here's the markup for R:
 6 | 
 7 | ``` html
 8 | <span class="css_char r">
 9 |   R
10 |   <span class="inside split_vert"></span>
11 |   <span class="outside split_vert"></span>
12 |   <span class="stroke"></span>
13 |   <span class="fill"></span>
14 | </span>
15 | ```
16 | 
17 | The Curtis CSS font wasn’t conceived of any practical application. I was more interested in seeing if it could be pulled off, and if so, what the final result would look like.
18 | 
19 | This design pattern is released under a [Creative Commons Attribution License](http://creativecommons.org/licenses/by/3.0/us/). You are free to share and remix this work.
20 | 


--------------------------------------------------------------------------------
/curtis.css:
--------------------------------------------------------------------------------
   1 | body {
   2 |   background: #EEE;
   3 |   font-family: sans-serif;
   4 |   line-height: 1.45;
   5 | }
   6 | 
   7 | p, ul {
   8 |   margin-top: 0;
   9 | }
  10 | 
  11 | #content {
  12 |   padding: 40px;
  13 |   
  14 | }
  15 | 
  16 | h1 {
  17 |   height: 60px;
  18 |   margin-bottom: 40px;
  19 | }
  20 | 
  21 | h1 .f + .a { margin-left: -12px; }
  22 | h1 .a + .c { margin-left: -10px; }
  23 | 
  24 | 
  25 | .gone { display: none;}
  26 | 
  27 | fieldset {
  28 |   clear: both;
  29 |   margin-bottom: 10px;
  30 |   border: 1px solid #CCC;
  31 |   padding: 4px 0 4px 20px;
  32 |   border-radius: 3px;
  33 |   -moz-border-radius: 3px;
  34 |   -webkit-border-radius: 3px;
  35 | }
  36 | 
  37 | legend {
  38 |   font-weight: bold;
  39 |   padding: 0 0.5em;
  40 | }
  41 | 
  42 | label {
  43 | }
  44 | 
  45 | #content fieldset ul { padding: 0; margin-bottom: 10px; }
  46 | 
  47 | #content fieldset li {
  48 |   display: inline;
  49 |   list-style: none;
  50 |   margin: 0 20px 0 0;
  51 | }	
  52 | 
  53 | #copy {
  54 |   width: 520px;
  55 |   margin-right: 60px;
  56 |   float: left;
  57 |   clear: both;
  58 | }
  59 | 
  60 | #options {
  61 |   width: 360px;
  62 |   float: left;
  63 | }
  64 | 
  65 | #options .curtis {
  66 |   height: 280px;
  67 | }
  68 | 
  69 | .curtis {
  70 |   clear: both;
  71 | }
  72 | 
  73 | #demo {margin-top: 20px;}
  74 | 
  75 | /********** defaults for all characters all font sizes **********/
  76 | 
  77 | 
  78 | .standard .css_char .fill { background: #000; }
  79 | .standard .css_char .neg { background: #EEE; }
  80 | .standard .css_char .stroke,
  81 | .standard .css_char .neg_stroke,
  82 | .standard .css_char .split_vert,
  83 | .standard .css_char .split_horiz,
  84 | .standard .css_char .split_horiz_pos,
  85 | .standard .css_char .split_horiz_neg { border: 0px solid; }
  86 | .standard .css_char .stroke { border-color: #000; }
  87 | .standard .css_char .split_vert { border-color: #000 transparent; }
  88 | .standard .css_char .split_horiz { border-color: #EEE transparent; }
  89 | .standard .css_char .split_horiz_pos { border-color: transparent #000; }
  90 | .standard .css_char .split_horiz_neg { border-color: transparent #EEE; }
  91 | 
  92 | 
  93 | .inspect { background: url(grid.png); }
  94 | 
  95 | .inspect * { background: hsla(0,100%,50%,.07); }
  96 | 
  97 | .inspect .css_char .fill { background: hsla(0,100%,50%,.4); }
  98 | .inspect .css_char .neg { background: hsla(240,50%,50%,.15); }
  99 | .inspect .css_char .stroke,
 100 | .inspect .css_char .neg_stroke,
 101 | .inspect .css_char .split_vert,
 102 | .inspect .css_char .split_horiz,
 103 | .inspect .css_char .split_horiz_pos,
 104 | .inspect .css_char .split_horiz_neg { border: 0px solid; }
 105 | .inspect .css_char .stroke { border-color: hsla(0,100%,50%,.4); }
 106 | .inspect .css_char .split_vert { border-color: hsla(0,100%,50%,.4) transparent; }
 107 | .inspect .css_char .split_horiz { border-color: hsla(240,50%,50%,.15) transparent; }
 108 | .inspect .css_char .split_horiz_pos { border-color: transparent hsla(0,100%,50%,.4); }
 109 | .inspect .css_char .split_horiz_neg { border-color: transparent hsla(240,50%,50%,.15); }
 110 | 
 111 | .css_char {
 112 |   position: relative;
 113 |   height: 140px;
 114 |   display: block;
 115 |   float: left;
 116 |   overflow: hidden;
 117 |   margin: 0 5px 20px 0;
 118 | }
 119 | .standard .css_char { text-indent: -9999px; }
 120 | .inspect .css_char { text-indent: 0; }
 121 | 
 122 | 
 123 | .css_char span {
 124 |   display: block;
 125 |   position: absolute;
 126 |   text-indent: -9999px;
 127 |   width: 0px;
 128 |   height: 0px;
 129 |   top: 0;
 130 |   left: 0;
 131 | }
 132 | 
 133 | .word { 
 134 |   display: block;
 135 |   float: left;
 136 | }
 137 | 
 138 | .curtis p {
 139 | 	clear: both;
 140 | }
 141 | 
 142 | 
 143 | /********** font size 280 **********/
 144 | 
 145 | 
 146 | .size280 .css_char {
 147 |   height: 280px;
 148 |   margin: 0 10px 40px 0;
 149 | }
 150 | 
 151 | 
 152 | .word { 
 153 |    padding-right: 40px;
 154 | }
 155 | 
 156 | 
 157 | /***** A *****/
 158 | 
 159 | .size280 .css_char.a {  width: 280px; }
 160 | 
 161 | .size280 .css_char.a .outside { border-width: 0 140px 280px; }
 162 | 
 163 | .size280 .css_char.a .inside {
 164 |   border-width: 0 60px 120px;
 165 |   top: 180px;
 166 |   left: 80px
 167 | }
 168 | 
 169 | .size280 .css_char.a .bar {
 170 |   width: 120px;
 171 |   height: 40px;
 172 |   top: 220px;
 173 |   left: 80px;
 174 | }
 175 | 
 176 | /**** B *****/
 177 | 
 178 | .size280 .css_char.b { width: 200px; }
 179 | 
 180 | .size280 .css_char.b .top.fill,
 181 | .size280 .css_char.b .bottom.fill {
 182 |   width: 200px;
 183 |   height: 180px;
 184 |   border-width: 0px;
 185 |   border-top-right-radius: 90px;
 186 |   border-bottom-right-radius: 90px;
 187 |   -moz-border-radius-topright: 90px;
 188 |   -moz-border-radius-bottomright: 90px;
 189 |   -webkit-border-top-right-radius: 90px;
 190 |   -webkit-border-bottom-right-radius: 90px;
 191 | }
 192 | .size280 .css_char.b .bottom.fill { top: 100px; }
 193 | 
 194 | .size280 .css_char.b .top.neg,
 195 | .size280 .css_char.b .bottom.neg {
 196 |   width: 40px;
 197 |   height: 30px;
 198 |   left: 80px;
 199 |   border-top-right-radius: 15px;
 200 |   border-bottom-right-radius: 15px;
 201 |   -moz-border-radius-topright: 15px;
 202 |   -moz-border-radius-bottomright: 15px;
 203 |   -webkit-border-top-right-radius: 15px;
 204 |   -webkit-border-bottom-right-radius: 15px;
 205 | }
 206 | .size280 .css_char.b .top.neg { top: 80px; }
 207 | .size280 .css_char.b .bottom.neg { top: 170px; }
 208 | 
 209 | 
 210 | /***** C, D, G, O & Q *****/
 211 | 
 212 | .size280 .css_char.c,
 213 | .size280 .css_char.o,
 214 | .size280 .css_char.d,
 215 | .size280 .css_char.g,
 216 | .size280 .css_char.q {  width: 280px; }
 217 | 
 218 | .size280 .css_char.c .stroke,
 219 | .size280 .css_char.o .stroke,
 220 | .size280 .css_char.d .stroke,
 221 | .size280 .css_char.g .outside,
 222 | .size280 .css_char.q .stroke {
 223 |   width: 120px;
 224 |   height: 120px;
 225 |   border-width: 80px;
 226 |   border-radius: 140px;
 227 |   -moz-border-radius: 140px;
 228 |   -webkit-border-radius: 140px;
 229 | }
 230 | 
 231 | .size280 .css_char.d .stroke {
 232 |   border-top-left-radius: 0px;
 233 |   border-bottom-left-radius: 0px;
 234 |   -moz-border-radius-topleft: 0px;
 235 |   -moz-border-radius-bottomleft: 0px;
 236 |   -webkit-border-top-left-radius: 0px;
 237 |   -webkit-border-bottom-left-radius: 0px;
 238 | }
 239 | 
 240 | .size280 .css_char.c .neg,
 241 | .size280 .css_char.g .neg {
 242 |   width: 140px;
 243 |   height: 40px;
 244 |   top: 120px;
 245 |   left: 140px;
 246 | }
 247 | 
 248 | 
 249 | 
 250 | .size280 .css_char.g .spur {
 251 |   width: 40px;
 252 |   border-width: 120px 0 0 60px;
 253 |   top: 160px;
 254 |   left: 180px;
 255 | }
 256 | 
 257 | .size280 .css_char.q .cross_left,
 258 | .size280 .css_char.q .cross_right {
 259 |   width: 0px;
 260 |   top: 160px;
 261 | }
 262 | .size280 .css_char.q .cross_left {
 263 |   border-width: 120px 0 0 60px;
 264 |   left: 140px;
 265 | }
 266 | 
 267 | .size280 .css_char.q .cross_right {
 268 |   border-width: 0 60px 120px 0;
 269 |   left: 200px;
 270 | }
 271 | 
 272 | /***** E & F *****/
 273 | 
 274 | .size280 .css_char.e, .size280 .css_char.f { width: 200px; }
 275 | 
 276 | .size280 .css_char.e .stroke {
 277 |   height: 120px;
 278 |   width: 120px;
 279 |   border-width: 80px 0 80px 80px;
 280 | }
 281 | 
 282 | .size280 .css_char.f .stroke {
 283 |   height: 200px;
 284 |   width: 120px;
 285 |   border-width: 80px 0 0 80px;
 286 | }
 287 | 
 288 | .size280 .css_char.e .fill,
 289 | .size280 .css_char.f .fill {
 290 |   height: 60px;
 291 |   width: 120px;
 292 |   top: 110px;
 293 |   left: 60px;
 294 | }
 295 | 
 296 | 
 297 | 
 298 | .size280 .css_char.v .inside,
 299 | .size280 .css_char.w .inside_left { left: 80px; }
 300 | 
 301 | .size280 .css_char.w .inside_right { left: 180px; }
 302 | 
 303 | 
 304 | /***** H *****/
 305 | 
 306 | .size280 .css_char.h { width: 200px; }
 307 | 
 308 | .size280 .css_char.h .top,
 309 | .size280 .css_char.h .bottom {
 310 |   width: 40px;
 311 |   height: 110px;
 312 | }
 313 | .size280 .css_char.h .top { border-width: 0 80px 40px; }
 314 | .size280 .css_char.h .bottom {
 315 |   border-width: 40px 80px 0;
 316 |   top: 130px;
 317 | }
 318 | 
 319 | /***** I *****/
 320 | 
 321 | .size280 .css_char.i { width: 80px; }
 322 | 
 323 | .size280 .css_char.i .fill {
 324 |   width: 80px;
 325 |   height: 280px;
 326 | }
 327 | 
 328 | /***** U & J *****/
 329 | 
 330 | .size280 .css_char.u,
 331 | .size280 .css_char.j { width: 220px; }
 332 | 
 333 | .size280 .css_char.u .stroke,
 334 | .size280 .css_char.j .stroke {
 335 |   width: 60px;
 336 |   height: 200px;
 337 |   border-width: 0 80px 80px;
 338 |   border-bottom-left-radius: 110px;
 339 |   border-bottom-right-radius: 110px;
 340 |   -moz-border-radius-bottomleft: 110px;
 341 |   -moz-border-radius-bottomright: 110px;
 342 |   -webkit-border-bottom-left-radius: 110px;
 343 |   -webkit-border-bottom-right-radius: 110px;
 344 | }
 345 | 
 346 | .size280 .css_char.j .neg {
 347 |   width: 120px;
 348 |   height: 160px;
 349 |   left: -20px;
 350 | }
 351 | 
 352 | /***** K *****/
 353 | 
 354 | .size280 .css_char.k { width: 220px; }
 355 | 
 356 | .size280 .css_char.k .split_vert {
 357 |   width: 150px;
 358 |   border-width: 140px 70px 140px 0;
 359 | }
 360 | 
 361 | .size280 .css_char.k .split_horiz {
 362 |   height: 80px;
 363 |   border-width: 120px 60px 120px 0;
 364 |   left: 80px;
 365 |   top: -20px;
 366 | }
 367 | 
 368 | /***** L *****/
 369 | 
 370 | .size280 .css_char.l { width: 200px; }
 371 | 
 372 | .size280 .css_char.l .stroke {
 373 |   width: 120px;
 374 |   height: 200px;
 375 |   border-width: 0 0 80px 80px;
 376 | }
 377 | 
 378 | 
 379 | 
 380 | /***** M *****/
 381 | 
 382 | .size280 .css_char.m { width: 280px; }
 383 | 
 384 | .size280 .css_char.m .split_horiz_pos {
 385 |   height: 160px;
 386 |   border-width: 140px 140px 0;
 387 | }
 388 | 
 389 | .size280 .css_char.m .split_horiz_neg {
 390 |   height: 40px;
 391 |   border-width: 60px 60px 0;
 392 |   top: 190px;
 393 |   left: 80px;
 394 | }
 395 | 
 396 | /***** N *****/
 397 | 
 398 | .size280 .css_char.n { width: 240px; }
 399 | 
 400 | .size280 .css_char.n .top_corner {
 401 |   border-width: 0 200px 150px 0;
 402 |   top: -30px;
 403 |   left: -40px;
 404 | }
 405 | 
 406 | .size280 .css_char.n .bottom_corner {
 407 |   border-width: 150px 0 0 200px;
 408 |   top: 160px;
 409 |   left: 80px;
 410 | }
 411 | 
 412 | .size280 .css_char.n .fill {
 413 |   width: 240px;
 414 |   height: 280px; 
 415 | }
 416 | 
 417 | .size280 .css_char.n .left_leg { top: 120px; }
 418 | .size280 .css_char.n .right_leg { left: 160px; }
 419 |   
 420 |   
 421 | /***** R  & P *****/
 422 | 
 423 | .size280 .css_char.r { width: 210px; }
 424 | .size280 .css_char.p { width: 200px; }
 425 | 
 426 | .size280 .css_char.r .inside {
 427 |   width: 20px;
 428 |   border-width: 120px 0 0 60px;
 429 |   top: 160px;
 430 |   left:  60px;
 431 | }
 432 | 
 433 | .size280 .css_char.r .outside {
 434 |   width: 20px;
 435 |   border-width: 0 60px 120px 0px;
 436 |   top: 160px;
 437 |   left: 130px;
 438 | }
 439 | 
 440 | .size280 .css_char.r .stroke,
 441 | .size280 .css_char.p .stroke {
 442 |   width: 80px;
 443 |   height: 40px;
 444 |   border-width: 80px 80px 80px 0;
 445 |   left: 40px;
 446 |   border-top-right-radius: 100px;
 447 |   border-bottom-right-radius: 100px;
 448 |   -moz-border-radius-topright: 100px;
 449 |   -moz-border-radius-bottomright: 100px;
 450 |   -webkit-border-top-right-radius: 100px;
 451 |   -webkit-border-bottom-right-radius: 100px;
 452 | }
 453 | 
 454 | .size280 .css_char.r .fill,
 455 | .size280 .css_char.p .fill {
 456 |   width: 80px;
 457 |   height: 280px;
 458 | }
 459 | 
 460 | /***** S & some of ? *****/
 461 | 
 462 | .size280 .css_char.s,
 463 | .size280 .css_char.question {
 464 |   width: 180px;
 465 | }
 466 | 
 467 | .size280 .css_char.s .top_circle,
 468 | .size280 .css_char.s .bottom_circle,
 469 | .size280 .css_char.s .right .stroke,
 470 | .size280 .css_char.question .stroke {
 471 |   width: 20px;
 472 |   height: 20px;
 473 |   border-width: 80px;
 474 |   border-radius: 90px;
 475 |   -moz-border-radius: 90px;
 476 |   -webkit-border-radius: 90px;
 477 | }
 478 | .size280 .css_char.s .top_circle { top: 0px; }
 479 | .size280 .css_char.s .bottom_circle { top: 100px; }
 480 | 
 481 | .size280 .css_char.s .left.neg,
 482 | .size280 .css_char.s .right.neg,
 483 | .size280 .css_char.question .neg {
 484 |   width: 90px;
 485 |   height: 100px;
 486 |   top: 90px;
 487 | }
 488 | .size280 .css_char.s .right.neg { 
 489 |   left: 90px;
 490 |   overflow: hidden;
 491 | }
 492 | .size280 .css_char.s .right .stroke {
 493 |   top: 10px;
 494 |   left: -90px;
 495 | }
 496 | 
 497 | /***** T *****/
 498 | 
 499 | .size280 .css_char.t { width: 200px; }
 500 | 
 501 | .size280 .css_char.t .cross {
 502 |   width: 200px;
 503 |   height: 80px;
 504 | }
 505 | 
 506 | .size280 .css_char.t .stem {
 507 |   width: 80px;
 508 |   height: 240px;
 509 |   left: 60px;
 510 |   top: 40px;
 511 | }
 512 | 
 513 | /***** V & W *****/
 514 | 
 515 | .size280 .css_char.v {  width: 280px; }
 516 | 
 517 | .size280 .css_char.w {  width: 380px; }
 518 | 
 519 | .size280 .css_char.v .outside,
 520 | .size280 .css_char.w .outside_left,
 521 | .size280 .css_char.w .outside_right { border-width: 280px 140px 0px; }
 522 | 
 523 | .size280 .css_char.w .outside_right { left: 100px; }
 524 | 
 525 | .size280 .css_char.v .inside,
 526 | .size280 .css_char.w .inside_left,
 527 | .size280 .css_char.w .inside_right { 
 528 |   border-width: 120px 60px 0; 
 529 |   top: -20px;
 530 | }
 531 | 
 532 | /***** X *****/
 533 | 
 534 | .size280 .css_char.x { width: 260px; }
 535 | 
 536 | .size280 .css_char.x .outside {
 537 |   width: 100px;
 538 |   border-width: 140px 80px;
 539 | }
 540 | 
 541 | .size280 .css_char.x .inside {
 542 |   height: 160px;
 543 |   border-width: 80px 40px;
 544 |   left: 90px;
 545 |   top: -20px;
 546 | }
 547 | 
 548 | 
 549 | 
 550 | /***** Y *****/
 551 | 
 552 | .size280 .css_char.y {  width: 260px; }
 553 | 
 554 | .size280 .css_char.y .outside { border-width: 260px 130px 0px; }
 555 | 
 556 | .size280 .css_char.y .inside { 
 557 |   border-width: 100px 50px 0; 
 558 |   top: -20px;
 559 |   left: 80px;
 560 | }
 561 | 
 562 | .size280 .css_char.y .fill {
 563 |   width: 80px;
 564 |   height: 120px;
 565 |   left: 90px;
 566 |   top: 160px;
 567 | }
 568 | 
 569 | 
 570 | 
 571 | /***** Z *****/
 572 | 
 573 | .size280 .css_char.z { width: 240px; }
 574 | 
 575 | .size280 .css_char.z .fill {
 576 |   width: 240px;
 577 |   height: 280px;
 578 | }
 579 | 
 580 | .size280 .css_char.z .left {
 581 |   border-width: 240px 120px 0 0;
 582 |   top: 80px;
 583 |   left: -20px;
 584 | }
 585 | .size280 .css_char.z .right {
 586 |   border-width: 0 0px 240px 120px;
 587 |   top: -40px;
 588 |   left: 140px;
 589 | }
 590 | 
 591 | /***** ., !, & ? *****/
 592 | 
 593 | .size280 .css_char.period,
 594 | .size280 .css_char.exclam { width: 80px; }
 595 | 
 596 | .size280 .css_char.period .dot,
 597 | .size280 .css_char.exclam .dot,
 598 | .size280 .css_char.question .dot {
 599 |   width: 80px;
 600 |   height: 80px;
 601 |   top: 200px;
 602 |   border-radius: 40px;
 603 |   -moz-border-radius: 40px;
 604 |   -webkit-border-radius: 40px;
 605 | }
 606 | .size280 .css_char.question .dot { left: 50px;}
 607 | 
 608 | .size280 .css_char.exclam .line {
 609 |   width: 80px;
 610 |   height: 190px;
 611 | }
 612 | 
 613 | .size280 .css_char.question .line {
 614 |   width: 80px;
 615 |   height: 90px;
 616 |   left: 50px;
 617 |   top: 100px;
 618 | }
 619 | 
 620 | 
 621 | /********** font size 140 **********/
 622 | 
 623 | 
 624 | .size140 .css_char {
 625 |   height: 140px;
 626 |   margin: 0 10px 20px 0;
 627 | }
 628 | 
 629 | 
 630 | .word { 
 631 |    padding-right: 40px;
 632 | }
 633 | 
 634 | 
 635 | /***** A *****/
 636 | 
 637 | .size140 .css_char.a {  width: 140px; }
 638 | 
 639 | .size140 .css_char.a .outside { border-width: 0 70px 140px; }
 640 | 
 641 | .size140 .css_char.a .inside {
 642 |   border-width: 0 30px 60px;
 643 |   top: 90px;
 644 |   left: 40px
 645 | }
 646 | 
 647 | .size140 .css_char.a .bar {
 648 |   width: 60px;
 649 |   height: 20px;
 650 |   top: 110px;
 651 |   left: 40px;
 652 | }
 653 | 
 654 | /**** B *****/
 655 | 
 656 | .size140 .css_char.b { width: 100px; }
 657 | 
 658 | .size140 .css_char.b .top.fill,
 659 | .size140 .css_char.b .bottom.fill {
 660 |   width: 100px;
 661 |   height: 90px;
 662 |   border-top-right-radius: 45px;
 663 |   border-bottom-right-radius: 45px;
 664 |   -moz-border-radius-topright: 45px;
 665 |   -moz-border-radius-bottomright: 45px;
 666 |   -webkit-border-top-right-radius: 45px;
 667 |   -webkit-border-bottom-right-radius: 45px;
 668 | }
 669 | .size140 .css_char.b .bottom.fill { top: 50px; }
 670 | 
 671 | .size140 .css_char.b .top.neg,
 672 | .size140 .css_char.b .bottom.neg {
 673 |   width: 20px;
 674 |   height: 15px;
 675 |   left: 40px;
 676 |   border-top-right-radius: 7px;
 677 |   border-bottom-right-radius: 7px;
 678 |   -moz-border-radius-topright: 7px;
 679 |   -moz-border-radius-bottomright: 7px;
 680 |   -webkit-border-top-right-radius: 7px;
 681 |   -webkit-border-bottom-right-radius: 7px;
 682 | }
 683 | .size140 .css_char.b .top.neg { top: 40px; }
 684 | .size140 .css_char.b .bottom.neg { top: 85px; }
 685 | 
 686 | 
 687 | /***** C, D, G, O & Q *****/
 688 | 
 689 | .size140 .css_char.c,
 690 | .size140 .css_char.o,
 691 | .size140 .css_char.d,
 692 | .size140 .css_char.g,
 693 | .size140 .css_char.q {  width: 140px; }
 694 | 
 695 | .size140 .css_char.c .stroke,
 696 | .size140 .css_char.o .stroke,
 697 | .size140 .css_char.d .stroke,
 698 | .size140 .css_char.g .outside,
 699 | .size140 .css_char.q .stroke {
 700 |   width: 60px;
 701 |   height: 60px;
 702 |   border-width: 40px;
 703 |   border-radius: 70px;
 704 |   -moz-border-radius: 70px;
 705 |   -webkit-border-radius: 70px;
 706 | }
 707 | 
 708 | .size140 .css_char.d .stroke {
 709 |   border-top-left-radius: 0px;
 710 |   border-bottom-left-radius: 0px;
 711 |   -moz-border-radius-topleft: 0px;
 712 |   -moz-border-radius-bottomleft: 0px;
 713 |   -webkit-border-top-left-radius: 0px;
 714 |   -webkit-border-bottom-left-radius: 0px;
 715 | }
 716 | 
 717 | .size140 .css_char.c .neg,
 718 | .size140 .css_char.g .neg {
 719 |   width: 70px;
 720 |   height: 20px;
 721 |   top: 60px;
 722 |   left: 70px;
 723 | }
 724 | 
 725 | .size140 .css_char.g .spur {
 726 |   width: 20px;
 727 |   border-width: 60px 0 0 30px;
 728 |   top: 80px;
 729 |   left: 90px;
 730 | }
 731 | 
 732 | .size140 .css_char.q .cross_left,
 733 | .size140 .css_char.q .cross_right {
 734 |   width: 0px;
 735 |   top: 80px;
 736 | }
 737 | .size140 .css_char.q .cross_left {
 738 |   border-width: 60px 0 0 30px;
 739 |   left: 70px;
 740 | }
 741 | 
 742 | .size140 .css_char.q .cross_right {
 743 |   border-width: 0 30px 60px 0;
 744 |   left: 100px;
 745 | }
 746 | 
 747 | /***** E & F *****/
 748 | 
 749 | .size140 .css_char.e, .size140 .css_char.f { width: 100px; }
 750 | 
 751 | .size140 .css_char.e .stroke {
 752 |   height: 60px;
 753 |   width: 60px;
 754 |   border-width: 40px 0 40px 40px;
 755 | }
 756 | 
 757 | .size140 .css_char.f .stroke {
 758 |   height: 100px;
 759 |   width: 60px;
 760 |   border-width: 40px 0 0 40px;
 761 | }
 762 | 
 763 | .size140 .css_char.e .fill,
 764 | .size140 .css_char.f .fill {
 765 |   height: 30px;
 766 |   width: 60px;
 767 |   top: 55px;
 768 |   left: 30px;
 769 | }
 770 | 
 771 | .size140 .css_char.v .inside,
 772 | .size140 .css_char.w .inside_left { left: 40px; }
 773 | 
 774 | .size140 .css_char.w .inside_right { left: 90px; }
 775 | 
 776 | 
 777 | /***** H *****/
 778 | 
 779 | .size140 .css_char.h { width: 100px; }
 780 | 
 781 | .size140 .css_char.h .top,
 782 | .size140 .css_char.h .bottom {
 783 |   width: 20px;
 784 |   height: 55px;
 785 | }
 786 | .size140 .css_char.h .top { border-width: 0 40px 20px; }
 787 | .size140 .css_char.h .bottom {
 788 |   border-width: 20px 40px 0;
 789 |   top: 65px;
 790 | }
 791 | 
 792 | /***** I *****/
 793 | 
 794 | .size140 .css_char.i { width: 40px; }
 795 | 
 796 | .size140 .css_char.i .fill {
 797 |   width: 40px;
 798 |   height: 140px;
 799 | }
 800 | 
 801 | /***** U & J *****/
 802 | 
 803 | .size140 .css_char.u,
 804 | .size140 .css_char.j { width: 110px; }
 805 | 
 806 | .size140 .css_char.u .stroke,
 807 | .size140 .css_char.j .stroke {
 808 |   width: 30px;
 809 |   height: 100px;
 810 |   border-width: 0 40px 40px;
 811 |   border-bottom-left-radius: 55px;
 812 |   border-bottom-right-radius: 55px;
 813 |   -moz-border-radius-bottomleft: 55px;
 814 |   -moz-border-radius-bottomright: 55px;
 815 |   -webkit-border-bottom-left-radius: 55px;
 816 |   -webkit-border-bottom-right-radius: 55px;
 817 | }
 818 | 
 819 | .size140 .css_char.j .neg {
 820 |   width: 60px;
 821 |   height: 80px;
 822 |   left: -10px;
 823 | }
 824 | 
 825 | /***** K *****/
 826 | 
 827 | .size140 .css_char.k { width: 110px; }
 828 | 
 829 | .size140 .css_char.k .split_vert {
 830 |   width: 75px;
 831 |   border-width: 70px 35px 70px 0;
 832 | }
 833 | 
 834 | .size140 .css_char.k .split_horiz {
 835 |   height: 40px;
 836 |   border-width: 60px 30px 60px 0;
 837 |   left: 40px;
 838 |   top: -10px;
 839 | }
 840 | 
 841 | /***** L *****/
 842 | 
 843 | .size140 .css_char.l { width: 100px; }
 844 | 
 845 | .size140 .css_char.l .stroke {
 846 |   width: 60px;
 847 |   height: 100px;
 848 |   border-width: 0 0 40px 40px;
 849 | }
 850 | 
 851 | 
 852 | /***** M *****/
 853 | 
 854 | .size140 .css_char.m { width: 140px; }
 855 | 
 856 | .size140 .css_char.m .split_horiz_pos {
 857 |   height: 80px;
 858 |   border-width: 70px 70px 0;
 859 | }
 860 | 
 861 | .size140 .css_char.m .split_horiz_neg {
 862 |   height: 20px;
 863 |   border-width: 30px 30px 0;
 864 |   top: 95px;
 865 |   left: 40px;
 866 | }
 867 | 
 868 | /***** N *****/
 869 | 
 870 | .size140 .css_char.n { width: 120px; }
 871 | 
 872 | .size140 .css_char.n .top_corner {
 873 |   border-width: 0 100px 75px 0;
 874 |   top: -15px;
 875 |   left: -20px;
 876 | }
 877 | 
 878 | .size140 .css_char.n .bottom_corner {
 879 |   border-width: 75px 0 0 100px;
 880 |   top: 80px;
 881 |   left: 40px;
 882 | }
 883 | 
 884 | .size140 .css_char.n .fill {
 885 |   width: 120px;
 886 |   height: 140px; 
 887 | }
 888 | 
 889 | /***** R  & P *****/
 890 | 
 891 | .size140 .css_char.r { width: 105px; }
 892 | .size140 .css_char.p { width: 100px; }
 893 | 
 894 | .size140 .css_char.r .inside {
 895 |   width: 10px;
 896 |   border-width: 60px 0 0 30px;
 897 |   top: 80px;
 898 |   left:  30px;
 899 | }
 900 | 
 901 | .size140 .css_char.r .outside {
 902 |   width: 10px;
 903 |   border-width: 0 30px 60px 0;
 904 |   top: 80px;
 905 |   left: 65px;
 906 | }
 907 | 
 908 | .size140 .css_char.r .stroke,
 909 | .size140 .css_char.p .stroke {
 910 |   width: 40px;
 911 |   height: 20px;
 912 |   border-width: 40px 40px 40px 0;
 913 |   left: 20px;
 914 |   border-top-right-radius: 50px;
 915 |   border-bottom-right-radius: 50px;
 916 |   -moz-border-radius-topright: 50px;
 917 |   -moz-border-radius-bottomright: 50px;
 918 |   -webkit-border-top-right-radius: 50px;
 919 |   -webkit-border-bottom-right-radius: 50px;
 920 | }
 921 | 
 922 | .size140 .css_char.r .fill,
 923 | .size140 .css_char.p .fill {
 924 |   width: 40px;
 925 |   height: 140px;
 926 | }
 927 | 
 928 | /***** S & some of ? *****/
 929 | 
 930 | .size140 .css_char.s,
 931 | .size140 .css_char.question {
 932 |   width: 90px;
 933 | }
 934 | 
 935 | .size140 .css_char.s .top_circle,
 936 | .size140 .css_char.s .bottom_circle,
 937 | .size140 .css_char.s .right .stroke,
 938 | .size140 .css_char.question .stroke {
 939 |   width: 10px;
 940 |   height: 10px;
 941 |   border-width: 40px;
 942 |   border-radius: 45px;
 943 |   -moz-border-radius: 45px;
 944 |   -webkit-border-radius: 45px;
 945 | }
 946 | .size140 .css_char.s .bottom_circle { top: 50px; }
 947 | 
 948 | .size140 .css_char.s .left.neg,
 949 | .size140 .css_char.s .right.neg,
 950 | .size140 .css_char.question .neg {
 951 |   width: 45px;
 952 |   height: 50px;
 953 |   top: 45px;
 954 | }
 955 | .size140 .css_char.s .right.neg { 
 956 |   left: 45px;
 957 |   overflow: hidden;
 958 | }
 959 | .size140 .css_char.s .right .stroke {
 960 |   top: 5px;
 961 |   left: -45px;
 962 | }
 963 | 
 964 | /***** T *****/
 965 | 
 966 | .size140 .css_char.t { width: 100px; }
 967 | 
 968 | .size140 .css_char.t .cross {
 969 |   width: 100px;
 970 |   height: 40px;
 971 | }
 972 | 
 973 | .size140 .css_char.t .stem {
 974 |   width: 40px;
 975 |   height: 120px;
 976 |   left: 30px;
 977 |   top: 20px;
 978 | }
 979 | 
 980 | /***** V & W *****/
 981 | 
 982 | .size140 .css_char.v {  width: 140px; }
 983 | 
 984 | .size140 .css_char.w {  width: 190px; }
 985 | 
 986 | .size140 .css_char.v .outside,
 987 | .size140 .css_char.w .outside_left,
 988 | .size140 .css_char.w .outside_right { border-width: 140px 70px 0; }
 989 | 
 990 | .size140 .css_char.w .outside_right { left: 50px; }
 991 | 
 992 | .size140 .css_char.v .inside,
 993 | .size140 .css_char.w .inside_left,
 994 | .size140 .css_char.w .inside_right { 
 995 |   border-width: 60px 30px 0; 
 996 |   top: -10px;
 997 | }
 998 | 
 999 | /***** X *****/
1000 | 
1001 | .size140 .css_char.x { width: 130px; }
1002 | 
1003 | .size140 .css_char.x .outside {
1004 |   width: 50px;
1005 |   border-width: 70px 40px;
1006 | }
1007 | 
1008 | .size140 .css_char.x .inside {
1009 |   height: 80px;
1010 |   border-width: 40px 20px;
1011 |   left: 45px;
1012 |   top: -10px;
1013 | }
1014 | 
1015 | 
1016 | 
1017 | /***** Y *****/
1018 | 
1019 | .size140 .css_char.y {  width: 130px; }
1020 | 
1021 | .size140 .css_char.y .outside { border-width: 130px 65px 0; }
1022 | 
1023 | .size140 .css_char.y .inside { 
1024 |   border-width: 50px 25px 0; 
1025 |   top: -10px;
1026 |   left: 40px;
1027 | }
1028 | 
1029 | .size140 .css_char.y .fill {
1030 |   width: 40px;
1031 |   height: 60px;
1032 |   left: 45px;
1033 |   top: 80px;
1034 | }
1035 | 
1036 | 
1037 | 
1038 | /***** Z *****/
1039 | 
1040 | .size140 .css_char.z { width: 120px; }
1041 | 
1042 | .size140 .css_char.z .fill {
1043 |   width: 120px;
1044 |   height: 140px;
1045 | }
1046 | 
1047 | .size140 .css_char.z .left {
1048 |   border-width: 120px 60px 0 0;
1049 |   top: 40px;
1050 |   left: -10px;
1051 | }
1052 | .size140 .css_char.z .right {
1053 |   border-width: 0 0 120px 60px;
1054 |   top: -20px;
1055 |   left: 70px;
1056 | }
1057 | 
1058 | /***** ., !, & ? *****/
1059 | 
1060 | .size140 .css_char.period,
1061 | .size140 .css_char.exclam { width: 40px; }
1062 | 
1063 | .size140 .css_char.period .dot,
1064 | .size140 .css_char.exclam .dot,
1065 | .size140 .css_char.question .dot {
1066 |   width: 40px;
1067 |   height: 40px;
1068 |   top: 100px;
1069 |   border-radius: 20px;
1070 |   -moz-border-radius: 20px;
1071 |   -webkit-border-radius: 20px;
1072 | }
1073 | .size140 .css_char.question .dot { left: 25px;}
1074 | 
1075 | .size140 .css_char.exclam .line {
1076 |   width: 40px;
1077 |   height: 95px;
1078 | }
1079 | 
1080 | .size140 .css_char.question .line {
1081 |   width: 40px;
1082 |   height: 45px;
1083 |   left: 25px;
1084 |   top: 50px;
1085 | }
1086 | 
1087 | /*************** font size 56 ***************/
1088 | 
1089 | .size56 .css_char {
1090 |   height: 56px;
1091 |   margin: 0 4px 8px 0;
1092 | }
1093 | 
1094 | 
1095 | 
1096 | .size56 .word { 
1097 |   padding-right: 28px;
1098 |   }
1099 | 
1100 | /***** A *****/
1101 | 
1102 | .size56 .css_char.a {  width: 56px; }
1103 | 
1104 | .size56 .css_char.a .outside { border-width: 0 28px 56px; }
1105 | 
1106 | .size56 .css_char.a .inside {
1107 |   border-width: 0 12px 24px;
1108 |   top: 36px;
1109 |   left: 16px
1110 | }
1111 | 
1112 | .size56 .css_char.a .bar {
1113 |   width: 24px;
1114 |   height: 8px;
1115 |   top: 44px;
1116 |   left: 16px;
1117 | }
1118 | 
1119 | /**** B *****/
1120 | 
1121 | .size56 .css_char.b { width: 40px; }
1122 | 
1123 | .size56 .css_char.b .top.fill,
1124 | .size56 .css_char.b .bottom.fill {
1125 |   width: 40px;
1126 |   height: 36px;
1127 |   border-width: 0px;
1128 |   border-top-right-radius: 18px;
1129 |   border-bottom-right-radius: 18px;
1130 |   -moz-border-radius-topright: 18px;
1131 |   -moz-border-radius-bottomright: 18px;
1132 |   -webkit-border-top-right-radius: 18px;
1133 |   -webkit-border-bottom-right-radius: 18px;
1134 | }
1135 | .size56 .css_char.b .bottom.fill { top: 20px; }
1136 | 
1137 | .size56 .css_char.b .top.neg,
1138 | .size56 .css_char.b .bottom.neg {
1139 |   width: 8px;
1140 |   height: 6px;
1141 |   left: 16px;
1142 |   border-top-right-radius: 2px;
1143 |   border-bottom-right-radius: 2px;
1144 |   -moz-border-radius-topright: 2px;
1145 |   -moz-border-radius-bottomright: 2px;
1146 |   -webkit-border-top-right-radius: 2px;
1147 |   -webkit-border-bottom-right-radius: 2px;
1148 | }
1149 | .size56 .css_char.b .top.neg { top: 16px; }
1150 | .size56 .css_char.b .bottom.neg { top: 34px; }
1151 | 
1152 | 
1153 | /***** C, D, G, O & Q *****/
1154 | 
1155 | .size56 .css_char.c,
1156 | .size56 .css_char.o,
1157 | .size56 .css_char.d,
1158 | .size56 .css_char.g,
1159 | .size56 .css_char.q {  width: 56px; }
1160 | 
1161 | .size56 .css_char.c .stroke,
1162 | .size56 .css_char.o .stroke,
1163 | .size56 .css_char.d .stroke,
1164 | .size56 .css_char.g .outside,
1165 | .size56 .css_char.q .stroke {
1166 |   width: 24px;
1167 |   height: 24px;
1168 |   border-width: 16px;
1169 |   border-radius: 28px;
1170 |   -moz-border-radius: 28px;
1171 |   -webkit-border-radius: 28px;
1172 | }
1173 | 
1174 | .size56 .css_char.d .stroke {
1175 |   border-top-left-radius: 0px;
1176 |   border-bottom-left-radius: 0px;
1177 |   -moz-border-radius-topleft: 0px;
1178 |   -moz-border-radius-bottomleft: 0px;
1179 |   -webkit-border-top-left-radius: 0px;
1180 |   -webkit-border-bottom-left-radius: 0px;
1181 | }
1182 | 
1183 | .size56 .css_char.c .neg,
1184 | .size56 .css_char.g .neg {
1185 |   width: 28px;
1186 |   height: 8px;
1187 |   top: 24px;
1188 |   left: 28px;
1189 | }
1190 | 
1191 | 
1192 | 
1193 | .size56 .css_char.g .spur {
1194 |   width: 8px;
1195 |   border-width: 24px 0 0 12px;
1196 |   top: 32px;
1197 |   left: 36px;
1198 | }
1199 | 
1200 | .size56 .css_char.q .cross_left,
1201 | .size56 .css_char.q .cross_right {
1202 |   width: 0px;
1203 |   top: 32px;
1204 | }
1205 | .size56 .css_char.q .cross_left {
1206 |   border-width: 24px 0 0 12px;
1207 |   left: 28px;
1208 | }
1209 | 
1210 | .size56 .css_char.q .cross_right {
1211 |   border-width: 0 12px 24px 0;
1212 |   left: 40px;
1213 | }
1214 | 
1215 | /***** E & F *****/
1216 | 
1217 | .size56 .css_char.e, .size56 .css_char.f { width: 40px; }
1218 | 
1219 | .size56 .css_char.e .stroke {
1220 |   height: 24px;
1221 |   width: 24px;
1222 |   border-width: 16px 0 16px 16px;
1223 | }
1224 | 
1225 | .size56 .css_char.f .stroke {
1226 |   height: 40px;
1227 |   width: 24px;
1228 |   border-width: 16px 0 0 16px;
1229 | }
1230 | 
1231 | .size56 .css_char.e .fill,
1232 | .size56 .css_char.f .fill {
1233 |   height: 12px;
1234 |   width: 24px;
1235 |   top: 22px;
1236 |   left: 12px;
1237 | }
1238 | 
1239 | 
1240 | 
1241 | 
1242 | 
1243 | /***** H *****/
1244 | 
1245 | .size56 .css_char.h { width: 40px; }
1246 | 
1247 | .size56 .css_char.h .top,
1248 | .size56 .css_char.h .bottom {
1249 |   width: 8px;
1250 |   height: 22px;
1251 | }
1252 | .size56 .css_char.h .top { border-width: 0 16px 8px; }
1253 | .size56 .css_char.h .bottom {
1254 |   border-width: 8px 16px 0;
1255 |   top: 26px;
1256 | }
1257 | 
1258 | /***** I *****/
1259 | 
1260 | .size56 .css_char.i { width: 16px; }
1261 | 
1262 | .size56 .css_char.i .fill {
1263 |   width: 16px;
1264 |   height: 56px;
1265 | }
1266 | 
1267 | /***** U & J *****/
1268 | 
1269 | .size56 .css_char.u,
1270 | .size56 .css_char.j { width: 44px; }
1271 | 
1272 | .size56 .css_char.u .stroke,
1273 | .size56 .css_char.j .stroke {
1274 |   width: 12px;
1275 |   height: 40px;
1276 |   border-width: 0 16px 16px;
1277 |   border-bottom-left-radius: 22px;
1278 |   border-bottom-right-radius: 22px;
1279 |   -moz-border-radius-bottomleft: 22px;
1280 |   -moz-border-radius-bottomright: 22px;
1281 |   -webkit-border-bottom-left-radius: 22px;
1282 |   -webkit-border-bottom-right-radius: 22px;
1283 | }
1284 | 
1285 | .size56 .css_char.j .neg {
1286 |   width: 24px;
1287 |   height: 32px;
1288 |   left: -4px;
1289 | }
1290 | 
1291 | /***** K *****/
1292 | 
1293 | .size56 .css_char.k { width: 44px; }
1294 | 
1295 | .size56 .css_char.k .split_vert {
1296 |   width: 30px;
1297 |   border-width: 28px 14px 28px 0;
1298 | }
1299 | 
1300 | .size56 .css_char.k .split_horiz {
1301 |   height: 16px;
1302 |   border-width: 24px 12px 24px 0;
1303 |   left: 16px;
1304 |   top: -4px;
1305 | }
1306 | 
1307 | 
1308 | 
1309 | /***** L *****/
1310 | 
1311 | .size56 .css_char.l { width: 40px; }
1312 | 
1313 | .size56 .css_char.l .stroke {
1314 |   width: 24px;
1315 |   height: 40px;
1316 |   border-width: 0 0 16px 16px;
1317 | }
1318 | 
1319 | 
1320 | 
1321 | /***** M *****/
1322 | 
1323 | .size56 .css_char.m { width: 56px; }
1324 | 
1325 | .size56 .css_char.m .split_horiz_pos {
1326 |   height: 32px;
1327 |   border-width: 28px 28px 0;
1328 | }
1329 | 
1330 | .size56 .css_char.m .split_horiz_neg {
1331 |   height: 8px;
1332 |   border-width: 12px 12px 0;
1333 |   top: 38px;
1334 |   left: 16px;
1335 | }
1336 | 
1337 | /***** N *****/
1338 | 
1339 | .size56 .css_char.n { width: 48px; }
1340 | 
1341 | .size56 .css_char.n .top_corner {
1342 |   border-width: 0 32px 24px 0;
1343 | 
1344 | }
1345 | 
1346 | .size56 .css_char.n .bottom_corner {
1347 |   border-width: 24px 0 0 32px;
1348 |   top: auto;
1349 |   left: auto;
1350 |   bottom: 0;
1351 |   right: 0;
1352 | }
1353 | 
1354 | .size56 .css_char.n .fill {
1355 |   width: 48px;
1356 |   height: 56px; 
1357 | }
1358 | 
1359 |   
1360 |   
1361 | /***** R  & P *****/
1362 | 
1363 | .size56 .css_char.r { width: 42px; }
1364 | .size56 .css_char.p { width: 40px; }
1365 | 
1366 | .size56 .css_char.r .inside {
1367 |   width: 4px;
1368 |   border-width: 24px 0 0 12px;
1369 |   top: 32px;
1370 |   left:  12px;
1371 | }
1372 | 
1373 | .size56 .css_char.r .outside {
1374 |   width: 4px;
1375 |   border-width: 0 12px 24px 0;
1376 |   top: 32px;
1377 |   left: 26px;
1378 | }
1379 | 
1380 | .size56 .css_char.r .stroke,
1381 | .size56 .css_char.p .stroke {
1382 |   width: 16px;
1383 |   height: 8px;
1384 |   border-width: 16px 16px 16px 0;
1385 |   left: 8px;
1386 |   border-top-right-radius: 20px;
1387 |   border-bottom-right-radius: 20px;
1388 |   -moz-border-radius-topright: 20px;
1389 |   -moz-border-radius-bottomright: 20px;
1390 |   -webkit-border-top-right-radius: 20px;
1391 |   -webkit-border-bottom-right-radius: 20px;
1392 | }
1393 | 
1394 | .size56 .css_char.r .fill,
1395 | .size56 .css_char.p .fill {
1396 |   width: 16px;
1397 |   height: 56px;
1398 | }
1399 | 
1400 | /***** S & some of ? *****/
1401 | 
1402 | .size56 .css_char.s,
1403 | .size56 .css_char.question {
1404 |   width: 36px;
1405 | }
1406 | 
1407 | .size56 .css_char.s .top_circle,
1408 | .size56 .css_char.s .bottom_circle,
1409 | .size56 .css_char.s .right .stroke,
1410 | .size56 .css_char.question .stroke {
1411 |   width: 4px;
1412 |   height: 4px;
1413 |   border-width: 16px;
1414 |   border-radius: 18px;
1415 |   -moz-border-radius: 18px;
1416 |   -webkit-border-radius: 18px;
1417 | }
1418 | .size56 .css_char.s .bottom_circle { 
1419 |   top: auto;
1420 |   bottom: 0;
1421 | }
1422 | 
1423 | .size56 .css_char.s .left.neg,
1424 | .size56 .css_char.s .right.neg,
1425 | .size56 .css_char.question .neg {
1426 |   width: 18px;
1427 |   height: 20px;
1428 |   top: 18px;
1429 | }
1430 | .size56 .css_char.s .right.neg { 
1431 |   left: 18px;
1432 |   overflow: hidden;
1433 | }
1434 | .size56 .css_char.s .right .stroke {
1435 |   top: 2px;
1436 |   left: -18px;
1437 | }
1438 | 
1439 | /***** T *****/
1440 | 
1441 | .size56 .css_char.t { width: 40px; }
1442 | 
1443 | .size56 .css_char.t .cross {
1444 |   width: 40px;
1445 |   height: 16px;
1446 | }
1447 | 
1448 | .size56 .css_char.t .stem {
1449 |   width: 16px;
1450 |   height: 48px;
1451 |   left: 12px;
1452 |   top: 8px;
1453 | }
1454 | 
1455 | /***** V & W *****/
1456 | 
1457 | 
1458 | .size56 .css_char.v {  width: 56px; }
1459 | 
1460 | .size56 .css_char.w {  width: 76px; }
1461 | 
1462 | .size56 .css_char.v .inside,
1463 | .size56 .css_char.w .inside_left { left: 16px; }
1464 | 
1465 | .size56 .css_char.w .inside_right { left: 36px; }
1466 | 
1467 | .size56 .css_char.v .outside,
1468 | .size56 .css_char.w .outside_left,
1469 | .size56 .css_char.w .outside_right { border-width: 56px 28px 0; }
1470 | 
1471 | .size56 .css_char.w .outside_right { left: auto; right: 0; }
1472 | 
1473 | .size56 .css_char.v .inside,
1474 | .size56 .css_char.w .inside_left,
1475 | .size56 .css_char.w .inside_right { 
1476 |   border-width: 24px 12px 0; 
1477 |   top: -4px;
1478 | }
1479 | 
1480 | /***** X *****/
1481 | 
1482 | .size56 .css_char.x { width: 52px; }
1483 | 
1484 | .size56 .css_char.x .outside {
1485 |   width: 20px;
1486 |   border-width: 28px 16px;
1487 | }
1488 | 
1489 | .size56 .css_char.x .inside {
1490 |   height: 32px;
1491 |   border-width: 16px 8px;
1492 |   left: 18px;
1493 |   top: -4px;
1494 | }
1495 | 
1496 | 
1497 | 
1498 | /***** Y *****/
1499 | 
1500 | .size56 .css_char.y {  width: 52px; }
1501 | 
1502 | .size56 .css_char.y .outside { border-width: 52px 26px 0; }
1503 | 
1504 | .size56 .css_char.y .inside { 
1505 |   border-width: 20px 10px 0; 
1506 |   top: -4px;
1507 |   left: 16px;
1508 | }
1509 | 
1510 | .size56 .css_char.y .fill {
1511 |   width: 16px;
1512 |   height: 24px;
1513 |   left: 18px;
1514 |   top: 32px;
1515 | }
1516 | 
1517 | 
1518 | 
1519 | /***** Z *****/
1520 | 
1521 | .size56 .css_char.z { width: 48px; }
1522 | 
1523 | .size56 .css_char.z .fill {
1524 |   width: 48px;
1525 |   height: 56px;
1526 | }
1527 | 
1528 | .size56 .css_char.z .left {
1529 |   border-width: 48px 24px 0 0;
1530 |   top: 16px;
1531 |   left: -4px;
1532 | }
1533 | .size56 .css_char.z .right {
1534 |   border-width: 0 0 48px 24px;
1535 |   top: -8px;
1536 |   left: 28px;
1537 | }
1538 | 
1539 | /***** ., !, & ? *****/
1540 | 
1541 | .size56 .css_char.period,
1542 | .size56 .css_char.exclam { width: 16px; }
1543 | 
1544 | .size56 .css_char.period .dot,
1545 | .size56 .css_char.exclam .dot,
1546 | .size56 .css_char.question .dot {
1547 |   width: 16px;
1548 |   height: 16px;
1549 |   top: 40px;
1550 |   border-radius: 8px;
1551 |   -moz-border-radius: 8px;
1552 |   -webkit-border-radius: 8px;
1553 | }
1554 | .size56 .css_char.question .dot { left: 10px;}
1555 | 
1556 | .size56 .css_char.exclam .line {
1557 |   width: 16px;
1558 |   height: 38px;
1559 | }
1560 | 
1561 | .size56 .css_char.question .line {
1562 |   width: 16px;
1563 |   height: 18px;
1564 |   left: 10px;
1565 |   top: 20px;
1566 | }
1567 | 
1568 | 
1569 | 
1570 | /********** font size 28 **********/
1571 | 
1572 | 
1573 | .size28 .css_char {
1574 |   height: 28px;
1575 |   margin: 0 2px 4px 0;
1576 | }
1577 | 
1578 | .size28 .word { 
1579 |   padding-right: 14px;
1580 | }
1581 | 
1582 | /***** A *****/
1583 | 
1584 | .size28 .css_char.a {  width: 28px; }
1585 | 
1586 | .size28 .css_char.a .outside { border-width: 0 14px 28px; }
1587 | 
1588 | .size28 .css_char.a .inside {
1589 |   border-width: 0 6px 12px;
1590 |   top: 18px;
1591 |   left: 8px
1592 | }
1593 | 
1594 | .size28 .css_char.a .bar {
1595 |   width: 12px;
1596 |   height: 4px;
1597 |   top: 22px;
1598 |   left: 8px;
1599 | }
1600 | 
1601 | /**** B *****/
1602 | 
1603 | .size28 .css_char.b { width: 20px; }
1604 | 
1605 | .size28 .css_char.b .top.fill,
1606 | .size28 .css_char.b .bottom.fill {
1607 |   width: 20px;
1608 |   height: 18px;
1609 |   border-width: 0px;
1610 |   border-top-right-radius: 9px;
1611 |   border-bottom-right-radius: 9px;
1612 |   -moz-border-radius-topright: 9px;
1613 |   -moz-border-radius-bottomright: 9px;
1614 |   -webkit-border-top-right-radius: 9px;
1615 |   -webkit-border-bottom-right-radius: 9px;
1616 | }
1617 | .size28 .css_char.b .bottom.fill { top: 10px; }
1618 | 
1619 | .size28 .css_char.b .top.neg,
1620 | .size28 .css_char.b .bottom.neg {
1621 |   width: 4px;
1622 |   height: 3px;
1623 |   left: 8px;
1624 |   border-top-right-radius: 1px;
1625 |   border-bottom-right-radius: 1px;
1626 |   -moz-border-radius-topright: 1px;
1627 |   -moz-border-radius-bottomright: 1px;
1628 |   -webkit-border-top-right-radius: 1px;
1629 |   -webkit-border-bottom-right-radius: 1px;
1630 | }
1631 | .size28 .css_char.b .top.neg { top: 8px; }
1632 | .size28 .css_char.b .bottom.neg { top: 17px; }
1633 | 
1634 | 
1635 | /***** C, D, G, O & Q *****/
1636 | 
1637 | .size28 .css_char.c,
1638 | .size28 .css_char.o,
1639 | .size28 .css_char.d,
1640 | .size28 .css_char.g,
1641 | .size28 .css_char.q {  width: 28px; }
1642 | 
1643 | .size28 .css_char.c .stroke,
1644 | .size28 .css_char.o .stroke,
1645 | .size28 .css_char.d .stroke,
1646 | .size28 .css_char.g .outside,
1647 | .size28 .css_char.q .stroke {
1648 |   width: 12px;
1649 |   height: 12px;
1650 |   border-width: 8px;
1651 |   border-radius: 14px;
1652 |   -moz-border-radius: 14px;
1653 |   -webkit-border-radius: 14px;
1654 | }
1655 | 
1656 | .size28 .css_char.d .stroke {
1657 |   border-top-left-radius: 0px;
1658 |   border-bottom-left-radius: 0px;
1659 |   -moz-border-radius-topleft: 0px;
1660 |   -moz-border-radius-bottomleft: 0px;
1661 |   -webkit-border-top-left-radius: 0px;
1662 |   -webkit-border-bottom-left-radius: 0px;
1663 | }
1664 | 
1665 | .size28 .css_char.c .neg,
1666 | .size28 .css_char.g .neg {
1667 |   width: 14px;
1668 |   height: 4px;
1669 |   top: 12px;
1670 |   left: 14px;
1671 | }
1672 | 
1673 | 
1674 | 
1675 | .size28 .css_char.g .spur {
1676 |   width: 4px;
1677 |   border-width: 12px 0 0 6px;
1678 |   top: 16px;
1679 |   left: 18px;
1680 | }
1681 | 
1682 | .size28 .css_char.q .cross_left,
1683 | .size28 .css_char.q .cross_right {
1684 |   width: 0px;
1685 |   top: 16px;
1686 | }
1687 | .size28 .css_char.q .cross_left {
1688 |   border-width: 12px 0 0 6px;
1689 |   left: 14px;
1690 | }
1691 | 
1692 | .size28 .css_char.q .cross_right {
1693 |   border-width: 0 6px 12px 0;
1694 |   left: 20px;
1695 | }
1696 | 
1697 | /***** E & F *****/
1698 | 
1699 | .size28 .css_char.e, .size28 .css_char.f { width: 20px; }
1700 | 
1701 | .size28 .css_char.e .stroke {
1702 |   height: 12px;
1703 |   width: 12px;
1704 |   border-width: 8px 0 8px 8px;
1705 | }
1706 | 
1707 | .size28 .css_char.f .stroke {
1708 |   height: 20px;
1709 |   width: 12px;
1710 |   border-width: 8px 0 0 8px;
1711 | }
1712 | 
1713 | .size28 .css_char.e .fill,
1714 | .size28 .css_char.f .fill {
1715 |   height: 6px;
1716 |   width: 12px;
1717 |   top: 11px;
1718 |   left: 6px;
1719 | }
1720 | 
1721 | 
1722 | 
1723 | .size28 .css_char.v .inside,
1724 | .size28 .css_char.w .inside_left { left: 8px; }
1725 | 
1726 | .size28 .css_char.w .inside_right { left: 18px; }
1727 | 
1728 | 
1729 | /***** H *****/
1730 | 
1731 | .size28 .css_char.h { width: 20px; }
1732 | 
1733 | .size28 .css_char.h .top,
1734 | .size28 .css_char.h .bottom {
1735 |   width: 4px;
1736 |   height: 11px;
1737 | }
1738 | .size28 .css_char.h .top { border-width: 0 8px 4px; }
1739 | .size28 .css_char.h .bottom {
1740 |   border-width: 4px 8px 0;
1741 |   top: 13px;
1742 | }
1743 | 
1744 | /***** I *****/
1745 | 
1746 | .size28 .css_char.i { width: 8px; }
1747 | 
1748 | .size28 .css_char.i .fill {
1749 |   width: 8px;
1750 |   height: 28px;
1751 | }
1752 | 
1753 | /***** U & J *****/
1754 | 
1755 | .size28 .css_char.u,
1756 | .size28 .css_char.j { width: 22px; }
1757 | 
1758 | .size28 .css_char.u .stroke,
1759 | .size28 .css_char.j .stroke {
1760 |   width: 6px;
1761 |   height: 20px;
1762 |   border-width: 0 8px 8px;
1763 |   border-bottom-left-radius: 11px;
1764 |   border-bottom-right-radius: 11px;
1765 |   -moz-border-radius-bottomleft: 11px;
1766 |   -moz-border-radius-bottomright: 11px;
1767 |   -webkit-border-bottom-left-radius: 11px;
1768 |   -webkit-border-bottom-right-radius: 11px;
1769 | }
1770 | 
1771 | .size28 .css_char.j .neg {
1772 |   width: 12px;
1773 |   height: 16px;
1774 |   left: -2px;
1775 | }
1776 | 
1777 | /***** K *****/
1778 | 
1779 | .size28 .css_char.k { width: 22px; }
1780 | 
1781 | .size28 .css_char.k .split_vert {
1782 |   width: 15px;
1783 |   border-width: 14px 7px 14px 0;
1784 |   left: 0px;
1785 | }
1786 | 
1787 | .size28 .css_char.k .split_horiz {
1788 |   height: 8px;
1789 |   border-width: 12px 6px 12px 0;
1790 |   left: 8px;
1791 |   top: -2px;
1792 | }
1793 | 
1794 | /***** L *****/
1795 | 
1796 | .size28 .css_char.l { width: 20px; }
1797 | 
1798 | .size28 .css_char.l .stroke {
1799 |   width: 12px;
1800 |   height: 20px;
1801 |   border-width: 0 0 8px 8px;
1802 | }
1803 | 
1804 | 
1805 | 
1806 | /***** M *****/
1807 | 
1808 | .size28 .css_char.m { width: 28px; }
1809 | 
1810 | .size28 .css_char.m .split_horiz_pos {
1811 |   height: 16px;
1812 |   border-width: 14px 14px 0;
1813 | }
1814 | 
1815 | .size28 .css_char.m .split_horiz_neg {
1816 |   height: 4px;
1817 |   border-width: 6px 6px 0;
1818 |   top: 19px;
1819 |   left: 8px;
1820 | }
1821 | 
1822 | /***** N *****/
1823 | 
1824 | .size28 .css_char.n { width: 24px; }
1825 | 
1826 | .size28 .css_char.n .top_corner {
1827 |   border-width: 0 20px 15px 0;
1828 |   top: -3px;
1829 |   left: -4px;
1830 | }
1831 | 
1832 | .size28 .css_char.n .bottom_corner {
1833 |   border-width: 15px 0 0 20px;
1834 |   top: 16px;
1835 |   left: 8px;
1836 | }
1837 | 
1838 | .size28 .css_char.n .fill {
1839 |   width: 24px;
1840 |   height: 28px; 
1841 | }
1842 | 
1843 |   
1844 |   
1845 | /***** R  & P *****/
1846 | 
1847 | .size28 .css_char.r { width: 21px; }
1848 | .size28 .css_char.p { width: 20px; }
1849 | 
1850 | .size28 .css_char.r .inside {
1851 |   width: 2px;
1852 |   border-width: 12px 0 0 6px;
1853 |   top: 16px;
1854 |   left:  6px;
1855 | }
1856 | 
1857 | .size28 .css_char.r .outside {
1858 |   width: 2px;
1859 |   border-width: 0 6px 12px 0px;
1860 |   top: 16px;
1861 |   left: 13px;
1862 | }
1863 | 
1864 | .size28 .css_char.r .stroke,
1865 | .size28 .css_char.p .stroke {
1866 |   width: 8px;
1867 |   height: 4px;
1868 |   border-width: 8px 8px 8px 0;
1869 |   left: 4px;
1870 |   border-top-right-radius: 10px;
1871 |   border-bottom-right-radius: 10px;
1872 |   -moz-border-radius-topright: 10px;
1873 |   -moz-border-radius-bottomright: 10px;
1874 |   -webkit-border-top-right-radius: 10px;
1875 |   -webkit-border-bottom-right-radius: 10px;
1876 | }
1877 | 
1878 | .size28 .css_char.r .fill,
1879 | .size28 .css_char.p .fill {
1880 |   width: 8px;
1881 |   height: 28px;
1882 | }
1883 | 
1884 | /***** S & some of ? *****/
1885 | 
1886 | .size28 .css_char.s,
1887 | .size28 .css_char.question {
1888 |   width: 18px;
1889 | }
1890 | 
1891 | .size28 .css_char.s .top_circle,
1892 | .size28 .css_char.s .bottom_circle,
1893 | .size28 .css_char.s .right .stroke,
1894 | .size28 .css_char.question .stroke {
1895 |   width: 2px;
1896 |   height: 2px;
1897 |   border-width: 8px;
1898 |   border-radius: 9px;
1899 |   -moz-border-radius: 9px;
1900 |   -webkit-border-radius: 9px;
1901 | }
1902 | .size28 .css_char.s .top_circle { top: 0px; }
1903 | .size28 .css_char.s .bottom_circle { top: 10px; }
1904 | 
1905 | .size28 .css_char.s .left.neg,
1906 | .size28 .css_char.s .right.neg,
1907 | .size28 .css_char.question .neg {
1908 |   width: 9px;
1909 |   height: 10px;
1910 |   top: 9px;
1911 | }
1912 | .size28 .css_char.s .right.neg { 
1913 |   left: 9px;
1914 |   overflow: hidden;
1915 | }
1916 | .size28 .css_char.s .right .stroke {
1917 |   top: 1px;
1918 |   left: -9px;
1919 | }
1920 | 
1921 | /***** T *****/
1922 | 
1923 | .size28 .css_char.t { width: 20px; }
1924 | 
1925 | .size28 .css_char.t .cross {
1926 |   width: 20px;
1927 |   height: 8px;
1928 | }
1929 | 
1930 | .size28 .css_char.t .stem {
1931 |   width: 8px;
1932 |   height: 24px;
1933 |   left: 6px;
1934 |   top: 4px;
1935 | }
1936 | 
1937 | /***** V & W *****/
1938 | 
1939 | .size28 .css_char.v {  width: 28px; }
1940 | 
1941 | .size28 .css_char.w {  width: 38px; }
1942 | 
1943 | .size28 .css_char.v .outside,
1944 | .size28 .css_char.w .outside_left,
1945 | .size28 .css_char.w .outside_right { border-width: 28px 14px 0px; }
1946 | 
1947 | .size28 .css_char.w .outside_right { left: 10px; }
1948 | 
1949 | .size28 .css_char.v .inside,
1950 | .size28 .css_char.w .inside_left,
1951 | .size28 .css_char.w .inside_right { 
1952 |   border-width: 12px 6px 0; 
1953 |   top: -2px;
1954 | }
1955 | 
1956 | /***** X *****/
1957 | 
1958 | .size28 .css_char.x { width: 26px; }
1959 | 
1960 | .size28 .css_char.x .outside {
1961 |   width: 10px;
1962 |   border-width: 14px 8px;
1963 | }
1964 | 
1965 | .size28 .css_char.x .inside {
1966 |   height: 16px;
1967 |   border-width: 8px 4px;
1968 |   left: 9px;
1969 |   top: -2px;
1970 | }
1971 | 
1972 | 
1973 | 
1974 | /***** Y *****/
1975 | 
1976 | .size28 .css_char.y {  width: 26px; }
1977 | 
1978 | .size28 .css_char.y .outside { border-width: 26px 13px 0px; }
1979 | 
1980 | .size28 .css_char.y .inside { 
1981 |   border-width: 10px 5px 0; 
1982 |   top: -2px;
1983 |   left: 8px;
1984 | }
1985 | 
1986 | .size28 .css_char.y .fill {
1987 |   width: 8px;
1988 |   height: 12px;
1989 |   left: 9px;
1990 |   top: 16px;
1991 | }
1992 | 
1993 | 
1994 | 
1995 | /***** Z *****/
1996 | 
1997 | .size28 .css_char.z { width: 24px; }
1998 | 
1999 | .size28 .css_char.z .fill {
2000 |   width: 24px;
2001 |   height: 28px;
2002 | }
2003 | 
2004 | .size28 .css_char.z .left {
2005 |   border-width: 24px 12px 0 0;
2006 |   top: 8px;
2007 |   left: -2px;
2008 | }
2009 | .size28 .css_char.z .right {
2010 |   border-width: 0 0px 24px 12px;
2011 |   top: -4px;
2012 |   left: 14px;
2013 | }
2014 | 
2015 | /***** ., !, & ? *****/
2016 | 
2017 | .size28 .css_char.period,
2018 | .size28 .css_char.exclam { width: 8px; }
2019 | 
2020 | .size28 .css_char.period .dot,
2021 | .size28 .css_char.exclam .dot,
2022 | .size28 .css_char.question .dot {
2023 |   width: 8px;
2024 |   height: 8px;
2025 |   top: 20px;
2026 |   border-radius: 4px;
2027 |   -moz-border-radius: 4px;
2028 |   -webkit-border-radius: 4px;
2029 | }
2030 | .size28 .css_char.question .dot { left: 5px;}
2031 | 
2032 | .size28 .css_char.exclam .line {
2033 |   width: 8px;
2034 |   height: 19px;
2035 | }
2036 | 
2037 | .size28 .css_char.question .line {
2038 |   width: 8px;
2039 |   height: 9px;
2040 |   left: 5px;
2041 |   top: 10px;
2042 | }
2043 | 


--------------------------------------------------------------------------------
/grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/desandro/curtis-css-typeface/48af1a7a300c6c460384d8f71cf8f43cd1b6d5dd/grid.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 | 
  6 |   <title>Curtis CSS Typeface</title>
  7 | 
  8 |   <link rel="stylesheet" href="curtis.css" />
  9 | 
 10 | </head>
 11 | <body>
 12 | 
 13 | 
 14 | <div id="content">
 15 | 
 16 |   <h1 class="curtis size56 standard clearfix">
 17 |       <span class="word"><span class="css_char c">C<span class="stroke"></span><span class="neg"></span></span><span class="css_char u">U<span class="stroke"></span></span><span class="css_char r">R<span class="inside split_vert"></span><span class="outside split_vert"></span><span class="stroke"></span><span class="fill"></span></span><span class="css_char t">T<span class="stem fill"></span><span class="cross fill"></span></span><span class="css_char i">I<span class="fill"></span></span><span class="css_char s">S<span class="bottom_circle stroke"></span><span class="left neg"></span><span class="top_circle stroke"></span><span class="right neg"><span class="stroke"></span></span></span></span>
 18 |       <span class="word"><span class="css_char c">C<span class="stroke"></span><span class="neg"></span></span><span class="css_char s">S<span class="bottom_circle stroke"></span><span class="left neg"></span><span class="top_circle stroke"></span><span class="right neg"><span class="stroke"></span></span></span><span class="css_char s">S<span class="bottom_circle stroke"></span><span class="left neg"></span><span class="top_circle stroke"></span><span class="right neg"><span class="stroke"></span></span></span></span>
 19 |       <span class="word"><span class="css_char t">T<span class="stem fill"></span><span class="cross fill"></span></span><span class="css_char y">Y<span class="outside split_vert"></span><span class="inside split_horiz"></span><span class="fill"></span></span><span class="css_char p">P<span class="stroke"></span><span class="fill"></span></span><span class="css_char e">E<span class="stroke"></span><span class="fill"></span></span><span class="css_char f">F<span class="stroke"></span><span class="fill"></span></span><span class="css_char a">A<span class="outside split_vert"></span><span class="inside split_horiz"></span><span class="bar fill"></span></span><span class="css_char c">C<span class="stroke"></span><span class="neg"></span></span><span class="css_char e">E<span class="stroke"></span><span class="fill"></span></span></span>
 20 |   </h1>
 21 | 
 22 |   <div id="copy" class="tk_proxima_nova">
 23 | 
 24 |     <p><a href="https://github.com/desandro/curtis-css-typeface">Fork me on GitHub</a></p>
 25 | 
 26 |     <p>
 27 |       Curtis is the name I&rsquo;ve given for a family of geometric sans-serif fonts.  Other incarnations exist as Fontstructions: <a href="http://fontstruct.com/fontstructions/show/180805">Curtis Heavy</a> and <a href="http://fontstruct.com/fontstructions/show/157392">Curtis Pixel 14</a>.  This version takes form in CSS.  All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning. <span class="gone">You can get a better idea of how the letters were formed with the <em>Inspect</em> display option.</span>
 28 |     </p>
 29 | 
 30 |     <p>
 31 |       Each character is wrapped in a <code>&lt;span&gt;</code> and then depending on the complexity of that character, more empty <code>&lt;span&gt;</code> elements are added to the markup to render each shape.  Here's the markup for R:
 32 |     </p>
 33 | 
 34 | <pre><code>&lt;span class="css_char r"&gt;
 35 |   R
 36 |   &lt;span class="inside split_vert"&gt;&lt;/span&gt;
 37 |   &lt;span class="outside split_vert"&gt;&lt;/span&gt;
 38 |   &lt;span class="stroke"&gt;&lt;/span&gt;
 39 |   &lt;span class="fill"&gt;&lt;/span&gt;
 40 | &lt;/span&gt;</code></pre>
 41 | 
 42 |     <p>
 43 |       The Curtis CSS font wasn&rsquo;t conceived of any practical application.  I was more interested in seeing if it could be pulled off, and if so, what the final result would look like.  This typeface was used in the article <a href="http://v2.desandro.com/articles/why-art">Why Art?</a>.
 44 |     </p>
 45 |     <p>This design pattern is released under a <a href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution License</a>.  You are free to share and remix this work.</p>
 46 | 
 47 |     <p>&mdash; <a href="http://desandro.com">Dave DeSandro</a></p>
 48 | 
 49 |   </div>
 50 | 
 51 |   <div id="options" class="gone tk_proxima_nova">
 52 | 
 53 |     <div class="curtis size280 inspect">
 54 |       <span class="css_char r">
 55 |         R
 56 |         <span class="inside split_vert"></span>
 57 |         <span class="outside split_vert"></span>
 58 |         <span class="stroke"></span>
 59 |         <span class="fill"></span>
 60 |       </span>
 61 |     </div>
 62 | 
 63 |     <fieldset id="fontsizes">
 64 |       <legend>Font size</legend>
 65 | 
 66 |       <ul>
 67 |         <li>
 68 |           <input type="radio" name="fontsize" value="size28" id="size28" />
 69 |           <label for="size28">28px</label>
 70 |         </li>
 71 |         <li>
 72 |           <input type="radio" name="fontsize" value="size56" id="size56" />
 73 |           <label for="size56">56px</label>
 74 |         </li>
 75 |         <li>
 76 |           <input type="radio" name="fontsize" value="size140" id="size140" checked="checked" />
 77 |           <label for="size140">140px</label>
 78 |         </li>
 79 |         <li>
 80 |           <input type="radio" name="fontsize" value="size280" id="size280" />
 81 |           <label for="size280">280px</label>
 82 |         </li>
 83 |       </ul>
 84 | 
 85 |     </fieldset>
 86 | 
 87 |     <fieldset id="display">
 88 |       <legend>Display options</legend>
 89 | 
 90 |       <ul>
 91 |         <li>
 92 |           <input type="radio" name="display" value="standard" id="standard" checked="checked" />
 93 |           <label for="standard">Standard</label>
 94 |         </li>
 95 |         <li>
 96 |           <input type="radio" name="display" value="inspect" id="inspect" />
 97 |           <label for="inspect">Inspect</label>
 98 |         </li>
 99 |       </ul>
100 | 
101 |     </fieldset>
102 | 
103 |   </div>
104 | 
105 |   <div id="demo" class="curtis size140 standard tk_proxima_nova">
106 | 
107 |     <p>
108 | 
109 |       <span class="css_char a">
110 |         A
111 |         <span class="outside split_vert"></span>
112 |         <span class="inside split_horiz"></span>
113 |         <span class="bar fill"></span>
114 |       </span>
115 | 
116 |       <span class="css_char b">
117 |         B
118 |         <span class="top fill"></span>
119 |         <span class="bottom fill"></span>
120 |         <span class="top neg"></span>
121 |         <span class="bottom neg"></span>
122 |       </span>
123 | 
124 |       <span class="css_char c">
125 |         C
126 |         <span class="stroke"></span>
127 |         <span class="neg"></span>
128 |       </span>
129 | 
130 |       <span class="css_char d">
131 |         D
132 |         <span class="stroke"></span>
133 |       </span>
134 | 
135 |       <span class="css_char e">
136 |         E
137 |         <span class="stroke"></span>
138 |         <span class="fill"></span>
139 |       </span>
140 | 
141 |       <span class="css_char f">
142 |         F
143 |         <span class="stroke"></span>
144 |         <span class="fill"></span>
145 |       </span>
146 | 
147 |       <span class="css_char g">
148 |         G
149 |         <span class="outside stroke"></span>
150 |         <span class="arm stroke"></span>
151 |         <span class="spur split_vert"></span>
152 |         <span class="neg"></span>
153 |       </span>
154 | 
155 |       <span class="css_char h">
156 |         H
157 |         <span class="stroke top"></span>
158 |         <span class="stroke bottom"></span>
159 |       </span>
160 | 
161 |       <span class="css_char i">
162 |         I
163 |         <span class="fill"></span>
164 |       </span>
165 | 
166 |       <span class="css_char j">
167 |         J
168 |         <span class="stroke"></span>
169 |         <span class="neg"></span>
170 |       </span>
171 | 
172 |       <span class="css_char k">
173 |         K
174 |         <span class="split_vert"></span>
175 |         <span class="split_horiz"></span>
176 |       </span>
177 | 
178 |       <span class="css_char l">
179 |         L
180 |         <span class="stroke"></span>
181 |       </span>
182 | 
183 | 
184 |       <span class="css_char m">
185 |         M
186 |         <span class="split_horiz_pos"></span>
187 |         <span class="split_horiz_neg"></span>
188 |       </span>
189 | 
190 |       <span class="css_char n">
191 |         N
192 |         <span class="fill"></span>
193 |         <span class="top_corner split_horiz_neg"></span>
194 |         <span class="bottom_corner split_horiz_neg"></span>
195 |       </span>
196 | 
197 |       <span class="css_char o">
198 |         O
199 |         <span class="stroke"></span>
200 |       </span>
201 | 
202 |       <span class="css_char p">
203 |         P
204 |         <span class="stroke"></span>
205 |         <span class="fill"></span>
206 |       </span>
207 | 
208 | 
209 | 
210 |       <span class="css_char q">
211 |         Q
212 |         <span class="stroke"></span>
213 |         <span class="cross_left split_vert"></span>
214 |         <span class="cross_right split_vert"></span>
215 |       </span>
216 | 
217 | 
218 |       <span class="css_char r">
219 |         R
220 |         <span class="inside split_vert"></span>
221 |         <span class="outside split_vert"></span>
222 |         <span class="stroke"></span>
223 |         <span class="fill"></span>
224 |       </span>
225 | 
226 |       <span class="css_char s">
227 |         S
228 |         <span class="bottom_circle stroke"></span>
229 |         <span class="left neg"></span>
230 |         <span class="top_circle stroke"></span>
231 |         <span class="right neg">
232 |           <span class="stroke"></span>
233 |         </span>
234 |       </span>
235 | 
236 |       <span class="css_char t">
237 |         T
238 |         <span class="stem fill"></span>
239 |         <span class="cross fill"></span>
240 |       </span>
241 | 
242 |       <span class="css_char u">
243 |         U
244 |         <span class="stroke"></span>
245 |       </span>
246 | 
247 |       <span class="css_char v">
248 |         V
249 |         <span class="outside split_vert"></span>
250 |         <span class="inside split_horiz"></span>
251 |       </span>
252 | 
253 | 
254 | 
255 |       <span class="css_char w">
256 |         W
257 |         <span class="outside_left split_vert"></span>
258 |         <span class="outside_right split_vert"></span>
259 |         <span class="inside_left split_horiz"></span>
260 |         <span class="inside_right split_horiz"></span>
261 |       </span>
262 | 
263 |       <span class="css_char x">
264 |         X
265 |         <span class="outside split_vert"></span>
266 |         <span class="inside split_horiz"></span>
267 |       </span>
268 | 
269 | 
270 |       <span class="css_char y">
271 |         Y
272 |         <span class="outside split_vert"></span>
273 |         <span class="inside split_horiz"></span>
274 |         <span class="fill"></span>
275 |       </span>
276 | 
277 | 
278 |       <span class="css_char z">
279 |         Z
280 |         <span class="fill"></span>
281 |         <span class="left split_horiz"></span>
282 |         <span class="right split_horiz"></span>
283 |       </span>
284 | 
285 |       <span class="css_char question">
286 |         ?
287 |         <span class="stroke"></span>
288 |         <span class="neg"></span>
289 |         <span class="line fill"></span>
290 |         <span class="dot fill"></span>
291 |       </span>
292 | 
293 |       <span class="css_char exclam">
294 |         !
295 |         <span class="line fill"></span>
296 |         <span class="dot fill"></span>
297 |       </span>
298 | 
299 |       <span class="css_char period">
300 |         .
301 |         <span class="dot fill"></span>
302 |       </span>
303 | 
304 |     </p>
305 | 
306 | 
307 |     <p>
308 | 
309 |       <span class="word">
310 |         <span class="css_char q">
311 |           Q
312 |           <span class="stroke"></span>
313 |           <span class="cross_left split_vert"></span>
314 |           <span class="cross_right split_vert"></span>
315 |         </span> <!-- /.css_char.q -->
316 | 
317 |         <span class="css_char u">
318 |           U
319 |           <span class="stroke"></span>
320 |         </span> <!-- /.css_char.u -->
321 | 
322 |         <span class="css_char i">
323 |           I
324 |           <span class="fill"></span>
325 |         </span> <!-- /.css_char.i -->
326 | 
327 |         <span class="css_char c">
328 |           C
329 |           <span class="stroke"></span>
330 |           <span class="neg"></span>
331 |         </span> <!-- /.css_char.c -->
332 | 
333 |         <span class="css_char k">
334 |           K
335 |           <span class="split_vert"></span>
336 |           <span class="split_horiz"></span>
337 |         </span> <!-- /.css_char.k -->
338 |       </span> <!-- /.word -->
339 | 
340 |       <span class="word">
341 |         <span class="css_char b">
342 |           B
343 |           <span class="top fill"></span>
344 |           <span class="bottom fill"></span>
345 |           <span class="top neg"></span>
346 |           <span class="bottom neg"></span>
347 |         </span>
348 | 
349 |         <span class="css_char r">
350 |           R
351 |           <span class="inside split_vert"></span>
352 |           <span class="outside split_vert"></span>
353 |           <span class="stroke"></span>
354 |           <span class="fill"></span>
355 |         </span> <!-- /.css_char.r -->
356 | 
357 |         <span class="css_char o">
358 |           O
359 |           <span class="stroke"></span>
360 |         </span> <!-- /.css_char.o -->
361 | 
362 |         <span class="css_char w">
363 |           W
364 |           <span class="outside_left split_vert"></span>
365 |           <span class="outside_right split_vert"></span>
366 |           <span class="inside_left split_horiz"></span>
367 |           <span class="inside_right split_horiz"></span>
368 |         </span> <!-- /.css_char.w -->
369 | 
370 |         <span class="css_char n">
371 |           N
372 |           <span class="fill"></span>
373 |           <span class="top_corner split_horiz_neg"></span>
374 |           <span class="bottom_corner split_horiz_neg"></span>
375 |         </span> <!-- /.css_char.n -->
376 |       </span> <!-- /.word -->
377 | 
378 |       <span class="word">
379 | 
380 |         <span class="css_char f">
381 |           F
382 |           <span class="stroke"></span>
383 |           <span class="fill"></span>
384 |         </span> <!-- /.css_char.f -->
385 | 
386 |         <span class="css_char o">
387 |           O
388 |           <span class="stroke"></span>
389 |         </span> <!-- /.css_char.o -->
390 | 
391 |         <span class="css_char x">
392 |           X
393 |           <span class="outside split_vert"></span>
394 |           <span class="inside split_horiz"></span>
395 |         </span> <!-- /.css_char.x -->
396 |       </span> <!-- /.word -->
397 | 
398 |       <span class="word">
399 | 
400 |         <span class="css_char j">
401 |           J
402 |           <span class="stroke"></span>
403 |           <span class="neg"></span>
404 |         </span> <!-- /.css_char.j -->
405 | 
406 | 
407 |         <span class="css_char u">
408 |           U
409 |           <span class="stroke"></span>
410 |         </span> <!-- /.css_char.u -->
411 | 
412 | 
413 |         <span class="css_char m">
414 |           M
415 |           <span class="split_horiz_pos"></span>
416 |           <span class="split_horiz_neg"></span>
417 |         </span> <!-- /.css_char.m -->
418 | 
419 |         <span class="css_char p">
420 |           P
421 |           <span class="stroke"></span>
422 |           <span class="fill"></span>
423 |         </span> <!-- /.css_char.p -->
424 | 
425 |         <span class="css_char s">
426 |           S
427 |           <span class="bottom_circle stroke"></span>
428 |           <span class="left neg"></span>
429 |           <span class="top_circle stroke"></span>
430 |           <span class="right neg">
431 |             <span class="stroke"></span>
432 |           </span>
433 |         </span> <!-- /.css_char.s -->
434 |       </span> <!-- /.word -->
435 | 
436 |       <span class="word">
437 | 
438 |         <span class="css_char o">
439 |           O
440 |           <span class="stroke"></span>
441 |         </span> <!-- /.css_char.o -->
442 | 
443 |         <span class="css_char v">
444 |           V
445 |           <span class="outside split_vert"></span>
446 |           <span class="inside split_horiz"></span>
447 |         </span> <!-- /.css_char.v -->
448 | 
449 |         <span class="css_char e">
450 |           E
451 |           <span class="stroke"></span>
452 |           <span class="fill"></span>
453 |         </span> <!-- /.css_char.e -->
454 | 
455 |         <span class="css_char r">
456 |           R
457 |           <span class="inside split_vert"></span>
458 |           <span class="outside split_vert"></span>
459 |           <span class="stroke"></span>
460 |           <span class="fill"></span>
461 |         </span> <!-- /.css_char.r -->
462 |       </span> <!-- /.word -->
463 | 
464 |       <span class="word">
465 | 
466 |         <span class="css_char t">
467 |           T
468 |           <span class="stem fill"></span>
469 |           <span class="cross fill"></span>
470 |         </span> <!-- /.css_char.t -->
471 | 
472 |         <span class="css_char h">
473 |           H
474 |           <span class="stroke top"></span>
475 |           <span class="stroke bottom"></span>
476 |         </span> <!-- /.css_char.h -->
477 | 
478 |         <span class="css_char e">
479 |           E
480 |           <span class="stroke"></span>
481 |           <span class="fill"></span>
482 | 
483 |         </span> <!-- /.css_char.e -->
484 | 
485 |       </span> <!-- /.word -->
486 | 
487 |       <span class="word">
488 | 
489 |         <span class="css_char l">
490 |           L
491 |           <span class="stroke"></span>
492 |         </span> <!-- /.css_char.l -->
493 | 
494 |         <span class="css_char a">
495 |           A
496 |           <span class="outside split_vert"></span>
497 |           <span class="inside split_horiz"></span>
498 |           <span class="bar fill"></span>
499 |         </span> <!-- /.css_char.a -->
500 | 
501 |         <span class="css_char z">
502 |           Z
503 |           <span class="fill"></span>
504 |           <span class="left split_horiz"></span>
505 |           <span class="right split_horiz"></span>
506 |         </span>
507 | 
508 |         <span class="css_char y">
509 |           Y
510 |           <span class="outside split_vert"></span>
511 |           <span class="inside split_horiz"></span>
512 |           <span class="fill"></span>
513 |         </span> <!-- /.css_char.y -->
514 |       </span> <!-- /.word -->
515 | 
516 |       <span class="word">
517 |         <span class="css_char d">
518 |           D
519 |           <span class="stroke"></span>
520 |         </span> <!-- /.css_char.d -->
521 | 
522 |         <span class="css_char o">
523 |           O
524 |           <span class="stroke"></span>
525 |         </span> <!-- /.css_char.o -->
526 | 
527 |         <span class="css_char g">
528 |           G
529 |           <span class="outside stroke"></span>
530 |           <span class="arm stroke"></span>
531 |           <span class="spur split_vert"></span>
532 |           <span class="neg"></span>
533 |         </span> <!-- /.css_char.g -->
534 | 
535 | 
536 |         <span class="css_char period">
537 |           .
538 |           <span class="dot fill"></span>
539 |         </span>
540 | 
541 |       </span> <!-- /.word -->
542 | 
543 | 
544 | 
545 |     </p>
546 | 
547 |   </div>
548 | 
549 | 
550 | <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
551 | <script>
552 | $(function(){
553 | 
554 |   $('.gone').removeClass('gone');
555 | 
556 |   var $demo = $('#demo');
557 | 
558 |   $demo.removeClass('size28').removeClass('size56')
559 |         .removeClass('size140').removeClass('size280')
560 |         .removeClass('standard').removeClass('inspect');
561 | 
562 |   var fontsize = $('#fontsizes input:checked').val();
563 |   var display =  $('#display input:checked').val();
564 |   $demo.addClass( fontsize ).addClass( display );
565 | 
566 |   $('#fontsizes input').click(function(){
567 |     $demo.removeClass('size28').removeClass('size56')
568 |           .removeClass('size140').removeClass('size280');
569 |     var fontsize = $(this).val();
570 |     $demo.addClass( fontsize );
571 |   });
572 | 
573 |   $('#display input').click(function(){
574 |     $demo.removeClass('standard').removeClass('inspect');
575 |     var display = $(this).val();
576 |     $demo.addClass( display );
577 |   });
578 | 
579 | });
580 | </script>
581 | 
582 | </div>
583 | 
584 | </body>
585 | </html>
586 | 


--------------------------------------------------------------------------------