2

I'm having an issue comparing font sizes between pages on my layout. I have the font set on the body with font-size: 100%; and on my paragraph tags with font-size: 1em;.

I have a two column page set with CSS columns and a single column layout. The font is rendering larger on the single column page. It's also rendering differently with font-size: .75em; in the footer and on a main section of my site.

I've determined that it's Chrome only and appearing to cause the issue on the Nexus 7. The issue is a non issue on Chrome in an iPad 3.

Does anyone have any experience with this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Dan
  • 3,338
  • 5
  • 36
  • 58

1 Answers1

1

These are 2 different OS, this is usually regular to have these irregularities between devices. EM is based on the default font-size, if haven't declared one, the os depending on the screen resolution will declare one. font-size:100% won't do anything, you should declare a constant font-size i.e font-size:12px in the body.

Then you should have consistency or close to it.

Hamed Al-Khabaz
  • 680
  • 4
  • 7