Quite often typography is one of most ignored aspects of website design. Poor typography can make your website feel bland or boring, and at worst impact readability. Here are two small flourishes that can add a little bit of polish to a blog or text-heavy site to liven it up a bit.

Drop Caps

Drop Caps are a type of initial which historically speaking were the first letter of a body of work, a chapter, or a paragraph. Typically ornately painted or hand drawn, the initial would guide the reader through text to a break or an important section. The word is derived from initialis, which in Latin means 'standing at the beginning'. A 'drop cap' is an initial that is dropped down into the paragraph and the rest of the text flows around it. Illustrated initials are believed to have originated in eighth century and were crafted right into the text. When the printing press was developed in 1440, early typesetters would intentionally leave large spaces so the drop caps could be added later by an artisan.

Jumping ahead a few centuries, drop caps have mostly fallen out of style. While originally used for spacing and readability, in modern times they are purely cosmetic. One of the last places you will find drop caps would be in newspapers. Prior to CSS3 emulating drop caps on the web was inelegant - you had to use spans on the first letter of the paragraph or section along with some other tricks. With the introduction of the :first-letter attribute, CSS3 makes it simple to use. Taking a look at the code below we can see what is needed to achieve this style.

Here we target the first letter of the example class, displaying it as a block, floated to the left. Increased font-size and line-height (depending on the typeface used), as well as setting a negative bottom margin to make sure the following text tucks up right underneath the initial. Be sure to use with an appropriate typeface and adjust the font-size and line-height to match.

Pull Quotes

Another little flourish we can add to a text-heavy page is a pull quote. Pull quotes can often fix attention to an important part of an article, but should be used sparingly. Used more than once or twice and they start losing their importance. There are many ways of using a pull or block quote but I wanted to share a simple method for a right-aligned pull quote with text-based quotation marks and very little CSS. HTML5 also introduced the <q> or small-quote element, however for this example I used a basic quote_block class along with a :before and :after to keep things simple.

To keep it easy I just wrap my quote in the quote_block class, adding quotation marks automatically on both ends through CSS. Similar to the drop cap example, its just a simple float and margin adjustment to line everything up. Again, margins and font-size will depend on the typeface you are using. To keep the last line of text from dropping away from the body of the quote we need to set the :after quotation mark to have a 1px height, this keeps everything inline and properly spaced. I added a float: right; as well as padding and a subtle background to position and emphasize the quote, and here you can see the results.

Typography is the most important part of your website because it directly impacts communicating your ideas with your readers. Focusing on how your text reads is just as important as what it says. If nobody wants to read it, whats the point? In the next post we'll take a look at how you can use Vertical Rhythm as we continue to look at typography and readability.