Typography - Getting The Hang Of Typography

(lu) #1

So, the theory is that you should apply a small indentation to every text
paragraph after the first one. You can easily do this with an adjacent sibling
combinator:


1 p + p {

(^2) text-indent: 1em;
3 }


This selector targets every paragraph (i.e. p) that follows another


paragraph; so the first paragraph is not targeted.


Another typographic rule of thumb is that bulleted lists and quotes
should be “hung.” This is so that the flow of the text is not disrupted by
these visual distractions.


The CSS Text Level 3 specification has an (incomplete) reference to an
upcoming hanging-punctuation property.


For now, though, you can use the text-indent property with negative


margins to achieve the desired effect:


1 blockquote {

(^2) text-indent: -0.2em;
3 }
For bulleted lists, just make sure that the position of the bullet is set to
outside and that the container div is not set to overflow: hidden;
otherwise, the bullets will not be visible.

Free download pdf