Changing appearance of text using CSS

Question

I am trying to figure out how the Google search box adjusts the Arial font to look the way it does. What I mean by that is, when I try to use Arial on my site at the same font size it seems much thicker then in Google's search box. As far as I can tell there is no way to adjust the font-weight of Arial on Windows. So I was wondering how they get arial to display so thin.

I would like to do this via CSS if possible but other means are ok as well.

Is that what you are using? font-family: Arial, sans-serif; font-size: 13px; — broinjc
– broinjc, Commented Mar 20, 2014 at 17:38
have you tried opensans? google.com/fonts/specimen/Open+Sans — user3123529
– user3123529, Commented Mar 20, 2014 at 17:44
You should be able to (on Chrome) use the developer tools to inspect and see exactly what CSS properties Google has set on their search box. — Whymarrh
– Whymarrh, Commented Mar 20, 2014 at 17:45
@Gab you got it thanks for the info. If you'd like to answer the question i'll be happy to accept it. And thanks every one else for the help. — Kahless
– Kahless, Commented Mar 20, 2014 at 17:48

Gab · Accepted Answer · 2014-03-20 17:48:29Z

2

Is this what you are looking for?

.google-searchbox-arial{
    font-family: arial, sans-serif;
    font-kerning: auto;
    font-size: 17px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #222;
}

answered Mar 20, 2014 at 17:48

Gab

5,8548 gold badges40 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ron van der Heijden Over a year ago

Also Google uses color: #222;. So it look "thinner"

Collectives™ on Stack Overflow

Changing appearance of text using CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related