Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Background Information

I'm working on creating a semi-monospaced font that will mimic a seven-segment display. There are many existing fonts for this purpose, but none of them quite fit my needs.

The intended use of this font is for a few different web applications to mimic the appearance of a clock. The sample below is an example of how I'd like to use it.

seven-segment font example

In order to simulate the blinking colon, I would like to continually toggle the text between the following states:

  1. 08:54
  2. 08 54

The problem

Since seven-segment fonts are typically monospaced fonts, the space character is the same width of one of the digits. As you can see in the graphic above, the colon is much thinner than the digits, so I cannot just use a standard space (U+0020).

Here is a live JSFiddle example. As a placeholder for testing, I've just used the thin space, but I'm not sure that's the best choice semantically since there are many whitespace characters available to select from. Which one should I use for this purpose?

share|improve this question
You could also put the colons in their own element on the page with a set width, and forgo the white-space issue all together. Though @JohnB offers a good solution that's built right into the font. –  Johannes Dec 24 '13 at 17:32
@Johannes indeed, that's what I've done in the past. However, that solution seemed hack-ish to me, so I set out to create something just for this sort of situation. It was also an excuse to try and make a font, since I had never made one before. Gotta start with an easy one :) –  ZohmB Dec 24 '13 at 17:34
Are you saying you'd like to make the colon blinking by swapping the colon character for a space character? If so, I'd suggest doing it in a different way...such as toggling the color of the colon from red to white. –  DA01 Dec 24 '13 at 22:54
@JohnB I didn't even realize you asked the question too. facepalm –  Johannes Dec 24 '13 at 23:39

1 Answer 1

A thin space should be "a fifth of an em (or sometimes a sixth)". The punctuation glyph is just slightly over four times the width of the digit glyphs, so that character does not make sense semantically.

Since this character is being used as a placeholder for punctuation, it appears the most semantically appropriate character to use is the Punctuation Space (U+2008).

space equal to narrow punctuation of a font

Another whitespace character that should be considered for implementation is a Figure Space (U+2007):

space equal to tabular width of a font

this is equivalent to the digit width of fonts with fixed-width digits

Though I wouldn't presume that anyone would expect a seven-segment font to include this, it is nice to include it as a fallback.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.