h1, h2, h3 tags resize different than p tags

Question

I'm trying to resize a text after I change the font size settings on my phone. Here is what I see when the font is at its minimum size:

And here is what I see when the font is at its maximum size:

See how the aspect ratio between the h3 tag and the p tag changes? p tag goes way bigger than h3 does. How should I solve this?

My CSS code is like this:

h3{
   font: normal 26px Khand, Monda, Ubuntu, sans-serif;
  }

p{
  font:normal 18px Carrois Gothic, Ubuntu, sans-serif;
 }

Edit: I have added "text-size-adjust: 130%;" to my h3 and it works, but is not a nice looking solution...

Answer 1

you can try with adding !important code at least: font:18px 'Carrois Gothic', 'Ubuntu', 'sans-serif';important; but isn't a solution.

Because this size's difference coming from the font families. All font apperences aren't identical. Use your browser development tools to inspect your tag to check. You will able to check at Style panel your if your tag's styles are really attributed or not.