General HTML/Web Design Programming Q`s/Font Size help


QUESTION: Can you help me with understanding one thing about Font Size?

I know Web Browsers Display Text at a Font Size of 11. or 12. by Default.

So if I use this code

I know my Text will have no change and it will be Displayed at the Browsers Default.

But if I use this code

Will my Text not be Displayed Two times bigger then the Browsers Default?

This is what I think from all I read.

ANSWER: Robert - if you declare font-size 200%, this means that the font for this particular text will be 200% larger than the default font on your webpage.

In the end, you can not determine how someone will view text - on all devices.

This is why we have Zoom in ad Zoom out and browser zoom levels.

You can determine the relative difference in size on your web page.

Heading 1 can be 150% larger than your default font
Heading 2 can be 125% larger than your default font


Perhaps the following will be helpful

You will see over and over again.

Percentages   refer to the parent element's font size  (of your page)

Happy 4th

---------- FOLLOW-UP ----------

QUESTION: When I type my Title on my Page on the Body of the Page I do use
<H1> Tags.

But all the Font Text I type on the Body of the Page I use this
<p style=”font-family:arial; font-size:200%”>

Because I know Web Browers Display Text at 12 or 12 Font Size.  And I thought it will make my Text Two times bigger then the Web Browser Default Font Size.

This is what I ment to say.

Am I right on this?

Copy the following code into a notepad window, save the file as font.html .
Go to whereever you saved this file and open it, it will open in your browser window.

Now - edit the numbers, one at a time. Save the file - switch to this browser window and "Refresh" or F5.

You will see what happens and how this text looks using different parameters.  I will tell you if you make the text too large your viewers will get annoyed so double check before you publish.

<!DOCTYPE html>
body {
   font-size: 200%;

h1 {
   font-size: 2.5em;

h2 {
   font-size: 1.875em;

p {
   font-size: 0.875em;

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>


General HTML/Web Design Programming Q`s

All Answers

Answers by Expert:

Ask Experts


Nancy Janyszeski


I can help with basic HTML questions and web development concepts. I do not write JavaScript, but can help with the concept of using and where to find it.


Experience in the area.I am Microsoft Office User Specialist (MOUS) Master Certified and was certified as a MOUS Authorized Instructor. Instructional design and test writer for Skills Advantage LLC,, Test Publisher and E-learning Solutions Provider

Courseware, intro and advanced HTML

Microsoft MOUS certified, ICDL certified

Past/Present Clients
Vocational Schools

©2016 All rights reserved.