Tombstones in Typography

Some thoughts and examples of using the tombstone in typography on the web.

If you search for information on this topic, you're likely to get a bunch of articles on the typography found on tombstones (a very interesting topic). So just to be clear: this article concerns the typographic symbol called the tombstone, which is used to mark the end of various written pieces.

A little history

Although many people (myself included) know the tombstone from mathematics as the "end of proof" or "Q.E.D." symbol, it was first used to mark the end of articles in magazines and other written contexts. As a quick search will point out, the symbol might also be called the Halmos after the individual who apparently introduced it to mathematics.

It appears the tombstone has only partially made the transition into web publications. A quick survey of the top 50 online news sites (for this, ad blocking software is recommended) reveals that almost nobody uses it, with the exception of a round red dot from the UK publisher The Independent and the company logo from NBC News. Most others simply end an article with a copyright remark or our dear friend, the comment section. (If you see the tombstone or another similar end-mark in use, I'd love to add examples at the end of this article.)

Evaluating its purpose

In any case, such a symbol serves to separate the main content from whatever may follow, whether it be another article, an editorial remark, or - let's be honest - an advertisement. It's easy to see why this proved useful in the context of a magazine, which may have text displaced all throughout the page due to images and the like. Seeing a small box at the end of the paragraph alerted the reader that something new awaited them on the next page.

I'd argue this remains important on the web. With advertisements looking increasingly like other content, and last year's trend of infinitely scrolling news stories, it can be difficult to pinpoint where the main content ends. Perhaps this is good for publishers who wish to present advertisements, but it places a small mental tax on readers.

Implementing it

Let's first take a look at how The Independent and NBC News implement their marks:

/* Styles taken from http://www.independent.co.uk */
.full-article .text-wrapper
  > p:last-of-type::after {
    background: #EC1A2E none repeat scroll 0% 0%;
    border-radius: 8px;
    content: " ";
    display: inline-block;
    height: 16px;
    left: 6px;
    position: relative;
    top: 2px;
    width: 16px;
}

/* Styles taken from http://www.nbcnews.com */
.article-body
  > p:last-child::after {
    background-image: url(...);
    background-repeat: no-repeat;
    background-size: 18px auto;
    bottom: -8px;
    content: "";
    display: inline-block;
    height: 18px;
    position: relative;
    width: 18px;
}

Between these two, I prefer p:last-of-type to p:last-child since it allows writers to put non-textual content afterwards with no issue. NBC's logo simply doesn't show if the article ends with a photo or blockquote.

Based on these, and my own requirements / opinions, I've settled upon this:

.article > p:last-of-type::after {
    border: 1px solid currentColor;
    content: '';
    display: block;
    float: right;
    position: relative;

    /* To be changed based on typeface */
    height: 0.625em;
    margin-left: 0.3em;
    top: 0.3em;
    width: 0.625em;
}

Of course, there is a UTF character for the tombstone (∎). Unfortunately it suffers from wild variation by typeface - and I simply don't like the way it looks in most. Thus I've chosen to use a square box, about the cap height of the body typeface, similar to what is produced by LaTeX for mathematical documents. You might prefer the box to be filled in, which is quite common. Everything is relative and ought to adjust well with changes in the font-size property.

Also, I like to have the tombstone right-justified, especially if the paragraph text itself is justified. This follows partly from its use in LaTeX documents, and partly from my own preferences.

Here's a CodePen example annotated with my style suggestions, if you'd like to try it out:

See the Pen Tombstone by AJ Foster (@aj-foster) on CodePen.


If you use or see the tombstone on the web, I'd love to hear about it. Happy writing!


Additions & Errata