SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting tired of Times New Roman

    lol. So I see sites that use fonts for the content and it goes beyond the traditional web safe fonts. Is there a list of alternative font types that is cross browser compatible starting at IE7 or was that IE8 which allows for greater flexibility? I want to introduce better typography!

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For ease of readability for text content I use
    Code CSS:
    font-family: tahoma, arial, sans-serif;

    in the css for the body element.

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The term "web safe" might delude you into thinking that there actually are web safe fonts, which isn't the case, not in absolute terms.

    A nice article, introducing some font stacks by BlackMax can be found right here.

    And some sources that offer lists of web safe fonts:

    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the citation, kind lady.

    Some of the font stacks in that article are tres bloated, so feel free to cut them back.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Max, I liked your article.

    To the OP
    As a designer/art director I must add that it is more important to think WHY than HOW / WHAT. if you are "bored" with Times New, because you have seen it used elsewhere, hen you have the wrong idea of design ,web or print but especially web.

    As mentioned before WEB SAFE doesnt mean "web safe", and the phrase deceives many coders into believing they will get the expected results with certainty. You are really aiming for popularly distributed fonts, many of which could have been turned off by the end user anyway. The best goal is to give up that goal entirely and aim to achieve legibility and convey a feel.

    The BEST METHOD I have come up with to building a font stack borrows from the principle of "graceful degradation" and adds a couple of extra stipulations:


    1) The all important feel. I am still wondering why people think helvetica "looks like" Myriad or Gill? you could argue (until you the the point bellow) that at 10px all san-serif fonts look alike. In which case could just respond that the only font stack ever needed is:yourFont, Helvetica, Arial, sans-serif; we KNOW this is not the case also users can and WILL resize the text in your site so you cant count on arranging based on similarity at a particular size...

    ... or weight. One interesting thing to note Helvetica (text-style:bold) feels much different than the common "Gills" (text-style:bold) compared to Arial (text-style:bold).

    2) The natural "font weight" must not vary too much. Am not talking about font weight that is applied via style but the natural thickness of the stroke of the typeface. The reason for this is that it will not only affect the FEEL ( important us ADs) but also it will have an impact on the size of your content. (4-6% may not seem much on a headline but when you set some large blocks of copy... maybe over an image or in a block quote... it hurts.. trust me).

    So how do you actually handle a font stack well? The truth is you have to think of it as building 6 or 7 sites rather than just one. I know I will start with the "customer requested fonts" and end it with the font-type( serif, sans, mono). In between I will select a few alternate popular fonts based on the two principles above and order them in REVERSE order of popularity.

    It is useful to know which fonts are prevalent in most of your audiences machines, but stacking by OS is just misguided. You could create a stack in which your 5th choice for happens to be present in a Mac user's sys... so he will see your next-to-WORST possible choice "on Windows" as opposed to next-to-BEST possible on mac. If you stack by look and feel instead, it takes a little knowledge of typography and a a few mins of extra testing but the results are more consistent experiences for the user.

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Blog Guy View Post
    lol. So I see sites that use fonts for the content and it goes beyond the traditional web safe fonts. Is there a list of alternative font types that is cross browser compatible starting at IE7 or was that IE8 which allows for greater flexibility? I want to introduce better typography!
    Unless you're going for web fonts, Cufon or other such technologies that download the font you've set (with the issues around copyright, and the extra bandwidth that comes with), compatibility with particular browsers is irrelevant - browsers will display any fonts installed on the user's computer.

    The trick to creating a good font stack is to choose the font you like the most, and then find other common ('web safe') fonts that are as close to it in style, shape and size as you can. End with a generic 'serif' or 'sans-serif' to catch anyone who doesn't have any of the fonts you've listed. It doesn't matter if your first choice isn't web safe!

  7. #7
    SitePoint Member
    Join Date
    May 2012
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FONTS

    thanks for the info guys!
    Last edited by Black Max; May 20, 2012 at 19:57. Reason: removed fake signature, wait 90 days please

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Thread closed, it's run its course, the last post notwithstanding.


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
  •