4

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?

4
  • 1
    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.
    – Hanna
    Dec 24, 2013 at 17:32
  • 1
    @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 :)
    – JohnB
    Dec 24, 2013 at 17:34
  • 2
    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, 2013 at 22:54
  • @JohnB I didn't even realize you asked the question too. facepalm
    – Hanna
    Dec 24, 2013 at 23:39

2 Answers 2

4

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.

-1

My inclination would be to substitute a different character for the colon--perhaps a semicolon. Using a semicolon would mean that provided it was the same width as the colon, blinking by toggling between the two would not disturb the placement of other elements. Things would only really appear "correct" in a font where the appearance of the colon was suitable for a "disabled" colon, but that wouldn't necessarily be the same thing as blank. One might, for example, want a font where active segments are shown solid and inactive ones as outlines. In such a font, a semicolon would show up as two outlined dots.

An additional advantage of a semicolon is that with most fonts, an animation formed by cycling between a colon and semicolon would appear as a colon with a blinking tail. Not ideal, but probably the best that can be achieved without a whitespace character whose width is specified to be the same as a colon--something most fonts don't have.

1
  • Downvoter: Care to comment? If one is making a custom font, having a character to represent a "disabled colon" would seem useful, and character code 0x3B (semicolon) would seem as suitable as any other.
    – supercat
    Mar 6, 2015 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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