HTML Text Effects

HTML Code for Font Styles

HTML text effects were extremely popular during the early days of the web, and were often over-used. However, they gradually became an essential part of cascading style sheets as the web became 2.0.

Early HTML Text Effects

While hypertext markup language came from the world of static print publication, the ability to have dynamic animations and colors on computer screens was very exciting for early web designers. Unfortunately, some went a bit overboard, using <H1> header tags and <FONT COLOR="Some_Outrageous_Shade_Of_Pink"> to the point where reading a web page could literally give you a headache. Even worse was the dreaded <BLINK> tag, which would give the effect of a neon-sign in a shop window. It is almost universally accepted that the <BLINK> tag should no longer be used anywhere.

Other HTML text effects included:

  • StrikeThrough <S></S>: This produces text with a line through it, as if it has been crossed out while still remaining readable.
  • Sub- and SuperScript: Using the obvious tags of <SUB> and <SUP> you can make annotations and footnotes on your web text.
  • Underline <U></U>: This is not used as much in text anymore because underlined text usually implies a hyperlink.
  • Code and Typewrite: These text effects used to be for denoting text that was quoted or meant to be copied. While it is still sometimes used in coded examples such as javascript, for the most part people set apart text using either <BLOCKQUOTE> or simply a CSS rule.

The <FONT> Properties

One of the interesting aspects of any text effect is that a great deal of control can be exercised using the <FONT> tag along with a property, such as family (serif or sans-serif groupings), style, size, color, and page alignment ("align=left", for example). However, it is considered bad form in current coding to use these properties in the body of your document. Almost all font properties are used in the <HEAD> of the document where the styles are defined, or else in a completely separate .CSS document. This means it's useful to learn the <FONT> tag thoroughly, even if you don't use it as originally intended.

The Top Four Text Effects

There are four kinds of tags for controlling text appearance that have remained very useful, though they've also changed over the years to reflect a more semantic style of HTML.

  1. <P> Paragraph: It is even more essential to be able to delineate paragraphs online than in print, because text on the screen is harder on the eyes. Most online paragraphs are separated by spaces, but Cascading Style Sheets can change this at will
  2. <I> Italic: Originally this denoted slanted text, but some designers would rather use other ways to show emphasis, and so the <EM> tag is becoming more commonly used for the same effect.
  3. <B> Bold: Just like <I>, while people do want to have some text set apart, it's not always through boldface type. The semantic tag for this effect is <STRONG>.
  4. <H> Header: This is used for titles, subtitles, and other headings that help outline a document. The "H" is always followed by a number, usually 1-5.

These four tags are still used very often in conjunction with Cascading Style Sheets, which can be used for almost any text effect you like. A CSS Zen Garden has thousands of examples of how the same code can give radically different effects, or you can go to sites such as Web Designer Wall for other great CSS examples including gradient text.

Javascript Text Effects

Another way to get HTML effects that are maximized is to incorporate javascript with your code. The Javascript library at has many tutorials and sample codes for effects such as scrolling text, popup alerts, and even 3d Twisting Text. However, many browsers have javascript shut off, and so there's no guarantee that the effects will show up the way you intend.

That unfortunately goes for straight HTML text effects as well. Different browsers even show CSS in different ways, and you should always check on multiple screens before using a text effect extensively on your site. Always remember that the purpose of a page is to deliver your message, and use the text design to improve that.

Was this page useful?
Related & Popular
HTML Text Effects