Big Font Size, Thin Letters

Question

Let's say I use font-size:30px; and font-family:Verdana;.

I need those letters to be big, but yet thin, so I tried font-weight:lighter;.

Yet nothing changes, some fonts will become smaller, some wont be affected.

How can I create big but thin letters? Is there a way in CSS, or these are specific fonts?

Answer 1

This is the closest thing I came up with.

div{
    font-family:Verdana;
    font-size:30px;
    font-weight:100;
    -webkit-text-stroke-color: rgb(255,255,255);
    -webkit-text-stroke-width: 1px;
    -webkit-font-smoothing: antialiased;
}

Problems:
1. Only works with webkit browsers (Safari,Chrome)
2. If the background behind the text isn't a solid color then it will be visible that it is a text stroke.
http://jsfiddle.net/dru87/

Answer 2

To achieve a skinnier version of Verdana, due to the font not supporting certain weights, you will have to host your own version of the font, or use another font already hosted to achieve your look.

Some fonts do not support lighter/heavier versions of themselves - if they do, they may not align with the CSS numerical scale (as you pointed out).

From here.

Because so many professional quality web fonts come in a variety of weights, it now makes much more sense to use the numerical scale than it did when we only had to deal with ‘normal’ (400) and ‘bold’ (600). Typically, a family’s weights can be mapped to these values:

100: Ultra Light

200: Thin

300: Light

400: Regular

500: Semi Bold

600: Bold

700: Extra Bold

800: Heavy

900: Ultra Heavy

Note the keyword, there: typically. The reality, sadly, is that many fonts just don’t conform to this pattern, like when a family has a multitude of weights, or where their own definitions don’t necessarily conform to the standard scale.

So, long story short, you will have to either host a "thinner" version of the font (one you either made/downloaded), or use a different font.

IMO Tahoma, Hedley or Geneva are similar-looking fonts, however these are not freely available - you can look on Google fonts for some, that both you and @minitech pointed out.

Answer 3

Choose a thin font and apply bigtext.js/fittext.js or slabtext.js