high-res logo using custom-created font

ignore-me-script.js

  window.addEventListener('load', function(){
    var hey = document.querySelector('.button'),
        you = document.querySelector('.icon');
    window.you = you;
    if (!hey) return;
    you.scale = 1;
    hey.addEventListener('click', function () {
      var scale = you.scale = you.scale === 1 ? 2 : 1;
      var rotate = (scale === 1 ? 360 : 0) + 'deg';
      you.setAttribute('style','-webkit-transform: scale(' + scale  + ')');
    });
  });

ignore-me-style.css

#main { 
    background: #111; 
    color: #ddd; 
    text-align: center; 
    font: 1em/0.9em Helvetica Neue, Helvetica, sans-serif;
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
  }

  #main.light { 
    background: #ddd; 
    color: #019;
  }

  h1      { margin-top: 100px; font-size: 1.5em; }
  .button { color: #aaa; background: #222; border: 1px solid #333; clear: both; display: inline-block; padding: 5px 10px 5px 10px; border-radius: 4px; cursor: pointer; } 
  .logo   { display: block; margin-top: 120px; }

index.html

<link href="ignore-me-style.css" rel="stylesheet" />
<script src="ignore-me-script.js"></script>
<!--
Basically I created a custom font in Inkspace (open source alternative to Adobe illustrator), then converted the SVG file into TTF in this site http://www.freefontconverter.com/

In this example I used the character "a". Obviously, this should have been a unicode character.
-->
<style>
  @font-face {
    font-family: 'JamesFont';
    src: url('https://dl.dropbox.com/u/2281027/font-james.ttf');
  }

  .icon {
    display: inline-block;
    font-family: JamesFont;
    -webkit-transition: 400ms;
    -webkit-transform-origin-x: 45px;
    -webkit-transform: scale(1);
    }

    .icon:before {
      content: 'a'; /** This should be a unicode character. but for now.. **/
      font-size: 104px;}
</style>


<div id="main">

  <h1>Example: high-res logo using custom-created font</h1>
  <small>works only in webkit for now</small>
  <div class="button">toggle size</div>

  <div class="logo">
    <span class="icon"></div>
  </div>

</div>