35 users online (1 members and 34 guests)  


  Results 1 to 6 of 6

Related

  1. Replies: 1
  2. Which are Website Fonts    Forum: HTML Forum
    Replies: 7
  3. A Problem With Fonts    Forum: HTML Forum
    Replies: 6
  1. #1
    sonofmidi's Avatar

    Status
    Offline
    Join Date
    Jan 2001
    Location
    NC, USA
    Posts
    75

    Choosing web fonts

    When designing a webpage, many considerations go into how one wants their content to be presented. Careful selection of
    background colors and graphics are used to identify the content with the viewers surfing experience. There are numerous articles and tutorials on graphics and HTML design, but one often overlooked aspect is the screen fonts used.

    Windows and Macs currently come with default True Type Fonts designed for web viewing. This wasn't always the case. In the early days of the internet, Times New Roman and Times were the available fonts. At that time, webpages were primarily designed for displaying text information similar to a newspaper or magazine. As the internet exploded into what we use now, 1000s of fonts have been developed as well as Windows and Mac ship with more default system fonts. The key word here is "System Fonts".

    Just because you have installed the coolest Star Wars font on your box doesn't mean your viewer has this installed. Unless the viewer has the Star Wars font installed on their own system, they will see a default system font in their browser. This is why is it important to choose your fonts carefully.

    Windows ships with default fonts such as Arial, Times New Roman, Georgia, Verdana and Courier. These are commonly used web fonts.
    Mac usually ships with Helvetica, Times, Courier and Times as common fonts. With newer browsers and desktop publishing applications, there are an abundance of fonts added to a system. This still doesn't guarantee that your end user can display them properly. Besides the font type, the size in which a font is displayed varies among browsers as well the fonts themselves. http://hotwired.lycos.com/webmonkey/99/41/index3a_page4.html?tw=design has a good font chart to help understand these differences. This is why it is important to use multiple font choices in style sheets. IE: font-family: Verdana, Arial, Helvetica, Geneva; will usually cover most viewers. But keep in mind that each font will not display as the same size. This can certainly wreck a nicely formatted navigation table set to a fixed width.

    Font sizes are as important as font type to a viewer. The widespread use of style sheets has given the designer unlimited license on how they display their content. This may be good for the designer, but for a visually impaired viewer, that yellow 9px font on a black background is, well, useless. Unless the viewer is savy enough to set their browser to overide the webpage style settings and set their own settings, they are stuck with trying to increase font sizes with their toolbar menus.

    If you have to use a unique font for a logo or navigation, consider using optimized images for these. Photoshop and Paint Shop Pro
    both can create dazzling text graphics. Another alternative is using a plugin that embeds the font type in the viewers browser. This method is frowned upon because most viewers dislike having to install software simply to view a single website. If interested, go to http://truedoc.com/webpages/intro/ in using this approach. Some sites may even offer the viewer a download link for a unique font, but many custom fonts are copyrighted and unless given permission, you are not allowed to distrubute them.

    Webpage designers eventually become adept at creating crossbrowser content. Where it is easy to obtain Netscape, Opera and Mozilla
    browsers for most platforms, it is not realistic to purchase a Mac just to verify page compatibility. However, by choosing commonly used fonts for your webpages, you can be assured that your viewer has full access to your intended content. As much as a designer may feel that their webpage has to look great to themselves, you viewer is the one on the receiving end. Just as in business, the customer is the one to impress and a poorly designed webpage won't bring them back if the site is inaccessible due to font selection.
    Last edited by sonofmidi; 12-24-2002 at 01:27 PM.

  2. #2
    Doorknob's Avatar
    Super Newbie

    Status
    Offline
    Join Date
    Jun 2002
    Location
    Malaysia
    Posts
    316
    all this helps, but remember that the part of your website that attracts visitors is the content. no matter how good your website looks, if it doesn't have anything worthwhile then noone is going to come back or recommend it to friends. AHFB2000 is a perfect example, i come back even though it looks like... uh.. nevermind.

  3. #3
    sonofmidi's Avatar

    Status
    Offline
    Join Date
    Jan 2001
    Location
    NC, USA
    Posts
    75
    Your comment on content is noted, but the thread is about fonts specifically. BTW, some of my favorite sites are for all purposes bland.

  4. #4
    Doorknob's Avatar
    Super Newbie

    Status
    Offline
    Join Date
    Jun 2002
    Location
    Malaysia
    Posts
    316
    oh yeah. sorry

  5. #5
    Zaire's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Mar 2001
    Location
    Hamburg, NY
    Posts
    312
    Just to comment on this, even though I already talked with mike about it:

    I believe it's best to just choose a 'font-family' via css, that way you can get a similar look no matter what platform your on, and you can even use a specific font face with the family, such as:

    Code:
    font-family: Verdana, sans;
    (im sure that's improper, but im at school and im just tring to make a point)

    -Eric

  6. #6
    sonofmidi's Avatar

    Status
    Offline
    Join Date
    Jan 2001
    Location
    NC, USA
    Posts
    75

    Thumbs up Good point and some clarification

    Serif fonts refer to types like Times and Georgia and Sans Serif to common web fonts such as Verdana and Arial. To clarify Eric's example:

    For Serif fonts use:

    body {
    font-family: Times New Roman,Times,Georgia,serif;
    }

    For Sans Serif use:

    body {
    font-family: Verdana,Courier,Helvetica,sans-serif;
    }



Tags for this Thread