Font-Size for Button and Link

Question

I tried this simple html:

TEST FONT SIZE




        

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

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

Instead you can use for example images.

Answer 4

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).