[Home]Specify fonts

HomePage | RecentChanges | Preferences | Newbie Help

HTML Basics -:- CSS FAQs

In your head -

   <style type="text/css">
   body {font-family: arial;}

  1. Specify the font-size in PX, or PT if you are confident in pixel/point/resolution calculations .
  2. Set up a FAQ on your site handle complaints about your arrogant assumption that you know better than the visitor what size font he or she prefers... or NEEDS.
  3. As the complaints pile up and your reputation as a designer goes down the tubes, spend months in quiet contemplation about things you can control, things you can't, and how to allow for the vagaries and variations of life.
  4. Vow to build sites that do not depend upon specific font sizes and browser configurations and screen resolutions to their Designated Job.
  5. Take up fishing instead of web design, so you can tell tales about sizes that have nothing to do with reality.

Spooky says --

In the CSS rule

 p.oh {font: bold small arial}

"font" is shorthand. It can be used for "font-style", "font-family" and "font-size" (or some sick, twisted and evil combination thereof).

I don't know how well it is supported compared to the longhand. I've always found it easier (so I can find font info quicker) to display what you have above as:

 p.oh {
	color: #f60;
	background-color: #fff;
	font-size: small;
	font-family: arial,helvetica,sans-serif;

Note how I've shortened "#ff6600" to "#f60;". In CSS, if the RR, GG, and BB are identical (that is, R1 is the same as R2, G1 the same as G2, and so on), you can shorten it so that you are no longer using RRGGBB but rather RGB.

Also note that for the "font-family" (font face in HTML3.2), one doesn't specify sizes. That's for "font-size" to worry about. Remember not to include two separate sizes for the one element - that can get confusing.

Also, due to potential inheritance issues, you should specify a background colour whenever you specify a colour. That way you stop orangey red text from appearing on an orangey red background:

One thing you must remember is that not all users have Arial. Mac users have this strange font, the one that Arial was originally copied from actually, called "Helvetica". It looks almost exactly identical to Arial. Also, in case the user has neither "Arial" nor "Helvetica" on their systems, adding "sans-serif" afterwards guarantees that the browser (assuming it's set to use the webpage's font and not the user's) will search out some member of the sans-serif family, so that your text will look as close as possible to actual "Arial" text.

Stan Brown said on Fri, 16 Mar 2001 09:54:30 -0500, in comp.infosystems.www.authoring.html --

HTML is not programming, it is not desktop publishing. It is structural markup, to show the elements of a document. It is indeed the responsibility of the browser program to render the page. One hopes browsers would do a good job out of the box, but even aside from those (like Microsoft) that use their browser as a way to subvert Internet standards, there are garden-variety honest bugs in any browser.

User configuration of browsers does have a tremendous effect. User configuration of their computers also has an effect. Microsoft especially, Netscape to a lesser extent, will display the same page differently depending on what fonts the visitor has installed and how she has set up the Control Panel applets, especially Regional Settings. Then there are WebTV and UNIX-based browsers, as well as less-known Windows browsers.

The general principle of the Web is: the author can suggest many things but control nothing. And _any_ attempt to exert control is going to make things worse, not better. By "worse" I mean your pages will be usable by fewer users, or less usable by many users, or both.

<font> is a particularly nasty example of this, and if you'll take a look at the WDG FAQ I think you'll see many examples of "control" attempts that fail disastrously. Among them for <font> the visitor may not have the desired font at all; she may have one with the same name but different characters; she may have one with the same name and characters, but arranged at different numeric positions from yours (yes, this happens, particularly between Macs and Windows computers); she may have the "same" font but finds it unreadable.

For all these reasons, it is best (sc. safest) not to use <font>.

With special characters in particular, many people have trouble accepting that there is no way to represent them in plain text. They are right to be skeptical: it is ludicrous that the only way to present a theta or em dash is as a graphic. Ludicrous, but true -- because the Big Two browsers have deliberately turned their backs on the standards and are buggy to boot. Right now your choice is between doing it right (using Unicode) but accepting that some very popular browser will screw up, or not doing it at all.

--Stan Brown, Oak Road Systems, Cortland County, New York, USA http://oakroadsystems.com

HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited February 1, 2002 6:23 am (diff)

This FAQ is happily hosted by Betadome Digital Media