CODEWITHSUNDEEP
cssgoogle-chromefirefoxfontscross-browser
Zach Smith
Zach Smith

Reputation: 5674

how to fix different font size shown for input fields in chrome and firefox

i am noticing in my web app that the same input form font size, currently set to 17px, reads smaller on chrome compared to firefox. i've attached a screenshot.

enter image description here

is there a more elegant method to resolve this than simply using 

/*chrome*/
input {
 font-size:17px;
}
/*firefox*/
@-moz-document url-prefix() {
   input {
     font-size:15px;/*reduce font size to match what is seen in chrome*/
   }
}

Upvotes: 2

Views: 1869

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28553

I don't know what font you're using (or platform (Mac vs Win makes a difference too) , but some browsers render fonts using CLEARTYPE subpixel rendering, some use QUARTZ subpixel rendering (making appearance differ), then others use standard antialias-ing.

A good way around this is to use font-smoothing css in your html or body css:

html {
    font-family: /*yourfont*/;
    -webkit-font-smoothing: antialiased;
}

Read more about it and see more examples on Max Voltar's website

Also note that using em is preferable to using px for measuring your font. Large font sizes are especially harmed by pixelation if you don't use font smoothing, so in order to keep accessible text especially, it's better to use ems (this way you can still use large type sizes).

Upvotes: 2

Related Questions