3

I m making a web site from photoshop sketch. And I have a text wit

font-family Segoe Ui and font-style: Light. In photoshop It looks like this:enter image description here

So how to set this in css to p element?

p {

}
Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
user2950593
  • 9,233
  • 15
  • 67
  • 131
  • `font-weight:lighter` - but only if the font supports light. This was one google-search to go – Fuzzyma Apr 19 '14 at 17:07
  • Segoe UI is a font copyrighted by Microsoft, so unless you have a licence to do so, you can't use this as a Web Font. – adaam Apr 19 '14 at 17:07
  • 1
    You can use font-weight: lighter – prava Apr 19 '14 at 17:08
  • @adaam: the OP does not mention "webfont". Defining it in a CSS is okay; and it will only be used when the *browser* can find it anywhere. – Jongware Apr 19 '14 at 17:41

2 Answers2

11

Updated: Table on MDN

Value Common weight name

  • 100 Thin (Hairline)
  • 200 Extra Light (Ultra Light)
  • 300 Light
  • 400 Normal
  • 500 Medium
  • 600 Semi Bold (Demi Bold)
  • 700 Bold
  • 800 Extra Bold (Ultra Bold)
  • 900 Black (Heavy)

Old:

  • 100 Extra Light or Ultra Light
  • 200 Light or Thin
  • 300 Book or Demi
  • 400 Normal or Regular
  • 500 Medium
  • 600 Semibold, Demibold
  • 700 Bold
  • 800 Black, Extra Bold or Heavy
  • 900 Extra Black, Fat, Poster or Ultra Black
Kol007
  • 273
  • 3
  • 13
10

Use font-weight which takes values like:

p {
    font-weight: 100; /* 100, 200, 300, ... 900, normal, bold, bolder, lighter */
}

See the documentation on W3Schools.

alexia
  • 14,440
  • 8
  • 42
  • 52
Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
  • 10
    Please do not call W3Schools "the W3C". It is in no way affiliated with the W3C, and generally not recommended as a source, although it isn't that horrible anymore. See http://www.w3fools.com. – alexia Jun 21 '17 at 13:27