Building a Word Clock: Where Typography Meets Time

A word clock displays the current time as a sentence. Instead of "10:35", it reads "IT IS HALF PAST TEN." The concept is elegant: the time is always readable in natural language, making the clock feel more human than a digital display.

Physical word clocks are design objects that cost $200-$1,000. They are grids of letters where specific letters illuminate to form time-describing phrases. Building a digital version reveals interesting problems in language, layout, and time representation.

The language grid

A physical word clock arranges letters in a grid (typically 10x11 or 11x10) where every letter is part of at least one potential word. The grid might look like:

I T L I S A S T H P M
A C Q U A R T E R D C
T W E N T Y F I V E X
H A L F S T E N F T O
P A S T E R U N I N E
O N E S I X T H R E E
F O U R F I V E T W O
E I G H T E L E V E N
S E V E N T W E L V E
T E N S E O C L O C K

At 10:35, the system illuminates: "IT IS" + "TWENTY FIVE" + "PAST" + "TEN". All other letters remain dim.

Time mapping logic

The challenge is mapping every possible clock time to a phrase:

:00 -> "O'CLOCK"
:05 -> "FIVE PAST"
:10 -> "TEN PAST"
:15 -> "QUARTER PAST"
:20 -> "TWENTY PAST"
:25 -> "TWENTY FIVE PAST"
:30 -> "HALF PAST"
:35 -> "TWENTY FIVE TO" (next hour)
:40 -> "TWENTY TO" (next hour)
:45 -> "QUARTER TO" (next hour)
:50 -> "TEN TO" (next hour)
:55 -> "FIVE TO" (next hour)

After :30, the phrasing switches from "past" the current hour to "to" the next hour. This requires knowing the next hour for every time after half past.

In code:

function getTimeWords(hours, minutes) {
  const hourNames = ['TWELVE', 'ONE', 'TWO', 'THREE', 'FOUR', 'FIVE',
    'SIX', 'SEVEN', 'EIGHT', 'NINE', 'TEN', 'ELEVEN'];

  const roundedMinutes = Math.round(minutes / 5) * 5;
  const isPast = roundedMinutes <= 30;
  const displayHour = isPast ? hours % 12 : (hours + 1) % 12;

  let phrase = 'IT IS ';

  switch (roundedMinutes) {
    case 0:  phrase += hourNames[displayHour] + ' O CLOCK'; break;
    case 5:  phrase += 'FIVE PAST ' + hourNames[displayHour]; break;
    case 10: phrase += 'TEN PAST ' + hourNames[displayHour]; break;
    case 15: phrase += 'QUARTER PAST ' + hourNames[displayHour]; break;
    case 20: phrase += 'TWENTY PAST ' + hourNames[displayHour]; break;
    case 25: phrase += 'TWENTY FIVE PAST ' + hourNames[displayHour]; break;
    case 30: phrase += 'HALF PAST ' + hourNames[displayHour]; break;
    case 35: phrase += 'TWENTY FIVE TO ' + hourNames[displayHour]; break;
    case 40: phrase += 'TWENTY TO ' + hourNames[displayHour]; break;
    case 45: phrase += 'QUARTER TO ' + hourNames[displayHour]; break;
    case 50: phrase += 'TEN TO ' + hourNames[displayHour]; break;
    case 55: phrase += 'FIVE TO ' + hourNames[displayHour]; break;
  }

  return phrase;
}

The 5-minute rounding question

Word clocks round to the nearest 5 minutes. At 10:32, the display shows "HALF PAST TEN." At 10:33, it shows "TWENTY FIVE TO ELEVEN." This 5-minute granularity is inherent to the format.

Some implementations add dots (LEDs at the corners) to represent the 1-4 minutes between 5-minute intervals. One dot for 1 minute past, two dots for 2 minutes, etc.

Multilingual word clocks

The concept works in any language, but each language requires its own grid and mapping. German time-telling is famously different: 10:30 is "HALB ELF" (half eleven, not half past ten). French uses "ET QUART" and "MOINS LE QUART." Japanese uses entirely different counters.

Building a multilingual word clock is a localization exercise that goes beyond simple translation -- the time-telling conventions themselves differ.

I built a word clock at zovo.one/free-tools/word-clock that displays the current time as illuminated words in a letter grid. It updates every minute, supports multiple visual themes, and works as a full-screen display. It is a functional clock that looks like a piece of typographic art.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.