GDT 150 Design for the Internet
Handout: Basic HTML Typography
This page contains examples of HTML text formatted in many different ways. Each example describes and illustrates the attributes that have been applied to it. View the source to see what is happening code-wise.
Note: These examples have been reformatted with css. I couldn’t use font tags in good conscience…
This is default text. It will be displayed in the font that the user has chosen as the default, and in the size that the user has specified. Generally, that means Times New Roman, size 3.
This text is enclosed in paragraph tags (<p></p>). This tag inserts line breaks before and after it.
This is heading text (h1).
This is heading 2 text (h2).
This is heading 3 text (h3).
This is h4 text.
This is h5 text.
This is h6 text.
This is font size 7.
This is font size 6.
This is font size 5.
This is font size 4.
This is font size 3.
This is font size 2.
This is font size 1.
This text uses the font Verdana. It is the default size. Notice that it is much more legible than the default font.
This font is Arial. Notice the difference in the width of the characters from Verdana.
This font has been specified as Helvetica. If Helvetica is not installed on your machine, which is typical for PC’s, this font will show up as the default font.
This font has been specified as Helvetica, Arial. This is what is known as a font list. It enables you to specify more than one font, so that is the first font is not installed on the user’s machine, an alternate font can be used instead.
This text has been specified as sans-serif. It uses the default sans-serif font.
This is specified as monospace. It uses the default monospace font. Monospace font characters all take up the same amount of horizontal space.
This is specified as Courier, monospace. If Courier is installed on your machine, it will display as Courier. Otherwise, it will display as another monospace font.
This is Verdana, size 7.
This is Verdana, size 6.
This is Verdana, size 5.
This is Verdana, size 4.
This is Verdana, size 3.
This is Verdana, size 2.
This is Verdana, size 1.
This is Arial, size 7.
This is Arial, size 6.
This is Arial, size 5.
This is Arial, size 4.
This is Arial, size 3.
This is Arial, size 2.
This is Arial, size 1.
This is bold text.
This is italic text. It is difficult to read. This is the default font in italic. Much more difficult to read.
This is bold italic text.
