Inconsistent font size rendering issue on Chrome

Question

I am having an css issue on my site. The font size is not consistent across all pages. The difference is one version of bigger font size and one version of a regular small font size. The small font size is the one I prefer. If the page is showing the content in big font, it will change it back to a smaller one after reload the page for a couple of times, it also changes back to the smaller one right away if you right click and select inspect element. Thus, I am not sure how can I ping point the issue. Here are the screenshots, one with the big font and one with the small font, and again the small font is the one I prefer.

the small font

By default in the 1st run it is showing your desired font i.e. the 2nd one. Cant spot the problem. — Rajesh Paul, Dec 30 '13 at 18:35
I know browsers print fonts different ways, but your case is so extreme it looks like you have zoom set in your browser. Perhaps thats the problem. — Havenard, Dec 30 '13 at 18:39
@Havenard, Your presumption is also part of what I thought. But the size of: `CRUD: create, read, update and delete in sqlite with Java` is fixed(same) in both. Hence the `zoom` issue is not valid here. — Rajesh Paul, Dec 30 '13 at 18:44
It seems like it's only happening on chrome, haven't see the same on firefox.... — s-hunter, Dec 30 '13 at 18:47

score 5 · Accepted Answer · edited May 23 '17 at 12:32

body { font-size: 1.6rem;} might be your issue... you can axe that from your style.css and it should be more consistent. It looks like chrome might not like rem on the body as can be seen in the linked question

removing/changing the bad line from the following class definition in style.css should fix you up

body, button, input, select, textarea {
   color: #404040;
   font-family: sans-serif;
   font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.5;
}

Inconsistent font size rendering issue on Chrome

1 Answers1

Linked