Question

Typography is one of the things that I can never get right when I design the web pages in css, the headings and body text never looks and feels as good as most other websites I see on the web. By this I main that my typography does not feel as readable and spacious as on these websites

I do try to copy the css of these nice looking websites, but I never seem to get the same result (or at lest I never seem to make those techniques my own, so that I can use them in the future). Plus, when it comes to typography, my css is all over the place; if I need to change the style later on, I spend a long time searching for the relevant value

When I first started learning css, I found a lot of tutorials on how to get the page layout correct (static, fluid, navigation left/right) but I never found any thing useful on how to get the right look and feel when it came to typography.
on the other hand there are a lot of book on typography but the don’t seem to help on how to get typography looking good on the web.

I am hoping you can suggest some resources, or any fixed approaches that would always guaranty that type will look good on the web

Thanks

Answer 1

This article may be useful: http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

You’re already doing the right thing by poking around the sites you admire and trying out their css; it’s one of the best ways to learn.

In general, when I’m working with typography, the best things you can do to make it look good is to consider three things: contrast, color, and visual hierarchy.

• Contrast: If your text is presented on a background with a color that does not contrast it well, it’s going to look bad. So bad, in fact, that it may be deemed ‘inaccessible’. You can use a tool such as Colour Contrast Check to make sure your text complies with Web Content Accessibility Guidelines.
• Color: You’ll probably find that most of the site you enjoy don’t have truly black text. Pure black isn’t commonly found in nature, and black text on a white background is the highest contrast you can get, which can look a little harsh. Most sites tone it down by making their black text slightly gray, with css such as color: rgb(30,30,30);
  If you want to use colors, try to pick ones that work well together using basic color theory. Either that, or pick a nice dark color and stick with black.
• Visual Hierarchy: Basically, use bigger fonts for more important headlines. So an h1 will most likely be your biggest piece of text, with each size going down all the way to h6, and anything else in p tags should be roughly the size of the text you see here. Webdesign Tuts just recently posted an article on visual hierarchy that was pretty good.

Hope that helps!