Home > Articles

  • Print
  • + Share This

Form: Font Issues

In the context of information, form is how your information looks. On a Web page, the bulk of the information is textual. There are two properties of textual information that you can modify to affect its look: font size and color. I like to use the following font rules:

  • Use a sans serif font such as Helvetica, Arial, or Verdana. Serif fonts, such as Times Roman, look "dirty" or "fuzzy" when you have a lot of small text on a page.

  • Use a 9-point font for most of your text.

  • Use a 12-point bold font for headings.

  • Use a 16-point bold font for titles.

  • Center titles and headings.

Figure 12 shows the results of applying these font rules.

Figure 12

Font rules applied.

The HTML for implementing these font rules is minimal, especially if we make use of the <STYLE> tag (see Listing 4). Briefly, the <STYLE> tag lets you redefine the default properties for an HTML tag.

Listing 4 Implementation of font rules

<HTML>
<HEAD>
<TITLE>Professor F's IT-Forum</TITLE>
<STYLE>
<!--
BODY {font-family:verdana,arial,helvetica;font-size:9pt}
TD   {font-family:verdana,arial,helvetica;font-size:9pt}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 HEIGHT=400 CELLPADDING=0 CELLSPACING=0 BORDER=1>
<TR>
<TD WIDTH=120 VALIGN=TOP>
  <img src=logo.gif><BR>
  <A HREF=" ">Phrases</A><BR>
  <A HREF=" ">Dictionary</A><BR>
  <A HREF=" ">Archive</A><BR>
  <A HREF=" ">History</A><BR>
  <A HREF=" ">Definition</A><BR>
  <A HREF=" ">Forum</A><BR>
  <A HREF=" ">Chat</A>
</TD>
<TD WIDTH=480 VALIGN=BOTTOM>
  <IMG src=informitad1.gif>
  <TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=340>
  <TR>
    <TD WIDTH=360>
      <CENTER><FONT STYLE="font-size:16pt"><B>
      Professor F's IT-Forum
      </B></FONT></CENTER><BR><BR>
      Welcome to <B>Professor F . com</B>--a repository of hacker
      culture and a forum for discussing I.T. issues. Our mission
      is to correct the negative, misportrayal of the hacker by
      the media. So, you won't find anything about breaking into
      computers on this site. Instead, you'll find something much
      more valuable--the truth. Enjoy! <BR><BR>
      Phrase: Sure, you're bitter <BR>
      Usage: Whenever a friend or coworker complains too much. <BR>
      Example: Barney: I spend all night hacking this algorithm and
      I still can't get it to work<BR>
      Fred: Sure, you're bitter. <BR>
    </TD>
    <TD WIDTH=120>
      <CENTER><FONT STYLE="font-size:12pt"><B>
        Top 5 Phrases
      </CENTER></B></FONT><BR>
        1. Sure, you're bitter<BR>
        2. Any other questions?<BR>
        3. Help me Spock!<BR>
        4. Are you threatening me?<BR>
        5. Did you just get in?<BR>
        <BR>
      <CENTER><FONT STYLE="font-size:12pt"><B>
      Top 5 Words
      </CENTER></B></FONT><BR>
        1. Foo<BR>
        2. Bar<BR>
        3. Baz<BR>
        4. Frob<BR>
        5. Grok
    </TD>
  </TR>
  </TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

As you can see, the user interface is looking better, but it's still quite bland. One problem is that the content is too cluttered. You can use colors to partially unclutter the interface.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.