SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The Clearest Fonts

    Hi all,

    Just about time to redesign my site. My question is, what are the best, clearest, and nicest looking fonts for the following?
    • Page headers
    • Article headers
    • Article body text
    • Navigation links
    Also, what size fonts do you feel most comfortable reading for the above categories? As for colours, it will mainly be black on either a white or very light grey background in most cases.

    I look forward to hearing your comments and ideas on this matter

    -Sam
    Sam Hastings

  2. #2
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Serif or sans-serif? The choice, as they say, is yours.

    For serif, I'd go for:
    Code:
    body {
    font-family:Georgia,"Times New Roman",serif;
    }
    for sans-serif:
    Code:
    body {
    font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
    }
    Sizes? Well, try and size in relative units if you can (ems or percentages). As for actual sizes, experiment and see what looks best in your design.
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Location
    Brisbane QLD Australia
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are there any style guide pages that show different fonts and sizes and styles so you can quickly go to said page to see what looks good?

  4. #4
    SitePoint Enthusiast jessegavin's Avatar
    Join Date
    May 2003
    Location
    Minneapolis, MN USA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <echo>What Zopester said</echo>

    Always use relative font sizes because then if your fon't isn't clear because it is too small then the user can just up the font size and make it clear.

  5. #5
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Devilware.net
    Hi all,

    Just about time to redesign my site. My question is, what are the best, clearest, and nicest looking fonts for the following?
    • Page headers
    • Article headers
    • Article body text
    • Navigation links
    Also, what size fonts do you feel most comfortable reading for the above categories? As for colours, it will mainly be black on either a white or very light grey background in most cases.

    I look forward to hearing your comments and ideas on this matter

    -Sam
    If you will use relative font sizes, and the fonts Verdana, Arial, Sans-Serif or Times New Roman , you will be Cross-Opearting System, Cross-Browser and with best Readability.

    Some links for further reading:

    Font sizes: 1. http://diveintoaccessibility.org/day...ont_sizes.html

    2. http://webdesign.about.com/cs/typeme.../aa042803a.htm


    Font families:

    1. http://psychology.wichita.edu/optimalweb/text.htm

    If you are really interested in making your web site accessible, you have a look here:

    2. http://www.sitepointforums.com/showt...hreadid=113590

  6. #6
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by billiousness
    Are there any style guide pages that show different fonts and sizes and styles so you can quickly go to said page to see what looks good?
    How about this:

    I'd had enough.

    Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so i could see where they did and didn't work. So I made 264 screenshots.

    This collection is posted for anyone else who is unhappy and distrustful.
    Thank Mr Briggs for this:
    http://thenoodleincident.com/tutoria...ont/index.html


    scooby scooby
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  7. #7
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Webnauts
    If you will use relative font sizes, and the fonts Verdana, Arial, Sans-Serif or Times New Roman , you will be Cross-Opearting System, Cross-Browser and with best Readability.
    Times New Roman is not guaranteed to work cross OS or browser. I believe on the Mac it's called "Times" or "New York". You will run into problems on various linux distros also. If you are going for a serif font, you will need to include a specific "serif" declaration toward the end of your font-family. Granted, some sort of serif font may be a system default...but that can be changed....
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  8. #8
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheOriginalH
    Times New Roman is not guaranteed to work cross OS or browser. I believe on the Mac it's called "Times" or "New York". You will run into problems on various linux distros also. If you are going for a serif font, you will need to include a specific "serif" declaration toward the end of your font-family. Granted, some sort of serif font may be a system default...but that can be changed....
    You are right! Times New Roman is very good for readabilty but not cross-OS.
    I'd checked again. Sorry Folks.

  9. #9
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No worries. Can you confirm the Mac fonts? I think I have the names right ("Times" and "New York"), but am working from memory (I tend to use mainly sans-serif), so I could be wrong..
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  10. #10
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheOriginalH
    No worries. Can you confirm the Mac fonts? I think I have the names right ("Times" and "New York" ), but am working from memory (I tend to use mainly sans-serif), so I could be wrong.. [img]images/smilies/frown.gif[/img]
    Times

  11. #11
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    verdana is designed to be read well onscreen I find it looks good in sizes 11/12

    Times new roman is more a font for print rather than screen

  12. #12
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    georgia is another font that was designed specifically for on screen presentation, just like verdana...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  13. #13
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    verdana is designed to be read well onscreen [img]images/smilies/smile.gif[/img] I find it looks good in sizes 11/12

    Times new roman is more a font for print rather than screen [img]images/smilies/smile.gif[/img]
    Aren't fonts 12 px = 100% the default size of the major browsers?

    If I remember well, I have read a study, were is mentioned, that the major browsers are getting more and more accessible, and all? browsers have the option to make the fonts smaller or greater, and if using the browsers default size, the user could make the fonts great enough to be accessible. Bellow that value, it is not guaranteed that it will be accessible to every kind of visually impaired persons.

    Any comments?

  14. #14
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE/Win is still one of the major current browsers which does not allow resizing of absolutely specified font sizes (px, pt, etc).
    as for 12px = 100% being the default size...well, in recent years all browsers (both Win/Mac) settled on adopting a standard size and the same interpretation of pixels per inch (ppi)...but safari is now breaking with that again, opting for a slightly different size. (there's an interesting bit about this issue in Zeldman's latest book...i'll dig it out tonight and see if i can be a bit more specific)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  15. #15
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TheOriginalH
    No worries. Can you confirm the Mac fonts? I think I have the names right ("Times" and "New York"), but am working from memory (I tend to use mainly sans-serif), so I could be wrong..
    If a Mac has MS Office installed it gets all of the Windows fonts as well (Arial, Verdana, Times New Roman, etc.).

  16. #16
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have discovered today, that Verdana is also the best font for UNIX.

    Recommended is:

    font-family: 'Lucida Grande', Verdana, Geneva, Lucida,
    Arial, Helvetica, sans-serif;

    More: http://www.realworldstyle.com/fonts.html

    Just try it yourself! Good luck!

  17. #17
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    but safari is now breaking with that again, opting for a slightly different size.
    Safari final's decided to go with the flow. :-)

    There is a survey of fonts installed on various OSs at Codestyle, which might be worth a look-see. Also, I've read that some prefer the Bitstream Vera fonts on Linux, and some don't like Georgia (Verdana too?) when they have smooth font rendering like on OSX, but I can't find where I read either so I'll keep looking.

    ~~Ian

  18. #18
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ian Glass
    Safari final's decided to go with the flow. :-)

    There is a survey of fonts installed on various OSs at Codestyle, which might be worth a look-see. Also, I've read that some prefer the Bitstream Vera fonts on Linux, and some don't like Georgia (Verdana too?) when they have smooth font rendering like on OSX, but I can't find where I read either so I'll keep looking.

    ~~Ian
    Are Bistream Vera cross OS and Browser Fonts?

  19. #19
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They're True Type Format, so I guess they'll work on any computer that support it--I have them on my Windows 2000 machine, now. They're pretty nice, but they seem to always be anti-aisled, which I don't particularly like at normal screen reading sizes. It may show up differently on Linux? :-)

    http://www.benmeadowcroft.com/me/arc...erafonts.shtml

    ~~Ian

  20. #20
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ian Glass
    They're True Type Format, so I guess they'll work on any computer that support it--I have them on my Windows 2000 machine, now. They're pretty nice, but they seem to always be anti-aisled, which I don't particularly like at normal screen reading sizes. It may show up differently on Linux? :-)

    http://www.benmeadowcroft.com/me/arc...erafonts.shtml

    ~~Ian
    If you guess they'll work on any computer, your proposal is irrelevant. I thought the topic here is concerning "READABILITY", or?

  21. #21
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I honestly don't know if the Vera fonts are useful or not, but I just thought I'd mention them in case they were worth a look. I read somewhere that some people do find them more readable on Linux, which is where they're most likely to be since they come with some distos, I think. Here's a screenshot someone took showing Bitstream Vera. :-)

    Edit:

    Hummm... Vera in that screenshot is much cleaner than on my Windows comp, and the edges & thin parts of some of the characters seem to shift color a little. I'm wondering if it was taken from one of those new-fangled LCDs with sub-pixel rendering?


    ~~Ian
    Last edited by Ian Glass; Jun 28, 2003 at 02:27.

  22. #22
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    IE/Win is still one of the major current browsers which does not allow resizing of absolutely specified font sizes (px, pt, etc).
    as for 12px = 100% being the default size...well, in recent years all browsers (both Win/Mac) settled on adopting a standard size and the same interpretation of pixels per inch (ppi)...but safari is now breaking with that again, opting for a slightly different size. (there's an interesting bit about this issue in Zeldman's latest book...i'll dig it out tonight and see if i can be a bit more specific)
    Hi redux! Did you dig it out?


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
  •