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

Question

I want to make text super thin, less than

font-weight: 100

Is that possible to do with CSS?

Like this but with helvetica:

Answer 1

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.

Answer 2

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.