4 ms·
Ask HN: Which fonts do you use on the web for your websites/blogs?
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.
- whichdan 15y agoTo 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 http://en.wikipedia.org/wiki/Core_fonts_for_the_Web [2] http://www.google.com/webfonts http://www.google.com/webfonts
- ameen 15y agoThank you. Btw, Do you use font stacks and @fontface kits? Also, what are your favorite fonts?
- whichdan 15y agoI 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 15y agoIf 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/ http://jsfiddle.net/5UJZW/
- latitude 15y agoIf 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 15y agoI'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 http://akshit.me . You can browse easy to use free fonts at http://www.fontsquirrel.com http://www.fontsquirrel.com
- vonstark 15y agogo typekit and find some. whatever fonts u need can load from cloud & it's fast.
- michaeledge 15y agoAs mentioned before http://fontsquirrel.com 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-syntax 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/ http://www.blueprintcss.org/ Good luck, Michael.