Over the last two issues I have explained some the basics of
Dynamic HTML and Cascading style sheets. These two
technical advances to HTML provide the most significant
advances in web page design and use since the first introduction
of the World Wide Web. If you have not had a chance to read
them they are available at: issue37 Design issue38 Design
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
at: issue14top1.htm.
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: http://www.designfactorynet.com/dfi6000/gloss_p.html
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.
"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.
