Forums

raman2572

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

joshuanhibbert

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.

raman2572

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

jamy_za

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.

joshuanhibbert

@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.

jamy_za

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.

shazdeh

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: developer.yahoo.com/yui/ */
body {
	font:13px/1.231 sans-serif;
	*font-size: small;
}

jamy_za

@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.

raman2572

@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

raman2572

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

snillor

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

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

joshuanhibbert

@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.

treehouse : what would you like to learn today?

Forums

which is the best font for post body?