Chrome font size

HTML & CSS
1

I’m having a slight issue with chrome (or firefox?) displaying fonts with noticeably different sizes.

For instance, if I use p { font-size:12px }, then it should be the same size in any browser, right? Wrong. Even though default font size is set to 16pt in both browsers, Chrome displays the text noticeably smaller than Firefox. I’d say it appears to be at least 2 sizes smaller. :confused:

It’s not a issue with zoom or any issue like that either.

2

Could you post an example for us to test?

3

That happens. Different fonts are different sizes.

Compare the following fonts, all at the same nominal size:
Verdana - Calibri - Georgia - Times New Roman

The solution is to set a font-stack that lists your preferred font, then common fonts that most closely match your preferred font, in terms of style, shape, size and x-height. That way, you will increase the chance of people seeing it more-or-less as you intended.

4

Both browsers are at 100% zoom and both browsers have their minimum font size set to none. The only difference is the default font. Chrome uses Bitstream Charter and Firefox uses an un-named “serif” font. For whatever reason, Bitstream Charter is consistently and noticeably smaller than FF’s serif, regardless of what point size is being used.

5

I know it sounds silly, but have you double-checked that both browsers are set to 100% zoom, and that you haven’t set a larger minimum size in one of them?

6

12 px is probably too small for a font size. Those browsers are protecting users from mindless coders who use tinny font sizes on their web sites by implementing a minimum font size, which users can adjust, if they want, cf. Tools > Options > Content > Advanced on firefox.

7

Well, if you really need one…


<div class="video-timecode">
  <span class="video-timecode-current">00:00</span> / <span class="video-timecode-total">00:00</span>
</div>



.video-timecode {
  position:absolute;
  top:6px;
  left:100px;
  height:27px;
  color: gray;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
  font-size: 12px;
  cursor: default;
}

.video-timecode-current {
  color: white;
}

And here is the rendered results.

Firefox:

Chrome:

Though this is just an example of something I’m currently working on, these results can be seen in all text. Chrome simply has smaller fonts for everything.

Edit: Ok, come to find out this only happens with the Linux version of Chrome, which is still an issue.