title: setting character width with css
body: <p>I need to design a simple logo with css and everything is fine except for the letter size. Requirement is to use verdana font but with wide characters as shown in the image. However, with current code they look narrow. Is there anyway to achieve this behavior without using images?</p>
  
  <p>I am not looking for letter spacing, but how to make the character itself occupy a set number of pixels. For example, I want letter <code>t</code> to have 30px font size (height) and double the standard width.. </p>
  
  <p>Wide Image:
  <img src="https://i.stack.imgur.com/wPKGd.png" alt="widecharacters"> </p>
  
  <p>Standard Logo with code: <img src="https://i.stack.imgur.com/SNbpb.png" alt="Standard"></p>
  
  <p>Here is the current formatting for the logo:</p>
  
  <pre><code>.brand {
      color: white;
      display: block;
      float: left;
      font-size: 40px;
      font-weight: 200;
      margin-top: 5px;
      margin-bottom: 5px;
      padding: 27px 20px 13px 20px;
  
      letter-spacing:2px;
      text-transform: full-width;
  
      background: #083D68;
  
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
       border-top-left-radius: 10px;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-bottom-right-radius: 10px;
      border-bottom-right-radius: 10px;
  
      -moz-box-shadow: inset 4px -4px 13px 0 #333;
      -webkit-box-shadow: inset 4px -4px 13px 0 #333;
      box-shadow: inset 4px -4px 13px 0 #333;
  
  }
  </code></pre>