Type Specimin-esque Blockquote

Blockquotes can do a great job of using typography to emphasize the personality of a brand. While the whole suite of typographic tools goes in to play when evoking a brand through your use of type faces, blockquotes are an opportunity to really punctuate the feel you are trying to create.

Take, for example, the blockquotes on the latest version of the Treehouse blog:

Treehouse Blog blockquotes

Depending on when you read this, the look may or may not be in vogue, but it does creatively express the overall Treehouse brand: the font is consistent, the color is their green, they break with the common layout of blockquotes (which aligns with their top-notch design approach) and the double quotes in the background are iconesque, familiar to their mildly illustrative style.

Chris Coyier shares his version of Simple and Nice Blockquote Styling on CSS Tricks, and it inspired me to share one of my new favorite ways to style blockquotes, as well.

Shortly I will be releasing a little, free Wordpress theme I put together which is at some levels basic, though extremely useful for a narrow set of publishers (read the release post to understand more about why), but I'd like to think the typography is at least decent, and perhaps a bit reminiscent of a type specimen.

So I wanted something that stood out from the left-border-with-a-background-and-italics standard.

This is what I came up with:

Veritatis occaecati qui numquam dolor est iste dolor. Dolores maiores est aut enim et et necessitatibus. Voluptatem asperiores nulla voluptas excepturi voluptate culpa.

The CSS to do it:


blockquote {
  border-left: 1px solid #373737;
  margin: 2.5em 10px 2.5em 3.4em;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  content: '\201c';
  position: absolute;
  margin-top: 0.4em; // Adjust this to match the top of the double quote to the top of your text
  margin-left: -1em;
  font-size: 4em;
  line-height: 0.1em;
  color: #373737;
}

I'm sure something similar has been done before, but it took me a bit of tweaking to get just right, so I thought I'd put it out there.