CODEWITHSUNDEEP
htmlcssfont-size
Kate
Kate

Reputation: 775

Font-Size for Button and Link

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?

Upvotes: 11

Views: 90656

Answers (4)

Ish
Ish

Reputation: 29536

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.

Upvotes: 5

Kobi
Kobi

Reputation: 138017

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

Upvotes: 1

bobince
bobince

Reputation: 536379

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.

Upvotes: 26

brainfck
brainfck

Reputation: 9376

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

Instead you can use for example images.

Upvotes: -5

Related Questions