Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I set 'semi-bold' font via CSS? Font-weight of 600 doesn't make it look like the semi-bold I see in my Photoshop file

Tags:

css

fonts

I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?

like image 704
Simon Suh Avatar asked Jan 05 '12 00:01

Simon Suh


People also ask

How do you make a semi bold in CSS?

600 – Semi Bold (Demi Bold) 700 – Bold. 800 – Extra Bold (Ultra Bold) 900 – Black (Heavy)

How do you make font less thick in CSS?

You can use smaller font size and make it taller via CSS transform property: font-size: 1.5em; transform: scale(1, 1.5);


2 Answers

In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.

If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.

For example you would define semi-bold like this:

font-weight: 600; 

Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.

like image 118
Jesús Carrera Avatar answered Nov 28 '22 22:11

Jesús Carrera


The practical way is setting font-family to a value that is the specific name of the semibold version, such as

font-family: "Myriad pro Semibold" 

if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)

In this approach, font-weight is not needed (and probably better not set).

Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.

Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.

like image 37
Jukka K. Korpela Avatar answered Nov 28 '22 21:11

Jukka K. Korpela