Font Size Inconsistency

  • I have a bit of a font size problem that I don’t understand.

    I’m trying to size my content font to a clean looking default size, but it appears in drastically different sizes on my two different computers, one mac, one pc, in their respective firefox browsers. (On the pc, things are small and squashed. On the mac, things look fine, since that’s where I originally set the CSS).

    The pc firefox has imported the relevant IE settings, but both mac and pc are supposedly set to a default 16pt font. My CSS has sized this particular content only with % values, as far as I can tell.

    Any ideas why the fonts look different on my computer??? Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter neoptolemus

    (@neoptolemus)

    Another Version of the problem:

    When I set the body’s font to 16px, and the p’s font (which controls the content’s text size) to 100%, the fonts are different size across browsers.

    Here’s my CSS for any interested parties…

    https://www.commentarius.org/wordpress/wp-content/themes/classic-pyrrhus/style.css

    Try not using percentage values for font-size. I’ve had the best cross-browser results using px for font sizes.

    Actually that is incorrect CSS.

    You should use either % or em values for all fonts. The difference you are seeing could well be the way the individual browser is configured to display code. Most (FF certainly – i don’t use others) have the option to set a minimum font size and name – whether serif or sans-serif – independent of a pages CSS. If a browser is set to display a minimum font size of 12 = no matter what size your CSS says to display, your browser will display it as 12px. By using % or em values your browser will display your browsers selected font size at the correct percentage of that and render it as you wanted it.

    Actually that is incorrect CSS.

    It is valid css, but is not encouraged because IE browsers won’t resize fixed width fonts. However, IE7 now has a page zoom feature. Using a relative font size requires a parent font size and some extra cross browser css.

    More info on font sizes:

    https://www.maxdesign.com.au/presentation/relative/

    Yes – it is valid CSS, for that part, but for the reasons i stated it is frowned upon in CSS circles. You are correct, though, that it IS valid CSS.

    It’s also true that users can use the scrollwheel+CTRL buttons on their mouse – if they have one – to regulate text view, but that is really a workaround that many either are unfamiliar with, or is something that really should not be used to fix incorrect code.

    But note that your link DOES confirm my position on font sizing, though:)

    Thanks for the responses.

    For the font in question, I think I managed not to mix controlling it with ems and %s – ems are used elsewhere for the template’s standard font.

    Even when I set font with just a fixed px size (e.g. 16px), the font seemed to be different sizes on mac and pc machines, even when using firefox for a browser on both machines (on my pc machine, firefox had imported my IE settings, on my mac machine, firefox had likely imported safari settings – but all had default text size of 16). I’m a little confused if that is normal or not. Is it?

    I eventually gave up trying to “fix” the inconsistency, and chose a font where the difference in size was minimal (but not zero) – Times New Roman. I’ll probably just stick with that unless someone has a suggestion. Thanks again.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Font Size Inconsistency’ is closed to new replies.