Font-Size for Button and Link

Question

I tried this simple html:

TEST FONT SIZE</br>
<input type="button" value="test bytton" style="font-size:20px">
<a style="font-size:20px">test link</a>

and found out that the font size of this button looks bigger than the font size of the link in spite of style. Does anybody know why style works differently for link and for button, and how to make them looks like the same?

Answer 1

The font-size is the same. But it looks different because the default page font is different from the default input-field font. Set the font-family on both elements the same and they'll look the same.

I usually do:

body, input, button, select, option, textarea {
    font-family: ...; /* whatever font */
}
body {
    font-size: x%; /* whatever base font size I want */
}
input, button, select, option, textarea {
    font-size: 100%;
}

to get consistent fonts over the page and form fields.

Answer 2

Had the same problem in Chrome, later figured out that key cause was

body {
    -webkit-font-smoothing: antialiased
}

changing this to

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

fixed it.

Answer 3

Looks the same to me, tested on Firefox, IE6 and Chrome: http://jsbin.com/oveze
Please keep in mind:

• This depends on the browser and its defaults, and may also be different depending on the operating system.
• Very often there's a different font for buttons and input fields. Set it too.
• Anti-aliasing or ClearType can cause a slight difference when you don't have the same colors (background and font).

Answer 4

You should not use much CSS for buttons, because their display depends on the users operating system.

Instead you can use for example images.