How to Set Super Thin "Font-Weight" (Less Than 100) in CSS

How to make the thinnest font

you can do this.

you make a typo it's font-family: 'Montserrat', sans-serif; not
font-family:"Montseratt"

body { font-family: 'Montserrat', sans-serif; font-size: 50px;}
.thin {  font-weight: 100;}
.normal {  font-weight: 400;}

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400" rel="stylesheet">
<p class="thin">THIN<p><p class="normal">NORMAL</p>

Web Safe Font Weights -- How to get thinner?

You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.

A bit more info here:

Browser Choice vs Font Rendering | Phinney on Fonts

Big Font Size, Thin Letters

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.

Specifying Style and Weight for Google Fonts

They use regular CSS.

Just use your regular font family like this:

font-family: 'Open Sans', sans-serif;

Now you decide what "weight" the font should have by adding

for semi-bold

font-weight:600;

for bold (700)

font-weight:bold;

for extra bold (800)

font-weight:800;

Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.

Pretty smart :-)

Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.

For example the following link will include both weights 400 and 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

For CSS2

<link href='fonts.googleapis.com/css2?family=Comfortaa:wght@400;700'; rel='stylesheet' type='text/css'>

Why is font-weight by hundreds when the only available values are multiples of 100?

Apparently it derives from the Linotype typeface classification system (Linotype).
Where a 3-number system is used, first numeral describes font weight, second numeral describes font width, third numeral describes position.

There's an interesting article here on some of the history of specifying font weights in print.