Two dots, and a dot with a tail. The colon and semicolon look like leftovers from the period and the comma, and in a way they are. But one of them has a known inventor and a specific year, and the other is the reason the first smiley face on the internet looked the way it did.

A Short History of the Colon and Semicolon

The colon is the older of the two. The word comes from the Greek kolon, meaning “limb” or “member,” and in the dot system devised by Aristophanes of Byzantium around 200 BC, a kolon was a medium-sized piece of a sentence, longer than a komma and shorter than a full period. It was marked with a dot placed at the middle height of the line. Over the following centuries, scribes stacked two dots vertically to make the mark we know, and by the Middle Ages the colon was used to signal a pause or an introduction to what follows.

The semicolon, by contrast, has an unusually well-documented origin. It first appeared in print in 1494, in a short book called De Aetna by the scholar Pietro Bembo, printed in Venice by Aldus Manutius. The type was cut by the punchcutter Francesco Griffo, who designed a mark that combined a period above a comma. It was meant to indicate a pause stronger than a comma but weaker than a period, a middle step the older marks didn’t cover.

It spread slowly. English writers adopted it in the 16th and 17th centuries, and by the 18th century it had become a standard part of punctuation, along with a long list of rules about how to use it.

Hold on a sec! Check out this bundle for way better font prices. 👀

Now, back to where you were. Don’t forget to check that bundle later!

Anatomy of the Colon and Semicolon

The colon is two dots, one above the other. The lower dot sits on the baseline. The upper dot sits at the x-height, so it lines up with the top of lowercase letters like “a” and “e.” Both dots are borrowed directly from the period, with the same size and shape.

The semicolon keeps the upper dot at the same x-height position, and replaces the lower dot with a comma, whose tail drops below the baseline. That comma is the same one used elsewhere in the typeface, so the semicolon inherits its tail shape and weight.

The distance between the two parts is the main design decision. If the dots are too close, they merge into a single blob at small sizes. If they’re too far apart, the glyph looks like two unrelated marks. Designers usually set the gap close to the diameter of the dot, and test how it behaves in running text.

Vertical placement also matters. In many typefaces the upper dot sits slightly below the true x-height, because a dot that touches the exact top line tends to look like it’s floating above the letters next to it.

Designing the Colon and Semicolon From Scratch

Designers draw these glyphs after the period and comma are finished, since both are assembled from those parts. The work isn’t copying and pasting, though. The colon and semicolon sit in the middle of a line of text, so their position relative to the lowercase letters around them matters more than their individual shape.

A good test is to set the colon in different situations: after a word, between digits in a time like “10:30,” and in a ratio like “3:2.” Between numbers, the colon looks best centered vertically between the baseline and the cap height, because numerals are as tall as capitals. In a sentence next to lowercase letters, it looks best aligned with the x-height. Many professional fonts handle this with an OpenType feature, often called “case,” that shifts the colon up automatically when it sits next to capitals or numerals.

Spacing is the other major piece. English typesetting places no space before a colon or semicolon and one space after. French typesetting uses a thin space before both marks, along with the question mark and exclamation mark. A well-made font accounts for these conventions, or at least leaves room for a typesetter to adjust them.

Unique Facts About the Colon and Semicolon

The colon is the origin of the smiley. On September 19, 1982, computer scientist Scott Fahlman posted a message on a Carnegie Mellon University message board suggesting that 🙂 be used to mark jokes, and 🙁 to mark serious posts. That sequence, a colon, a hyphen, and a parenthesis, is the ancestor of every emoji smile today.

Writers have strong feelings about the semicolon. Kurt Vonnegut famously wrote that semicolons “represent absolutely nothing” and that all they do is show you’ve been to college. Others defend it as the best tool for linking two closely related sentences.

In programming, both marks are working characters. The semicolon ends statements in languages like JavaScript, C, and Java, and the colon introduces blocks in Python and separates keys from values in many data formats.

The Colon and Semicolon in Popular Fonts

In Garamond and other old-style serifs, the dots are round or slightly diamond-shaped, and the semicolon’s comma has a curved, tapering tail, echoing the stroke of a broad-nib pen. Helvetica uses square dots and a short, angled tail, matching its engineered character. Futura uses perfectly round dots with a short, almost straight tail.

In script and handwriting fonts, both marks are often slightly irregular, with small flicks and uneven dots, so they feel handwritten.

Summary

The colon began as the mark for a medium-length piece of a sentence in ancient Alexandria, and it ended up the foundation of the smiley face. The semicolon was introduced by a Venetian printer and a punchcutter in 1494, and it has been debated ever since. Both are built from a period and a comma, but their position, spacing, and context make them more demanding to design than they look.

Here Are Some Fonts You Might Love! 👀