CODEWITHSUNDEEP
cssfonts
NiKoLaPrO
NiKoLaPrO

Reputation: 624

How to set super thin "font-weight" (less than 100) in CSS?

I want to make text super thin, less than 

font-weight: 100

Is that possible to do with CSS?

Like this but with helvetica: enter image description here

Upvotes: 13

Views: 17783

Answers (5)

Mohammed Alkebsi
Mohammed Alkebsi

Reputation: 424

Adding an extra stroke to the text makes it lighter than 100! It is not perfect, yet solved my problem.

.element {
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
}

Note: make sure that the white property matches your background or it will just look uglier. By the way, you can make the text bolder than 900 using this same way!

Upvotes: 1

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53588

CSS font weights do not "make fonts thin" (or bold) when dealing with web fonts. For not-loaded-from-url fonts the font-weight value maps from ultra thin to extra bold, but for custom fonts the weight is "whatever the @font-face binding says it should be": they are merely differentiation numbers used when declaring a font family with multiple weights.

The following is a CSS declaration for a web font that uses three weights, but have a close look at font resource vs. font weight:

@font-face {
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
}

@font-face {
  font-family: "Helvetica Neue";
  font-weight: 400;
  src: url(helveticaneue-regular.woff);
}

@font-face {
  font-family: "Helvetica Neue";
  font-weight: 100;
  src: url(helveticaneue-ultrathin.woff);
}

This gives us one CSS-declared font family, with three defined weights (using value other than 100, 400, or 800, will lead to undefined behaviour). Now two of those weights point to the same font resource.

The following code will style text using the ultra-thin font, even though the CSS uses weight 800, which for predefined fonts normally means "pretty damn bold":

<p style="font-family: 'Helvetica Neue'; font-weight:800">This is thin!</p>

So if you want to use a superduper thin font: go for it. But that has nothing to do with the CSS font-weight value, and everything to do with the value you assign it in its @font-face rule, and then use in your font-using-CSS.

Upvotes: 10

Initiator
Initiator

Reputation: 11

Use:

font-weight:"lighter"

And you'll get a similar result.

Upvotes: -4

zer00ne
zer00ne

Reputation: 43880

You can find the font here..: https://www.facebook.com/RITCreative/app/208195102528120/

Instead of hoping for an impossible font-weight to magically become real, use Font Forge to make your own font.

What you probably want is Helvetica Nue which is installed on Macs.

Anyways look at Google fonts and use the Filters: Thickness like what Rob suggested.

enter image description here

Upvotes: 1

Rob
Rob

Reputation: 15160

The weight of the font displayed must be available in the font you have chosen. If the font weight does not exist in that set then you cannot select it with CSS. That is why you need to look at what weights are available in the font you choose. Such things are listed, for example, in Google Fonts but font companies usually list what weights are available, whether they are free or purchased.

For example, Open Sans lists its lightest weight as 300. If you set it to 100, you won't see anything different than if you set it to 300 cause 100 does not exist.

Despite all that, you say you want to set the weight to something less than 100. However, less than 100 is not part of the CSS standard so, no, you cannot do that.

Upvotes: 4

Related Questions