Same Font on entire page?

Discussion in 'CSS' started by satishtalim, Jun 30, 2007.

  1. #1
    Is it a good design principle to have the same font for the entire page - for h1..h6, body tags etc?
     
    satishtalim, Jun 30, 2007 IP
  2. diarmuid

    diarmuid Peon

    Messages:
    285
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think you are fine to stick with the same actual font, e.g. Verdana, however if you keep the same font then it is probably worthwhile mixing things up with different colours, sizes or by emboldening it...

    Thats my opinion anyway, but everyone has varying opinions on website designing.
     
    diarmuid, Jun 30, 2007 IP
  3. Bagi Zoltán

    Bagi Zoltán Well-Known Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    110
    #3
    I think the same font type will make the site quite elegant, but playing with font size can be usefull if you want to make specific parts of your content stressed.
     
    Bagi Zoltán, Jun 30, 2007 IP
  4. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I actually feel its better to keep the same font throughout the page. If you change font it can make it look less professional in my opinion, but there are exceptions to this.
     
    veckd, Jun 30, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Go with a sans-serif font for your body copy (via the body selector), and a serif font for your headings (h1, h2, h3, h4, h5, h6). You will have to ensure that the font is readable and doesn't break your layout (especially if using EMs and percentages for the containers and font sizes respectively), but your visitors will thank you for it.
     
    Dan Schulz, Jun 30, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    Arial/Trebuchet MS/Georgia for headers, Verdana/Arial for text is used very often.
     
    soulscratch, Jun 30, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Arial is a sans-serif font and can cause problems for some people with dyslexia when used as a heading font on a computer screen. It's a good font to use on the printed page, however.
     
    Dan Schulz, Jun 30, 2007 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    To expand on Dan's suggestion:

    Serifs help to guide the eye from one letter to the next; they unify the word, making it easier on the eyes as you scan the text.

    Print is a high definition medium, at 600 dots per inch (dpi) or greater. Unfortunately, a monitor is a low def medium, at 72 to 100 pseudo pixels per inch. At common font sizes, ≤16px, the serifs are too small to render clearly. This rough rendering tires the eye. For that reason, normal text on the page should be sans serif (sans = without). Headers are normally a larger size, in the 18–32px range, so the serifs are large enough to be rendered cleanly, which improves readability.

    I had not considered the benefits of serif fonts for the dyslexic, but it stands to reason where there is sufficient size for use.

    cheers,

    gary
     
    kk5st, Jun 30, 2007 IP
  9. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #9
    nice explanation :)
     
    veckd, Jun 30, 2007 IP
  10. satishtalim

    satishtalim Peon

    Messages:
    440
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Very informative answers. Thanks.

    Related question - Most sites would have say Google Adsense. Different Adsense formats have (?) different fonts. Does it make sense to match Adsense's font for our site's body or like you all suggest have a sans-serif font for our body irrespective of what Adsense has?
     
    satishtalim, Jun 30, 2007 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Go with a sans-serif font regardless of what AdSense uses.
     
    Dan Schulz, Jun 30, 2007 IP
  12. Ginger Ninja

    Ginger Ninja Guest

    Messages:
    161
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I usually have the same font throughout my site i.e. Arial but I often change it to a more elegant font for headings (h1->h6) such as Trebuchet. It can give your design a nice feel and helps to break up somewhat plain text areas with a bit of variety.
     
    Ginger Ninja, Jul 5, 2007 IP
  13. dylanbathurst

    dylanbathurst Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Is there anywhere to see a list of fonts supported by css?
     
    dylanbathurst, Jul 5, 2007 IP
  14. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #14
    CSS doesn't support fonts. It allows you to declare them.

    For sans-serif fonts, Verdana, Arial, Helvetica are the default choices, as they're the ones most commonly found on the three major operating systems (Windows, Mac, *nix)
    For serif fonts, Georgia, Garamond, Times New Roman and Times are the best ones to use.

    Bear in mind that those fonts should be listed IN THE ORDER THEY ARE PRESENTED HERE for best effect. (Thought it is not the only way to list them, of course).

    Also remember that if you use a font with multiple words in the name to enclose it in quotation marks. Thus, Times New Roman becomes "Times New Roman" and the comma would come after it, like so: "Times New Roman", serif;

    sans-serif is the default for sans-serif fonts, and serif is the default for serif fonts. These are not fonts, but instead instructions to the browser to grab a font from that family in the operating system's font folder/directory if the declared font isn't found there.
     
    Dan Schulz, Jul 5, 2007 IP