Get the magazine exclusively for web professionals

Subscribe Now

CSS and the Font Family

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

advertisement


There is nothing worse in Web design than to see multiple fonts on the same page where there should only be one. Even worse than that is spending hours selecting the perfect font for each section and subsection of your site only to find out that the majority of Internet end-users don't have "Bauhaus 93" or "Franklin Gothic Medium Cond" on their machines. Foiled again? Not so fast... how about a quick introduction to the font family. When coupled with the design refinement provided by CSS, integrating a font family can help you make sure that your design remains as consistent as the initial design you envisioned.

A 'font-family' is a group of fonts that exhibit similar characteristics. The properties of a font-family indicate a list (based on order priority) of specific or generic font family names to use ir order to display text content. If you use the old <FONT = ""> then at least one specific or general font family must be given - otherwise your design will feature the default font of the machine they are viewing your pages from. When using a font-family, if the specified font does not exist then the next font is tried. This process continues through the prioritized list until no more are available. If no match is made, the browser default font family should probably be used.

1) Font Family without CSS:

Within your page code you will see...

<P>The <FONT FACE="Arial, Helvetica, Geneva" Size="+1"><a HREF="/">Website Services Magazine</a></font>website is a publication that also features<FONT FACE="Arial, Helvetica, Geneva" Size="+1"><a href="http://websteservices.com/">free classfieds</a></font>and a<FONT FACE="Arial, Helvetica, Geneva" Size="+1"><a HREF="/forums/">forum for webmasters".

Which readers see as:
The Website Services Magazine website is a publication that also features free classifieds and a forum for webmasters.

2) Font Family With CSS:
When using a CSS file (cascading style sheets), not only will your code look cleaner but it makes it much easier in the future when you are "re-designing" your website wherein you may want to change fonts or font sizes, even font families in some instances.

Add the following to your CSS file:

.paragraph-red A
{
font-family:sans-serif;
font-size:110%
}

Within your page code you will see...

<P class="paragraph-red">
The <a HREF="/">Website Services Magazine</a>website is a publication that also features<a href="http://websteservices.com/">free classfieds</a>and a<a HREF="/forums/">forum for webmasters".

Which readers see as:
The Website Services Magazine website is a publication that also features free classifieds and a forum for webmasters.

Good Luck!

 

Free Subscription to Website Services Magazine

 

Explore the WEB 100!

Discover the Tactics and Techniques of the Top Digital Enterprises
today in Website Magazine's Special Spring Issue - Web 100.

 


Login To Comment

forget your login information?

Become a Member

Not already a part of our community? Sign up to participate in the discussion. It’s free and quick.

Sign Up

Be the first to comment on this article

  • Explore the WEB 100!

    Discover the Tactics and Techniques of the Top Digital Enterprises today in Website Magazine's Special Spring Issue - Web 100. Learn more...
  •  

advertisement