CSS Very Thin Font

CSS very thin font?

Google is using their font API and CSS's @font-face

See the following reference in their code:

<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">

Below is the exact definition that "registers" said font:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

Then they simply apply that font to element/s:

h1, h2, h3, h4, blockquote, q, .maia-nav ul {
   font-family: 'open sans',arial,sans-serif;
}

Note: @font-face fonts don't render crisply on downlevel browsers. If you need to support them try - http://cufon.shoqolate.com/

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

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>

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.

Super thin Arial font in CSS?

Did you import the web font?

@import url(http://fonts.googleapis.com/css?family=Raleway);

https://jsfiddle.net/zn3n2gep/

Make narrow characters with CSS

You can't reduce character width, but you can reduce letter-spacing.

span {
 letter-spacing: 0px;
}

---

Related Topics