Font Sizes

In some web-authoring newsgroups there is frequently debate about how an author should set, or assign, font sizes in web pages. Here is a very small sample to illustrate what most Internet Explorer users will see when you use fixed pixel (or point) sizing. Please view with IE and set different text sizes. On your menu, that is View > Text Size > Larger / Smaller / etc, and note what (doesn't) happen in the blue-bordered box. If you have a capable browser, you may have to disable its minimum font size to see the effects demonstrated here.

This column has the text size set at 100% and you will be able to adjust it to a suitable size. 100% is your default size. CSS: body { font-size: 100%; }

Volutpat duis minim tation eum molestie dolor ea ut. Te dolor wisi. Accumsan eum et consectetuer illum eu exerci nisl in euismod vulputate. Nulla duis, in vulputate, minim odio ad, qui diam nulla at qui. Esse quis laoreet sed, ut feugait molestie consequat iusto, in nostrud zzril tincidunt consequat et zzril feugait ullamcorper erat euismod. Accumsan facilisis dolore, lobortis blandit esse dignissim nisl illum vel ad vel lorem luptatum at dolore iusto et. Veniam, delenit elit nibh exerci delenit ut duis et ut nulla suscipit autem ut, quis. Ea dolore ut nonummy, consequat. Diam te commodo iriure qui magna enim. Lorem lorem ea odio accumsan ea, commodo.

This column has the text size hard-coded at 12px ( and IE 6 or less users will NOT be able to change it, unless they override for all websites ).

Volutpat duis minim tation eum molestie dolor ea ut. Te dolor wisi. Accumsan eum et consectetuer illum eu exerci nisl in euismod vulputate. Nulla duis, in vulputate, minim odio ad, qui diam nulla at qui. Esse quis laoreet sed, ut feugait molestie consequat iusto, in nostrud zzril tincidunt consequat et zzril feugait ullamcorper erat euismod.

This column has the text size hard-coded at 10pt (as suggested by 'richard') ...

Volutpat duis minim tation eum molestie dolor ea ut. Te dolor wisi. Accumsan eum et consectetuer illum eu exerci nisl in euismod vulputate. Nulla duis, in vulputate, minim odio ad, qui diam nulla at qui. Esse quis laoreet sed, ut feugait molestie consequat iusto, in nostrud zzril tincidunt ...

 

What to use in your style sheet

Here is a small sample of how you can assign flexible font sizing in your own CSS style sheet:


body { font-size: 100%; }
h1   { font-size: 175%; }       /* Adjust heading sizes as appropriate */
h2   { font-size: 150%; }
h3   { font-size: 135%; }
h4   { font-size: 125%; }
.legalese { font-size: 85%; }   /* Footers and the "fine print" */

My recommendation for sans-serif and serif fonts is:


font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-family: Georgia, Times, "Times New Roman", serif;

... IE 6.0 has problems in displaying diacritics (characters with a dot-below the alphabet) with "Trebuchet MS". I prefer Tahoma over Trebuchet for that reason. I would love to use Trebuchet MS on my webpage, if Uncle Gates insists IE 6.0 to support the diacritics.

— Animesh K, Usenet

..so for sans-serif fonts, try this if you use diacritics:


font-family: Tahoma, Helvetica, Arial, sans-serif;

Verdana

Here is another quick example of a common problem.

This box uses the Verdana font. It is hard-coded at 10px, which is a mistake made by many authors because Verdana is too large. Seeing this, they choose a smaller size. The trouble occurs when a visitor does not have this font, and if using IE, cannot resize it to something comfortable for the eye to read. The result is commonly called "Microfonts" or flyspecks.

If you see a monospace font in this box, you do not have Verdana installed on your computer.

To give you an example of the result, the font styling using Verdana has been removed from this paragraph. You will see your browser's default font here. It probably is much smaller and not legible because it is still using a size of 10px.

Here is a link to the popular page on why you should not use Verdana:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Mr. Poley has a lot of good information at his web site, including these pages on flexible design.
http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

And here is a page describing the problems of using an absurd fontsizing method known as "clagnut" (for which I will not bother to give a link).
http://www.bergamotus.ws/misc/sensible-css-text-sizing.html

Generally speaking, anyone who promotes the use of body font-size less than 100% is highly suspicious. Anyone condoning the use of px or pt for body font-size is to be ignored completely. Go from there.

— Bergamot, 17Apr2008, c.i.w.a.s
Press your Back Button or Alt-LeftArrow to return to the HTML pages table of contents.
Ubuntu Logo



Copyright © 1997-2024 Tekrider.net. All rights reserved.
Contact me if you have a comment about anything.
It's Thursday the 28th of March at 13:40 in my neighborhood.