Menu
When creating web pages how do we achieve a consistent font size across browsers. I have used something like "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" in my CSS, but the text looks different in Firefox, IE, Google Chrome and Safari (and this is not even on different platforms). Basically on the same machine, that is running Windows Vista, I get a different look and feel under different browsers.
How can this be fixed so that the size of text appears same on all the different browsers.
598
If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.
The default font size in all browsers tends to be approximately 16 pixels. A common practice is to set the root font-size to 62.5%, which translates the default 16px to approximately 10px.
Font size is important! When sitting comfortably, most people are about 50 to 58 cm away from their screen (71cm is the recommended distance), so you want them to be able to read your text without straining their eyes. Anything other than 16px will present a problem.
16px – absolute minimum for text-heavy pages. 18px – a better font size to start with. You're not printing out a single-spaced Word document; you're writing for people sitting a couple feet from their decade-old monitors. 20px+ – may feel awkwardly large at first, but is always worth trying out in your design app.
You will want to use a CSS Reset to attempt to get consistent behavior across all browsers.
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
