CODEWITHSUNDEEP
css
pethel
pethel

Reputation: 5537

Creating really bold text with css

Is there any way to make my font bolder then my examples below? I have tried increasing font-weight from 900 to 1500 but I don't see any difference. 

#step-1 div {
    font-weight: bolder;
    font-weight: 900;
}

Upvotes: 4

Views: 6880

Answers (4)

Antony
Antony

Reputation: 15106

Use text-shadow to make it look bolder.

.really-bold {
  text-shadow: -1px 0, 0 1px, 1px 0, 0 -1px, -1px -1px, 1px 1px, -1px 1px, 1px -1px;
}


body {
  font-family: Arial;
  font-weight: 900;
  font-size: 40px;
}

.really-bold {
  text-shadow: -1px 0, 0 1px, 1px 0, 0 -1px, -1px -1px, 1px 1px, -1px 1px, 1px -1px;
}
<div class="normal">SAMPLE TEXT</div>
<div class="really-bold">SAMPLE TEXT</div>

Upvotes: 8

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Setting font-weight means asking for a typeface of the given weight. It is not expected to make browsers artificially bold characters, though such things may happen for font-weight: bold, when a bold typeface is not available.

So the way to use something bolder than bold is to find a font with a suitable typeface and use it. This in effect means that you would need to use a downloadable font (web font, @font-face), since fonts commonly available in people’s computers do not have such typefaces.

For Arial in particular, there’s Arial Black, but many browsers treat it as a separate font family rather than a heavy typeface of the Arial family. Therefore, the best odds of getting it is to declare font-family: Arial Black; font-weight: normal.

Using text-shadow with the color of the text or other tricks never makes the font any bolder; it just creates an illusion of boldness, and it is typographically a no-no.

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

You can use only one of the following properties: 

font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900

font-weight: inherit

Upvotes: 3

Linus Caldwell
Linus Caldwell

Reputation: 11058

No. font-weight: 900 is the maximum. You could use another font.

Upvotes: 3

Related Questions