Ask HN: Which fonts do you use on the web for your websites/blogs?
6 comments
To start, there are only a few dozen "core web fonts"[1] with which 99% of browsers will have. Then there are a handful of fonts specific to Windows/Mac/Linux, which commonly will be in one but not the other.
For "fancy" fonts, Google Web Fonts[2] is a great resource - you can embed a font into your page, so it isn't dependent upon it already being on the user's system.
There's a lot of reading you can do on typography, but I'd recommend experimenting with different fonts (serif & sans-serif), sizes, letter spacing, line height, and other parameters to get a feel for what makes text readable. Try a few ideas you like, then stand a foot farther from your monitor and see if it still looks good.
[1] http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
[2] http://www.google.com/webfonts
For "fancy" fonts, Google Web Fonts[2] is a great resource - you can embed a font into your page, so it isn't dependent upon it already being on the user's system.
There's a lot of reading you can do on typography, but I'd recommend experimenting with different fonts (serif & sans-serif), sizes, letter spacing, line height, and other parameters to get a feel for what makes text readable. Try a few ideas you like, then stand a foot farther from your monitor and see if it still looks good.
[1] http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
[2] http://www.google.com/webfonts
Thank you. Btw, Do you use font stacks and @fontface kits? Also, what are your favorite fonts?
I don't design very often, but I usually stick to one or two fonts for an entire page, so I don't use too many non-standard fonts or font stacks. I've recently grown fond of Georgia, but besides that, I generally stick to Verdana and Trebuchet MS.
As mentioned before http://fontsquirrel.com is a great resource, which includes a good cross-browser css snippet for embedding webfonts http://www.fontspring.com/blog/the-new-bulletproof-font-face...
On our site (flup.com) we've used Chunk Five as our logo font and Museo Slab as our headings font along with Lucida Grande for body copy. We've also used line-heights and font-sizes from the Blueprint Framework http://www.blueprintcss.org/
Good luck,
Michael.
If your looking for some general fonts to make your blog look good you might want to try the following:
h1 { font-family: Georgia, Time, serif; font-size: 32px; color: #333; margin-bottom: 22px; } p { font-family: Verdana, Arial, san-serif; font-size: 13px; line-height: 24px; color: #666; margin-bottom: 22px; } Here's an example http://jsfiddle.net/5UJZW/
h1 { font-family: Georgia, Time, serif; font-size: 32px; color: #333; margin-bottom: 22px; } p { font-family: Verdana, Arial, san-serif; font-size: 13px; line-height: 24px; color: #666; margin-bottom: 22px; } Here's an example http://jsfiddle.net/5UJZW/
I'm using : Aaargh for the title & Colaborate-Light-Regular All caps for rest of the site. I like minimalism so two fonts, two colors and lot of white space on my website: http://akshit.me . You can browse easy to use free fonts at http://www.fontsquirrel.com
If you are on Firefox, then install Firebug and the next time you see a well-designed site with a font you like, pop Firebug open and checked font-family under Computed Style for the text in question.
Chrome/Webkit has a built-in "Inspect element" functionality that gives a similar access to the computed font-family value.
Chrome/Webkit has a built-in "Inspect element" functionality that gives a similar access to the computed font-family value.
go typekit and find some. whatever fonts u need can load from cloud & it's fast.
P.S. Some pointers on Typography & the latest Web design paradigms would be a great help as well. Thanks in Anticipation.