Grow your CSS skills. Land your dream job.

which is the best font for post body?

  • # July 1, 2011 at 2:01 am

    lets share our views about the best font for article or post body ,, ideal font-size ,,, ideal line-height ,,,best font color ,,,best letter spacing

    # July 1, 2011 at 3:34 am

    I set the following as a default in most of my projects:

    body {
    font-size: 100%;
    p {
    color: #444;
    font-family: Something, 'Something Else', sans-serif; /* Depends on the project */
    font-size: 1em;
    line-height: 1.5em;

    That way the user still has control over the text size but I can maintain correct ratio’s.

    Letter spacing depends on the context.

    Sans-serif fonts are generally more readable for body text on the screen.

    # July 1, 2011 at 5:08 am

    dont you think #444 color is light for text when background is white

    # July 1, 2011 at 5:17 am
    body{color: #333; font: 14px/1.5 sans-serif;}

    That will be Arial for Windows and Helvetica for OSx. As far as I know, Verdana is the most legible font. So perhaps Verdana, sans-serif.

    # July 1, 2011 at 5:32 am

    @raman2572 It really depends on the project, I never use black though. I usually range from #222 to #444.

    @jamy_za I agree with Verdana being most legible but it’s not always the nicest looking. Once again, project dependent.

    # July 1, 2011 at 5:58 am

    On my site, I’ve gone with:

    font: 16px/1.5 "myriad-pro-1","myriad-pro-2",HelveticaNeue,sans-serif;

    @sl1dr yeah verdana doesn’t always look very pretty.

    # July 1, 2011 at 6:52 am

    Seen HTML5 Boilerplate talk by Paul Irish? verdana, Myriad and Arial, none of these are available on all three platforms. Best is to let browser decide which font looks best. This is the code they use:

    /* Font normalization inspired by YUI Library's fonts.css: */
    body {
    font:13px/1.231 sans-serif;
    *font-size: small;
    # July 1, 2011 at 7:28 am

    @shazdeh the reason why sans-serif is used in the boilerplate is because Arial looks better than Helvetica in Windows, and Helvetica looks better than Arial on a Mac. By using sans-serif, it defaults Windows to Arial and OSx to Helvetica. In the example I gave, sans-serif is a fallback in case Myriad pro and HelveticaNeue isn’t on the system.

    # July 1, 2011 at 11:49 am

    @jamy_za actually myriad-pro-1 is not a web safe font and is not available on each and every computer so give it a pass ::: so in the race of best web safe font ITS OUT

    # July 1, 2011 at 12:08 pm

    now font-size:13px; is stated best by all ,,,,still confusion regarding best font

    # July 1, 2011 at 12:13 pm

    I thought setting a font-size in pixels was a bad practice.

    I sometimes use Trebuchet MS, although I really hate it’s ampersand.

    # July 1, 2011 at 9:32 pm

    @raman2572 I think you misunderstood what @jamy_za was saying. He has fallback fonts for computers that don’t have myriad-pro-1. This way most computers see his design as he planned it and those that don’t still get a sans-serif font presented.

    Also, I would be careful saying 13px is the best stated by all. It might be recommended to minimize cross-browser rendering differences but it is not always the best font-size. As @snillor said, declaring a font size in pixels overrides browser font size options and some people might choose to have the font size increased due to poor eye-site or just increased readability.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".