Typecast is all about experimenting with web type and creating great typographic design. So this week we’ve added indents and exdents as another tool to help you achieve typographic contrast.
Image may be NSFW.
Clik here to view.
We’re all pretty familiar with these paragraph styles. They’re everywhere in print. Both situate every line of a paragraph (except for the first) flush left to the margin. But with an indent, the first line is set a few units in from the margin – just like in the photo above.
With an exdent (also called an outdent and hanging indent), the first line of the paragraph is given a negative value that positions it left of the margin, like this:
Image may be NSFW.
Clik here to view.
To improve typographic contrast and also improve clarity for readers, more web designers are turning to these as an alternative to the conventional mainstay – the block, flush left, ragged right, single-line-paragraph-break. We think Nathan Ford’s post on microtypography makes a good case for the power and worth of the humble indent. And Contents Magazine is a great example of the indent used to great effect:
Image may be NSFW.
Clik here to view.
Whether indents and exdents are right for your project will depend on the content you’re working with and the other design decisions you’ve made. They’re not always a good fit, just as a line break isn’t the only ‘right’ way to set a paragraph. But we think it’s nice to have options, and now you can try them out quickly and easily before you decide.
For more on indents, exdents, other paragraph styling tips and examples, check out these posts:
- The Paragraph in Web Typography & Design by Jon Tan
- 12 Examples of Web Typography by Jon Tan
- Marking Paragraphs by Thinking with Type
Or just come give them a go.
