0

I have two bits of text. One is in a paragraph element, the other is text for a submit button input.

enter image description here

enter image description here

Why is the font slightly thicker in the button?

enter image description here

Paragraph CSS (taken from Computed Style in Chrome Developer Tools)

box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: left;
font-family: 'Din Text Pro Regular', Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 16px;
margin-top: 11.199999809265137px;
width: 119px;

Input CSS (taken from Computed Style in Chrome Developer Tools)

-webkit-appearance: none;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-box-shadow: rgba(0, 0, 0, 0.65098) 0px 1px 3px 0px, rgba(97, 232, 203, 0.701961) 0px 1px 0px 0px inset;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(192, 192, 192);
background-image: -webkit-linear-gradient(top, rgb(75, 208, 179), rgb(38, 174, 144));
border-bottom-color: rgb(255, 255, 255);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(255, 255, 255);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(255, 255, 255);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(255, 255, 255);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: none;
border-top-width: 0px;
box-shadow: rgba(0, 0, 0, 0.65098) 0px 1px 3px 0px, rgba(97, 232, 203, 0.701961) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: 'Din Text Pro Regular', Arial, Helvetica, sans-serif;
font-size: 16px;
height: 41px;
letter-spacing: normal;
line-height: 16px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 11px;
text-align: center;
text-indent: 0px;
text-shadow: rgba(24, 97, 81, 0.34902) 0px 1px 0px;
text-transform: none;
vertical-align: baseline;
white-space: pre;
width: 159px;
word-spacing: 0px;
writing-mode: lr-tb;
4
  • 2
    I believe buttons default on some browsers to bold ... try applying font-weight:normal; to the input. Feb 4, 2013 at 17:50
  • 1
    My bet is on the- text-shadow: rgba(24, 97, 81, 0.34902) 0px 1px 0px; Can you post a link to this page? Also I recommend firebug for firefox as a great tool for similar problems. Feb 4, 2013 at 17:50
  • Is the font-family Din Text Pro Regular for the button as well? Feb 4, 2013 at 17:53
  • Are the fonts loaded correctly?
    – Mooseman
    Feb 4, 2013 at 18:30

2 Answers 2

1

I was able to put this at the top of my CSS. It seems to do the trick, at least so far:

button {
-webkit-font-smoothing: antialiased;
}
0

Apparently, Chrome as some kind of bug, in which it displays the fonts thicker depending on the brightness of its color.

More info here: https://code.google.com/p/chromium/issues/detail?id=163369

Edit: Found more related info and fix

Actually, it is a known bug:

I was able to fix this by following this article.

Kinda late, but it may still be usefull to some.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.