Font-size: Combination of Percent with Em

The solution that works in all browsers, is to set a default font-size in percent for the <body> element:

HTML file:	Displayed by browser:
<style> body { font-size: 100%; } h1 { font-size: 2.5em; /* 40px/16=2.5em / } h2 { font-size: 1.875em; / 30px/16=1.875em / } p { font-size: 0.75em; / 12px/16=0.75em */ } </style> <body> <h1>Default H1 heading.</h1> <h1 class="demo">H1 heading of 2.5em.</h1> <h2>Default H2 heading.</h2> <h2 class="demo">H2 heading of 1.875em.</h2> <p>This is a default paragraph.</p> <p class="demo">This is a paragraph of 0.75em.</p> </body>	Default H1 heading. H1 heading of 2.5em. Default H2 heading. H2 heading of 1.875em. This is a default paragraph. This is a paragraph of 0.75em.

HTML file:

Displayed by browser:

<body>
<h1>Default H1 heading.</h1>
<h1 class="demo">H1 heading of 2.5em.</h1>
<h2>Default H2 heading.</h2>
<h2 class="demo">H2 heading of 1.875em.</h2>
<p>This is a default paragraph.</p>
<p class="demo">This is a paragraph of 0.75em.</p>
</body>

Default H1 heading.

H1 heading of 2.5em.

Default H2 heading.

H2 heading of 1.875em.

This is a default paragraph.

This is a paragraph of 0.75em.

This code should now work great, showing the same text size in all browsers, and allowing all browsers to zoom or resize the text! That's the theory anyway.