HN Explorer

Ask HN: Which fonts do you use on the web for your websites/blogs?

6 points by ameen ↗ HN
I'm building my personal website with a blog. I'm confused about which fonts I should use. I'm an aspiring designer/developer and love well designed sites hence I would like to have beautiful readable fonts for my blog and different decorative font(s) for my website.

P.S. Some pointers on Typography & the latest Web design paradigms would be a great help as well. Thanks in Anticipation.

8 comments

[ 2.6 ms ] story [ 31.7 ms ] thread
whichdan
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

ameen
Thank you. Btw, Do you use font stacks and @fontface kits? Also, what are your favorite fonts?
whichdan
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.
alexwolfe
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/

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

axitkhurana
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
vonstark
go typekit and find some. whatever fonts u need can load from cloud & it's fast.