By Marko Dugonjić CHAPTER 9This becomes especially handy at small screen sizes, where not many
bits of information compete for the reader’s attention.
p { margin-bottom: 0; }
p + p { text-indent: 1em; }
This example is just a simple trick to cram more content into a screen
without sacrificing readability. To learn about many more options to
style paragraphs on the Web, definitely check out Jon Tan’s “12 Examples of
Paragraph Typography”^67 and the Web typography chapter he co-authored in
Smashing Book #1^68.
letter Spacing
By default, letters on screen can appear too close to one another, especially
on high pixel density screens. This can be improved quite easily by using
the letter-spacing property. Mobile Safari on the iPhone accepts let-
ter-spacing increments of 0.01ems, which comes in handy on iOS devices.
While IE7+ and newer versions of Firefox are capable of rendering
such tiny increments, the coarseness of the 96dpi screen usually produces
less than satisfactory results, so it’s better to reserve such nuances for high-
dpi screens only.
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
p {
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.01em;
word-spacing: 0.01em;
}
}
67 http://v1.jontangerine.com/silo/typography/p/
68 https://shop.smashingmagazine.com/smashing-book.html