[skip nav]

www.ackadia.com



« HTML Text formatting »

Introduction


This page is about some of the different effects you can achieve with fonts by using (or abusing) the appropriate syntax. I will revise this page again at a later date.

HOWEVER please bear in mind most of these commands as considered obsolete in favour of using CSS - cascading style sheets.




Please note that BLINK, below, is limited to Nescape and MARQUEE'S to Explorer

They are included for completeness, however I really wouldn't recommend their use!



THE most useful command however, is <PRE> , closed with </PRE>

The first line is without the command; the second is exactly the same line using <PRE>.

DI AG ON AL


DI
  AG
    ON
      AL


The advantage of this is you can quickly copy large amounts of text and tables without the need to enter tabulation and carriage return codes, etc. It is a quick fix, sure, but very, very handy if you need to post something and don't have the time to format it.

If you want to be show and < > with commands on a web page you can use & #60; &# 62; (without the spaces). You can also use & lt; &g t; - Less Than, Greater Than

<b>BOLD</b> is used here to show the command for BOLD lettering.




TEXT EFFECTS
STRIKE Normal SUBSCRIPT Normal SUPERSCRIPT UNDERLINE
CODE Typewriter KEYBOARD <blink> BLINK </blink> - I don't believe modern browsers support this now
BOLD ITALIC SIZE 1 SIZE 2 SIZE 3 SIZE 4
SIZE 5 SIZE 6 SIZE 7


STRIKE uses <s> and </s>
SUBSCRIPT uses <sub> and </sub>
SUPERSCRIPT uses <sup> and </sup>
UNDERLINE uses <u> and </u>
CODE uses <code> and </code>
TYPEWRITE uses <tt> and </tt>
KEYBOARD uses kbd and /kbd
BLINK uses <blink> and </blink>
BOLD uses <b> and </b>
ITALIC uses <i> and </i>
SIZE uses <font size="+1"> and </font> Scale is -2, -1, +1, +2, +3, +4
or
SIZE uses <font size="3"> and </font> Scale is 1, 2, 3, 4, 5, 6, 7



The use of UNDERLINE is NOT recommended as it is associated with links and can be confusing.

BLINK and MARQUEE (besides being browser specific) are plain bad taste.

When used in a normal paragraph the other commands like STRIKE have their uses.

Subscript for chemical symbols like Nitric acid (HNO3) and Superscript for comments and maths (E=MC2)

Like all things, these commands must be used sparingly...

CODE, TYPEWRITER & KBD all effectively change the font face to Courier.

Using <font face=name, name2> is better, but stick to standard styles likely to be installed, the main ones being:

  • 'Arial' or "serif" (Like Helvetica)
  • 'Times New Roman' or "san serif" (default)
  • 'Courier' (use <tt> or <code> instead!)
  • 'Comic Sans MS' (invariably installed in windows and
  • 'Helvetica' (a favourite on Apple Macs. Like Arial)
  • 'CommercialScript BT' (Of the scripts, this is most likely to be used)

Fancy lettering like ShelleyVolante BT are extremely unlikely to be installed on most systems, but for internal webs where the system admins can dictates installed fonts, this is fine.

< font face="'Arial', 'Times New Roman', 'Courier', 'Comic Sans MS', 'Helvetica', 'CommercialScript BT'" > TEXT < /font >

Looks for Arial, then Times, then Courier, then Comic, then Helvetica and, finally, Script

Looks for Times, Courier, Comic, Helvetica, Script and, finally, Arial

Looks for Courier, Comic, Helvetica, Script, Arial and finally, Times

Looks for Comic, Helvetica, Script, Arial, Times, and, finally, Courier

Looks for Helvetica, Script, Arial, Times, Courier and, finally, Comic,

Looks for Script, Arial, Times, Courier, Comic and, finally, Helvetica

Depending on the fonts you have installed you should see between 2 and 6 different typefaces above. The advantage of this is you can vary the style on your web pages without resorting to bandwidth hogging images and still be sure that the message will be seen.
It can be used to great effect on an intranet site as the IT Manager can ensure the right fonts are installed on all systems with those internal newsletters.

As an example of this in use, see my Fairy Godmother poem





Below are examples of MARQUEE effects,
These only work with Explorer and are included for completeness.


The words, "Hi there!", will be printed below this marquee. Hi there!

This marquee, is half the height of the screen and 80% of the screen width. The words should slide right (once) on a lime background. The words should bounce back and forth on the screen.


In commands used, in order, are...

  • <marquee> </marquee>
  • <marquee height=50% width=80%>
  • <marquee behavior="slide" direction="right" bgcolor="lime" vspace="20">
  • <marquee behavior=alternate>





Above = <hr size="5" width="80%" noshade="noshade" />

Below = Horizontal line - default