Issue with applying light open sans font in my css

Question

I have a big problem in css with the font Open Sans

The issue is that I wanna see a phrase in white color with (light) open sans font, instead it appears bold only when using white color ! However when I write the same phrase in black or other color it appears light. Any ideas ?

here is the code in this link :

http://shrib.com/ILjxuPtM

Test it please, and tell me what's wrong.

I would suggest you using jsfiddle, here is your code on it http://jsfiddle.net/VS2a6/ — Kyrbi, Mar 21 '13 at 18:22
I don't see any difference between two http://jsfiddle.net/j83Ev/ — Mr. Alien, Mar 21 '13 at 18:22
there is a big difference, see the black is lighter than the white — Hamza Zikoo, Mar 21 '13 at 18:26
Please check the answer at http://stackoverflow.com/questions/13360061/font-weight-over-a-font-face-not-working. I had the same issue and it worked. — , May 26 '13 at 09:27

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Here is an article about font rendering.

CSS color is another factor. Varying contrast between text color and background color can significantly change how type looks. Lower contrast means that anti-aliasing appears more subtle — the graded steps from foreground (type color) to background are less dramatic.

Light-on-dark text tends to look thicker than dark-on-light, so lower contrast makes an even bigger difference in these cases.

I guess you can simply use the font-weight property to adjust the font.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 21 '13 at 18:56

bukka

4,973
3
19
21

Thank you for your answer, I already used the font-weight 300 which is the smalest one, but still no results :s – Hamza Zikoo Mar 21 '13 at 20:25

score 0 · Answer 2 · answered Jul 12 '17 at 10:33

Anti-aliasing on Macs makes light text in Open Sans on a dark background appear bolder. You can adjust the font-smoothing options to something else than sub-pixel to avoid this.

I used Photoshop to stack a layer of dark text on a white background at 50% opacity on top of a layer with the same text, but light on a dark background. As you can see, there is a white fringe around the dark text, which should not be there considering they are equally bold.

Issue with applying light open sans font in my css

2 Answers2