How to make the bold font getting thin, using CSS or Javascript or jQuery?

Question

If I am using a font and don't have the bold version, I could use the tag text-shadow, adding a contour to make the thin font bolder.

But I have only the bold font, and I want to make it thinner. I don't know what CSS or Javascript or jQuery script to use.

Is it possible to make a bold font thinner using CSS, Javascript or jQuery? How?

score 1 · Answer 1 · answered Nov 26 '12 at 07:05

You cannot make a font thinner. Even making it bolder with text-shadow is not real: it produces a distorted presentation of the font, not a bolder font.

So you should select your font family according to your intentions of using different typefaces (including different weights) and the availability of typefaces in each font family.

Browsers could implement font-weight values smaller than 400 in the same manner as some browsers implement some values larger than 400 when no bold typeface is available, namely by algorithmically changing the widths thicker. But no browser seems to do that.

Ah, I understood, what a pity. Thank you a lot for your answer! — , Nov 26 '12 at 07:10

Alexxio · Answer 2 · 2013-04-20T00:18:05.570

0

Though late
To make font thinner, add

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic">

in the head section then style your text

style = "font-family: Lato;
          font-weight:100 or 200 or 300... (according to the thinness you want);
          font-size: ...;"

With font lato, you can achieve the thickness if font you want and its tested in all browsers.
Check these fonts here
It worked perfectly for me.

edited Apr 20 '13 at 00:18

answered Apr 20 '13 at 00:12

Alexxio

1,091
3
16
38

[Some of these fonts](http://www.google.com/fonts/specimen/Lato) look a bit wonky in my Chrome browser. – Robert Harvey Apr 20 '13 at 00:18
@Alex.Kasina, yes, I know it, but I mean if one fonts family doesn't have one thinner or bolder font or **the fonts family has _only one_ bold font OR _one_ thinner font**, I want to make it thinner or bolder. – Apr 20 '13 at 02:29

score 0 · Answer 3 · answered Nov 29 '14 at 14:04

While browsers can generate bold versions, I am not aware they can do the reverse process. To a very rough approximation, you can generate text that is both lighter and narrower using transform:

<div style="transform: scaleX(0.8);transform-origin:center left">This might very well appear lighter./div>

but that is a very crude hack at best and requires eyeballing the scale value for every font.

score -1 · Answer 4 · answered Nov 26 '12 at 03:43

-1

Do you mean the CSS font-weight Property? You can refer how to use the property here. http://www.w3schools.com/cssref/pr_font_weight.asp

answered Nov 26 '12 at 03:43

Kleenestar

769
4
4

1

Yes, but this "font-weight" doesn't make the bold font getting lighter or thin. – Nov 26 '12 at 04:01

How to make the bold font getting thin, using CSS or Javascript or jQuery?

4 Answers4