CODEWITHSUNDEEP
cssfonts
Ali Bassam
Ali Bassam

Reputation: 9959

Big Font Size, Thin Letters

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

enter image description here

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?

Upvotes: 6

Views: 34972

Answers (6)

amit sharma
amit sharma

Reputation: 1

Step1: Include in to load fonts from Google

https://fonts.googleapis.com/css?family=Lato:100italic' rel='stylesheet' type='text/css'> https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

Step2: Add following css properties .text{ font-family: Lato, sans-serif;

font-weight: 100;

font-size: 7em; }

Done!

will work definitely

For more info visit http://tobiasahlin.com/typesource/01-elements-of-html-and-css/

Upvotes: 0

eggy
eggy

Reputation: 2844

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.

Upvotes: 3

Sara Farooqui
Sara Farooqui

Reputation: 41

Not all fonts supports all widths. If you are looking for some good thin fonts. You can take a look at these thin google fonts list. They are free and easy to implement.

Upvotes: 1

Rahul Shah
Rahul Shah

Reputation: 1407

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

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

The use of font-weight means asking for different-weight typefaces (specific fonts) from the font-family. The Verdana font family has no typeface lighter than normal, so you get just normal. This applies to most fonts that you can normally use on web pages.

In Google Web Fonts, for example, you can find many font families with typefaces lighter than normal, e.g. Source Sans Pro has weights 200 and 300.

Note: The lightness of a typeface is relative to the font. What is light (200) in font family might correspond to what is normal (400) in another font family.

Upvotes: 0

npage
npage

Reputation: 1288

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/

Upvotes: 5

Related Questions