Click Here!
  Web Development, Web design, HTML code, HTML tutorials, Javascripts, DHTML, ASP, Perl, CGI scripts  
YOU ARE HERE: Home : Articles : Pixel verses Point size fonts
Web Hosting  •  Website Tools  •  HTML Tutorials  •  PHP Resources
Pixel verses Point size fonts
By Virtual Mechanics
Despite the great advances in technology that CSS and DHTML provide they are hindered with a lot of baggage. The most obvious is the fact that they were built on top of HTML which for all of its original innovation, was never intended to provide interactive dynamic content. Two-way transmission of interactive information using human readable alphanumeric codes is extremely cumbersome. That is one reason why Microsoft likes to push Active X and Direct X. (Their proprietary nature is another.)

Another form of baggage that DHTML/CSS is hindered with is human dogma. I wrote an article several months ago about how fast your web pages should load. The common dogma measures this in seconds. In my opinion, that is a very superficial way to design a web page. If you are interested, you can read the article here.

When HTML was first developed, the standard way to change font sizes was with the <big> and <small> tags. If you want <big>large text</big> or <big><big>very large text</big></big> simply add these tags at the appropriate locations. Give it a try. They still work.

But just how big is <big>? It is simply bigger than what ever went before.

When the primary motive for having an HTML page was to display articles written by technical specialists, this level of text formatting was fine. As web sites were developed for more general uses especially business and entertainment, this level of formatting simply became inadequate.  

The next advance was with the use of the Font and Font Size tags that can specify text size in absolute numbers. <Font Size="3">This text is smaller</Font<>Font Size="4">than this text</Font>. But how much smaller? Size "3" is generally considered to be equivalent to 12 Point. But what is a Point?

Point - Smallest typographical unit of measurement; 12 points = 1 pica, and 1 point = approximately 1/72 of an Inc. Type is measured in terms of points. From:

Isn't a Pica something from Pokemon?

Point size is a term that was derived from typesetting where a printing press was loaded with standard size characters or type. Typesetting is a technology of the past that has little significance in today's modern printing houses. Although Point size is still a quantifiable term for printing, it never was for web design. The fact is that a 12 point font is going to be bigger or smaller from one computer monitor to another based upon many different variable.

With CSS more advanced font formatting capabilities were introduced. Font formatting and Font size in particular is
significant. In addition to selecting point size fonts it is now possible to select pixel size fonts or screen size fonts that are created relative to the display settings. To use pixel size for example, you can enter: <font style="size:20px;">This text is exactly 20 pixels high</font>. At least it is in theory.

What are the advantages of using Pixel or Screen size fonts instead of Point size? The most significant is design control. A Point size font is a completely unknown design element. Depending on their screen resolution, available fonts and system font size setting, a Point size block of text can occupy almost any amount of screen real estate.  A common problem when using CSS with Point size fonts is caused when the page is designed with small system fonts but viewed on a system with large system fonts selected. This can cause blocks of text to overlap and become unreadable, a problem that I have even seen on some very large professional sites.

The alternative is to design the page with large fonts selected but this can make the blocks of text appear small and isolated on many systems. Other alternatives are to design the web page with a single block of text or to insert the text into Tables. Both solutions can severely restrict design options.

So why do so many Web Design references suggest that Point size fonts be used instead of Pixel size?

I suspect that it is primarily a case of Internet Dogma. "That is the way it was designed to be used and consequently that is the way it should be used"; even though it may be an intolerable handicap for a designer.

When a reason is given it is usually that a web design should not interfere with the personal settings of the visitor. People with visual problems especially, may have their computer set to help them effectively see the text. No one after all, wants to be accused of being inconsiderate to the visually impaired.

Although the sentiment is valid, the issue is whether or not a 125% font size is the correct solution. The fact is that if you are using 8 point fonts they are still likely to be too small for the visually impaired even when large system fonts are being used. There are much better solutions for people with visual problems. An obvious one is to use a larger monitor if possible. If not, the monitor resolution can be set lower. Both solutions provide significant advantages over traditional print media that does not offer either.

The notion that a reader could change the font size in a magazine but still have it fit the page is silly. It would result in overlapping text which would be very difficult to read and almost impossible to design effectively. This is exactly the problem experienced by web designers using Point size fonts.

So what if a small Pixel size fonts is used and a visually impaired viewer only has a small monitor, does not know how to change the system resolution and does not have a magnifying glass? The answer can be expressed in the form of another question. What if a designer is inclined to use bright blue text on a bright red background? Is the best solution to only allow monochrome displays? Both are examples of a bad design. The job of a good designer is to ensure that every potential visitor's needs are accounted for.  The best way to do that is to provide a design environment that does not impose cumbersome design restrictions.

Point Size fonts work well with simple web pages. With advanced web sites that take full advantage of CSS and Dynamic HTML, point size fonts can create unanticipated problems and interfere with the objectives of the designer. Pixel or Screen size fonts provide much better control for the designer provided they remain aware of their visitors needs.

Source: "IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.

To subscribe send an email to or visit for subscription information and a list of past articles.

More Articles


  " TARGET="_blank">...





More News  
[an error occurred while processing this directive]

Join our newsletter!
Join our eNewsletter
for software updates,
freebies and more!


Registered Worldwide
...more statistics

Click Here!


  Articles are submitted to EDN and licensed from various content sites.
  To report abuse, copyright issues, article removals, please contact [violations (at@)]

  Copyright © Evrsoft Developer Network. Privacy policy - Link to Us

Contact Evrsoft