News for hackers. Stuff that matters.

A comment on Design For Hackers: Why You Don't Use Garamond on The Web. Parent comment

Re:Design For Hackers: Why You Don't Use Garamond on The Web by Sukotto on Thursday August 12, 2010 @01:44PM (#1598683)
I would very much like a simple cheat-sheet of "standard" fonts and what range of sizes each looks best at with regards to webpages.

Something that I can blindly follow when making the first draft of a site.

Anyone want to share a link to such a thing?

[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by faramarz on Thursday August 12, 2010 @01:51PM (#1598692)
http://www.typetester.org is a great resource for making comparisons.

But I will try to put together a simple list of standard fonts and how to optimize them for the best results. Will shoot you an email when it's done.

[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by cfdrake on Thursday August 12, 2010 @03:47PM (#1599022)
I'm also interested in this, and in case you don't mind sending it to me too: colin.f.drake -at- gmail

Maybe you should also consider posting it? It seems like many people would appreciate it here!

[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by elbenshira on Thursday August 12, 2010 @01:53PM (#1598700)
I'd love to see this once you're done. My email is my username @ gmail.com
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by nhebb on Thursday August 12, 2010 @04:34PM (#1599154)
http://www.typetester.org is a great resource for making comparisons.

That's a great resource. It also highlights the futility of specifying alternate font families. I couldn't find any font family combination that looked good side by side using the same size, leading, tracking, etc.

[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by natep on Thursday August 12, 2010 @07:26PM (#1599517)
Since there's so many of us interested, can you just submit it to HN and email us the link? I'm sure the resulting discussion would also be helpful.
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by imagii on Thursday August 12, 2010 @05:54PM (#1599349)
I'm would also be interested in this email, if it's not too much trouble. My email is on my profile page.
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by leif on Thursday August 12, 2010 @01:53PM (#1598698)
There are lots of links, and a lot of them are crap (for example, most suggest garamond and helvetica).

Here are my suggestions:

    sans: "font-family: Arial, Verdana, Tahoma, sans-serif;"
    serif: "font-family: Georgia, 'Times New Roman', Times, serif;"
    mono: "font-family: 'Courier New', Monaco, monospace;"
Always remember to put the generic font type ('sans-serif', 'serif', 'monospace') at the end so browsers have something default to fall back on in all cases. For example, most linux distributions have a good monospace font defaulted, so you don't even need to try to guess a font (though 'Bitstream Vera Sans Mono' and 'DejaVu Sans Mono' are not bad guesses) there.
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by powrtoch on Thursday August 12, 2010 @02:41PM (#1598824)
Personally I try to avoid putting Verdana or Georgia as backup fonts (In practice, the stacks you've listed are fine because almost no one will not have Arial installed, but by that logic you could leave out Verdana altogether). In principle, if we're imagining a situation where Arial isn't an option, falling back to Verdana will usually look pretty crazy, because Verdana is designed to appear so much larger. 12px Verdana just looks a lot bigger than 12px Arial. All this (including the part about it not mattering in practice) goes for Georgia (vs Times etc) as well.
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by notahacker on Friday August 13, 2010 @09:00AM (#1600779)
Anyone that doesn't have Arial installed almost certainly won't have Verdana installed anyway. Helvetica would be a more logical fallback for those people who hate Arial so much they won't have it on their system...
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by thristian on Thursday August 12, 2010 @11:57PM (#1600026)
Ye gods, please no more Courier New! Maybe, just maybe if you're trying to reproduce 1950s police reports or something, but there's so many much nicer monspaced fonts available these days. I'd start with:

    "Consolas", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace
...but you might want to include Andale Mono, Droid Sans Mono, Inconsolata, Lucida Console or Monaco as well.
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by chadgeidel on Friday August 13, 2010 @05:05PM (#1602290)
I love Consolas, but really if your visitors are not on Vista/Windows 7 it's unlikely they will have it.

EDIT: I believe there is a large population of folks that don't like ClearType hinted fonts. Consolas looks absolutely horrible unless you have ClearType on and tuned. I can't speak to Consolas on any Linux-based OS as I've never tried it.

[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by leif on Saturday August 14, 2010 @03:13AM (#1603080)
I don't like it either, but people are used to it and it serves its purpose. You can put it after 'mono' if you like.
[ Parent | on HN ]
Re:Design For Hackers: Why You Don't Use Garamond on The Web by aarghh on Thursday August 12, 2010 @01:56PM (#1598710)
I've found this useful: http://www.slideshare.net/jeff_croft/beautiful-layouts-throu... as well as this: http://www.alistapart.com/articles/settingtypeontheweb/
[ Parent | on HN ]