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;

}

Crenelation

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.

Somerset

Best solution I've found on this topic. – Gorden

Very nice! Let me kiss you! – Kadiyevka

It may be necessary to include transform-origin if adjusting the scale also moves the element. – Repand

Answer 2

Your Code-Example does not look like Verdana weight 700.

Choosing the right

font-family: 'Verdana'; font-weight:700;

would give the correct result, at least on systems with Verdana installed.

Palestrina

Answer 3

What you are looking for is a condensed version of the font. It's not exactly the same design. https://www.cufonfonts.com/font/verdana-pro-cond

Walkway