Text becomes unreadable small on a large display

Question

 <div id='divMenuT'>
    <div class='m1'><a href="index.php">Home</a></div>
    <div class='m1'>Archive</div>
    <div class='m1'>Cinema</div>
    <div class='m1'>Hora</div>
  </div>

css

#divMenuT{
    font-size: 14px;
}  

My monitor is 1024x768px. I tested the page on this site

It seems ok if tested size is 1024x768 or smaller, but if tested size is larger (for example 1660x1050) text on top menu becomes to small and unreadable .

I tried with percentages and viewport font size - without result. The menu is always unreadable on larger screen then 1024x768.

So, how can I keep text readable, on all monitor sizes.

btw, if text becomes smaller on a larger display, why text doesn't become larger on a small display ?

You can see my live test page here

Answer 1

Try using em for specifying the font size

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

Link to this