HTML Font Properties, Usage and Examples

HTML Fonts

The common fonts used in most web sites are: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana.

HTML Font Face

You can quickly peek at each of these by creating the following HTML file and opening it in your browser:

<HTML>

<HEAD><TITLE>Fonts</TITLE></HEAD>

<BODY>

<FONT face=”Arial”>Arial</FONT><BR>

<FONT face=”Arial Black”>Arial Black</FONT><BR>

<FONT face=”Comic Sans MS”>Comic Sans MS</FONT><BR>

<FONT face=”Courier New”>Courier New</FONT><Br>

<FONT face=”Georgia”>Georgia</FONT><BR>

<FONT face=”Impact”>Impact</FONT><BR>

<FONT face=”Times New Roman”>Times New Roman</FONT><BR>

<FONT face=”Trebuchet MS”>Trebuchet MS</FONT><BR>

<FONT face=”Verdana”>Verdana</FONT><BR>

</BODY>

</HTML>

The <BR> tag creates a line break, or is equivalent to hitting the enter key in a word processor. HTML ignores spaces larger than one space and ignores lines within an HTML file. You have to tell it when to add extra spaces ( ) and when to go to the next line (<BR>). More on both of those tags in a bit.

The above code gives the following web page:

Body Font Face

HTML Font Size

The <font> tag can also specify the color and size of your font. Let’s do size first, as that one is simpler. You can include all of the font properties in one font tag, or you can spread them across separate font tags. So you can use <FONT size=4><FONT face=”Verdana”>The Text</FONT></FONT> or you can use <FONT size=4 face=”Verdana”>The Text</FONT>.

It doesn’t matter, but in some cases you may want one property to last longer than the others. I’ll show you an example when we get to color. For size, you basically have seven selections, plus some other tags.

Try this code out:

<HTML>

<HEAD><TITLE>Font Sizes</TITLE></HEAD>

<BODY>

<FONT size=1>This is font size 1!</FONT><BR>

<FONT size=2>This is font size 2!</FONT><BR>

<FONT size=3>This is font size 3!</FONT><BR>

<FONT size=4>This is font size 4!</FONT><BR>

<FONT size=5>This is font size 5!</FONT><BR>

<FONT size=6>This is font size 6!</FONT><BR>

<FONT size=7>This is font size 7!</FONT><BR>

</BODY>

</HTML>

This will produce the following page:

Body Font Size

Obviously, some of the smaller fonts are too small for many people to read, and the larger fonts are simply obnoxious. Use care when choosing font sizes.

HTML Font Color

Font color is an interesting subject. HTML generally uses hex codes for colors, which isn’t difficult but can look tricky to the beginner. Here is a sample of using names and hex codes for the same result:

<HTML>

<HEAD><TITLE>Font Colors</TITLE></HEAD>

<BODY>

<FONT color=”red”>This is red.</FONT><BR>

<FONT color=”black”>This is black.</FONT><BR>

<FONT color=”white”>This is white.</FONT><BR>

<FONT color=”blue”>This is blue.</FONT><BR>

<FONT color=”yellow”>This is yellow.</FONT><BR>

<FONT color=”green”>This is green.</FONT><BR>

<BR>

<FONT color=”#FF0000″>This is red.</FONT><BR>

<FONT color=”#000000″>This is black.</FONT><BR>

<FONT color=”#FFFFFF”>This is white.</FONT><BR>

<FONT color=”#0000FF”>This is blue.</FONT><BR>

<FONT color=”#FFFF00″>This is yellow.</FONT><BR>

<FONT color=”#008000″>This is green.</FONT><BR>

</BODY>

</HTML>

The above HTML example creates the following page with different font color:

Body Font Color

I added the circles where the white text is (you can’t see it because of the white background) and added the dark line where the break between the font sections is so that you could easily see them.

There is an excellent list of colors, their names, and their hex codes here: http://www.w3schools.com/html/html_colornames.asp. I also recommend searching Google for “HTML Color Chart” when you want to find something specific. You can also use a paint program such as Paint .NET to choose a color and get the hex value for it.

Font Usage Example

So here’s an example of when you might not want to keep all of your font attributes together in one tag:

<HTML>

<HEAD><TITLE>Font Example</TITLE></HEAD>

<BODY>

<FONT size=4 face=Arial>I am trying to <FONT color=”red”>STRESS</FONT> a point here!</FONT>

</BODY>

</HTML> The above HTML example creates the following page:

Body Font Example

In this example, you kept the size and font face the same, but added and removed the coloring when you wanted it to change.



If you like "HTML Font Properties, Usage and Examples,"
please consider linking to this article:

One Reply to “HTML Font Properties, Usage and Examples” »
Avatar
October 19th, 2011 at 6:28 pm

The talk within the finest used cellular phone for sale is built to be equalize again exceedingly asserted amidst consumers. There are lots of brands from which to opt with a lot of models. Then you scarcity capabilities to take into account, and also battery. In the motive you sine qua non select the one that’s produce for you, and also period’s your own special taste of style. The going round finery three hottest employed cellular phones to hand would be the BlackBerry Bead, Your Apple IPhone, as luckily as the Motorola talkabout Blade. All three or more of such are terrific candidates and each has their entirely own durability as highly as frail spots. We desire look at each anybody of these individually so that you can choose for yourself which of such you believe desire be best.
Used cellphones for sale

2 Ping / Trackback
February 19th, 2011 at 3:47 am

[…] Body Font Size webdesigndevelopment.org […]

July 7th, 2011 at 3:04 am

Websites you should visit…

[…]below you’ll find the link to some sites that we think you should visit[…]……

Leave a Reply




(spam protection)
Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Subscribe without commenting

« Previous
« The Body Section of an HTML Web Page | Up Top | HTML Tags List and Examples »
Recent Comments
Web Design: Web design is the process of designing, developing and managing exceptional standard based websites — a...
extendfrell: [url=http://angry-birds-one.co m]Angry Birds golden eggs[/url]
usalsCucounsE: Praca Anglia
Anydaybiany: Minecraft Online
samsung-galaxy-tab: My number one site now - webdesigndevelopment.org Samsung Galaxy tablet giveaway
samsung-epic-4g: I read webdesigndevelopment.org everyday Samsung Epic 4G giveaway
equiladeadept: Malgre de l’ immobilier le site immobilier de petites annonces immobilieres qui s’en sort...
Jatavaddykamp: Drop in on us contemporary to obtain more information and facts in the matter of By us at the moment...