SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    May 2000
    Location
    Canada
    Posts
    533
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's the deal...

    i need to know the pros and cons of using a font face tag ...

    secondly, what are the pros and cons of using a relative size "-1" compared to a direct size "2" ... it all looks the same in browsers ...

    i'm working on lifeofageek.com and am trying to figure out whats the best thing to do regarding font.. right now i have <font face="Verdana, Helvetica" size="-1"> .. which looks good, and size="-2" for the random stuff on the left...

    so, gimme some ideas !!

  2. #2
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, first off...if you're not already using CSS, I recommend it.

    As for the font face...I think you should definetly specify it...just add on several other fonts afterwards to be safe...I don't see any problem then...



    ------------------
    Chris Bowyer
    MyCoding.com: Join our mailing list for launch notification!
    "I'm not an insomniac, I'm a web designer."

  3. #3
    SitePoint Evangelist
    Join Date
    May 2000
    Location
    Canada
    Posts
    533
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS .. but for what ?

    ---------------------
    LifeOfaGeek.com

  4. #4
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    CSS replaces the font tag. Not only is it the new standard today but you won't have to recode your pages for the newer browsers when they stop supporting the font tag. Plus CSS makes your pages a lot smaller. My CSS file is currently 1769 bytes in size. Within this I set the font, color, margins and size for body text, table cells, headers, paragraphs, 3 classes of links, content vs. menus.

    This 1769 bytes is downloaded once and cached for use in all pages that reference it. Now say I used an average font tag for these features, except for margins because its not supported, there would be 70 bytes everytime it was used. Now if you had 2 table cells, 4 paragraphs and 2 headers and 10 links on your page, your up to 1260 bytes per page and you still don't have margin and background color control.

    Now you say well 1260 bytes is less than 1769, but you have to take into account that the CSS file is cached and re-used. So if you have a 100 pages in your site the saving can be great.

    On my page there are several paragraphs (3) and 24 links. That would be 1890 bytes. So on my page the savings is fairly large. If each user views 10 pages it adds up to:
    1890 * 10 = 18,900 bytes compared to 1769 + (64 * 10) = 2409 bytes for a savings of 16,491 bytes or in modem terms about 5 seconds of download time with a 28.8K modem. Now multiply this by all your users. Your giving them faster layout of your pages, your gaining tighter control and saving bandwidth.


    p.s. the extra 64 bytes per page listed above is for linking the stylesheet to the page.

    ------------------
    Wayne Luke - Sitepoint Forums Administrator
    Digital Magician Studios - Making Magic with Web Applications
    wluke@digitalmagician.com

    [This message has been edited by wluke (edited July 01, 2000).]

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wluke,

    I use both the traditional font and paragraph tags and the CSS so that the maximum of users get the same (or closest) layout. What I don't like about using only CSS is the Netscape and older browsers issue. As an example, the fonts can be too big in NS if I don't force it, especially inside tables.

    I also find that most of the CSS1 isn't even recognized by NS even if it's supposed to suport them.

    Maybe you guys have a solution that I didn't find yet? Do you make separate pages for IE and NS? I wouldn't like this as I have quite a lot of content to tweak.

    Cheers!

  6. #6
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There are several solutions to make your page viewable in various browsers and older version. The suggestions listed below can be modified to fit HTML coding as well, and they should be.

    <UL TYPE=SQUARE>
    <LI>Only use tags that are "supported" by both browsers. Its been my experience though that Netscape claims to support most of the tags but in reality only supports 10%. The only tags I that use that my validator says Netscape doesn't support is the a:hover pseudoclass and white-space (IE doesn't support it yet either).
    <LI>Do not use absolute font sizes - pixels (px), points(pt) and the like. Use relative sizes. I personally like to set a base size usually of 1 em and everthing else is a percentage of that. If I want a larger font I use a larger percentage (say 180% for the H1 tag). Another benefit of this approach is people can still resize the font in the browser if they need to.
    <LI>Use both IE and Netscape CSS in the same file with the same attributes. Both browsers set the background color and font faces differently and will ignore proprietary tags just like in HTML. If you use Server-Side detection have it include which ever CSS file is more appropriate.
    <LI>For older browsers they get five attibutes defined. Background color, text color, link color, active link color, and visited link color. These are all defined in the body tag of each page. CSS aware browsers will ignore these attributes (except Netscape), but it shouldn't matter if you set them the same in CSS and HTML.
    <LI>Don't make your layout and design 100% dependent on CSS. Make it so its at least readable without it. It may not look pretty but it can still be used.
    <LI>Lastly design for the future. Make sure you use tags that will be usable today and tomorrow. So you won't have to recode your pages every major release.
    </UL>

    Finally realize that the layout and design in the Web is not 100%, get it as close as you can and call it a day.

    ------------------
    Wayne Luke - Sitepoint Forums Administrator
    Digital Magician Studios - Making Magic with Web Applications
    wluke@digitalmagician.com

    [This message has been edited by wluke (edited July 02, 2000).]

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks wluke for the tips. I always make sure almost all browsers see the pages in a similar way but I never thought of the tip you gave for the NS fonts...I always used absolute font sizes.

    My CSS is an external file that is coded for the CSS1 standard and with a few IE features that NS skips over.

    As for compatibility, I don't really mind losing a bit with the older browsers, and it would reduce the load time for each page with so many font tags.

    One thing though, how do you set the CSS for NS when you have a massive table? I never succeeded in that case and it would really help me if I knew the best solution.

    Have a look at this page and you will see what I mean: http://www.unofficialfly.com/icq.htm

    Thanks again for the help.

    Cheers!

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    WA
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding TABLE and TD to your BODY style definition on your linked css file, assuming you want the same font attributes for all.

  9. #9
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean adding a Table and a TD class? Will try, thanks.

    Cheers!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •