Typography for web design - secondary headings

ma65p's picture

I don't have much experience with typography, so please help.

I have trouble picking out the font for my secondary heading. Right now, font is Georgia and increased font size. Please take a look (I can't insert the image for some reason, keep getting errors, so I attached it.)

As you can see. It's annoying.

You probably know this but I remind you that there is a limited number of fonts available for websites. So please suggest cross platform fonts.

Also doesn't have to be just fonts, any recommendations about kerning, line spacing, word-spacing, letter-spacing, drop caps...?

Really, any constructive critic is important to me. I hope to learn more from you all.

Sorry for the clumsy sentences. i'm tired.

Thank you.

Sample Page.png112.78 KB
Lysyszyn's picture

Headers should always be appropriate for the content of the text.
If you don't want this header to be visible as the first thing in the text, you should try using the same typeface, size, kerning and line-spacing as in the main text + two blank verses (1 above and 1 below the headline). The white space created by blank verses will do just fine:) Using small caps is also a good choice, but it's difficult to make it in a webdesign...
But if it's really important for users of this page to notice this headline at once, making it a little bigger than the text (2-6pt) should be enough for w web page. You could also use some color (just keep it warm and it will be visible - red (but not #ff0000 :D) is perfect!
Hope I helped a bit:)
- Filip Łysyszyn

dberlow's picture

>Headers should always be appropriate for the content of the text.

I learn something new every day, or at least how better to explain it. ;)

I think the text of the header should be appropriate to the content of the text it headlines, clearly. But the style of the headers is usually selected to be appropriate to the design of an entire document, first, and then, if a designer wants to change the header for every part of the text, say story by story, it may then be appropriate to choose that style based on the content of that text.

On the web, little of this is particularly possible along with kerning (none), line spacing(okay), word-spacing(none), letter-spacing (bad), drop caps (hassle).

Have a nice day.


ma65p's picture

Thank you so much for your comments. And thanks dberlow, your explanation makes a lot of sense to me. I followed Lysyszyn's advice and added both space before and after to text and increase the text size. Below is the "revised version."

There is still a bit of problem. I read that we should put more space on top of the heading than the bottom so it's closer to the text.

Secondly, the heading still stands out too much. So I changed the color so it's the same with the body text, the heading is now not standing out enough.

Any other suggestions? Or this is good enough (stupid question, but hey...)

mk2's picture

Why dont you just present us a real sample html page instead of screenshots? So we all can inspect it using our various browsers. :D

joeclark's picture

If you’re going to use the title of one of my own articles as your own sample title, why not just borrow my CSS? My blog has the most-fine-tuned examples of heading CSS.

Joe Clark

Syndicate content Syndicate content