webfonts - setting character width with css

Question

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?

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 t to have 30px font size (height) and double the standard width..

Wide Image:

Standard Logo with code:

Here is the current formatting for the logo:

.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;

}

Answer 1

What you're looking for is transform:scale(x, y). For example:

-webkit-transform:scale(2.0, 1.0);
-moz-transform:scale(2.0, 1.0);
-ms-transform:scale(2.0, 1.0);
-o-transform:scale(2.0, 1.0);
transform:scale(2.0,1.0);

You kind of have to specify it for all the browsers, at least for now.

Edit:

I forgot to link my jsfiddle.