Lesson: Thou shalt not use CSS to obscure unpredictable text for ye users.
This happens because tje CSS for the planet makes the h1 and h2 to have a letter-spacing of -2 pixels due to h1 and div.channel h2 selector definitions. The problem starts when a person's post contains either a level 1 or level 2 heading. The div.content h* selector (where * = 1,2,...6) makes all of them to have a font-size of 100% and the reduced letter spacing in addition to the default bold font-weight of headings make them almost unreadable (Firefox, IE6, Konqueror). The reason behind this is that the letter-spacing: -2px definition is being applied to all h1 headings and all descendant h2 headings of div.channel selector. If we remove the letter-spacing in the level 2 heading in the post(shown above), it should look as shown below.
In such cases where the content is not predictable, CSS rules should take into account both the static and variables parts separately. A style sheet which took care of the static part using child selectors and separate selectors for content styling would have suited Planet Debian more. Using the suggested separation method, a child selector e.g. div.channel>h2 would not make the div.content h2 to be with reduced letter spacing and thus leaving headings in posts to be more easily legible as show by the second image above.
So although using CSS gives many advantages, using it without giving a real consideration to the actual content of the page, however unpredictable it may be, one can end up with difficult to read content due to misused CSS rules.
This post will help me with a visual example of the different between descendant and child selectors. I hope it serves useful purpose to others too. Have fun CSSifying your pages.