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:

3 Replies 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

Avatar
May 11th, 2012 at 12:45 pm

Thanks for this great site that is very useful to my mobile phone number
lookup page

Avatar
May 13th, 2012 at 4:02 pm

Thank you for this nice post you have given us here.

Certainly is a great resource that might manage to help
some reverse phone phone lookup users

3 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[…]……

March 12th, 2012 at 1:55 pm
free ipad wrote:

{Juѕt|Jυѕt|Jυst} read {thіs|tһiѕ|thiѕ|tһis|tһіs|tһіѕ} ……

tһank yoυ foг sharing wіth us, I think tһis website really stands оut : D….

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
reverse cell phone lookup: Thank you for this nice post you have given us here. Certainly is really a great resource...
cell phone number lookup by name: Thanks for this great site which is very useful to my mobile phone number search...
Web Design: Web design is the process of designing, developing and managing exceptional standard based websites — a...
reverse cell phone lookup: Thank you for this nice post you have given us here. Certainly is a great resource that...
mobile phone number lookup: Thanks for this great site that is very useful to my mobile phone number lookup page
name phone number lookup: Thanks for this great site that’s very useful to my phone number lookup page
SiteInfo: Your site has automatically been added to siteinfo, take a look at what information we have on your site...
amorenlinea: This is the right blog for everyone who really wants to find out about this topic. You realize a whole...