Aesthetic Clocks for Every Screen

Readability is about distance, not font size

A clock on a desk is read from about half a metre. One on a wall, from three. One on a conference room display, from eight or more. Legibility falls off quickly with distance, so a face that looks generous on a laptop can be unreadable on the television in the same room.

Signage design has a working rule: roughly 3 mm of digit height for every metre of viewing distance. A display read from six metres therefore needs digits about 18 mm tall, which on a 1080p screen is around 70 pixels. Anything smaller and people lean in or walk closer, and the clock stops being something you can glance at.

Contrast matters as much as size. Thin strokes and pale greys disappear at distance and in daylight. Every face here uses heavy weights and high-contrast colour pairs rather than decorative letterforms.

Where the time on screen comes from

Every clock on this site reads the system clock of the device you are looking at. There is no server round-trip and no account, so the display behaves the same way whether you are online or not.

That also sets the limit. A browser can only be as accurate as the machine underneath it, and that machine relies on its own time sync — usually NTP, sometimes a mobile network. On a phone or a laptop this lands within tens of milliseconds, far finer than the eye can resolve when seconds are the smallest unit shown. If the device clock is wrong, the page will be wrong in exactly the same way.

One consequence worth knowing: if you put two devices side by side and they disagree by a second, the difference is in the devices, not in the page.

Digital, flip, analog or 3D

Digital is the default for legibility — numerals as large as the screen allows, with nothing else competing for attention. It is the right choice where the time is a utility rather than a decoration.

Flip suits a space where the clock is part of the furniture: a lobby, a studio, a kitchen. The animation costs a little more CPU, and the split-flap geometry reads less well from an extreme angle, so give it a screen you face roughly head-on.

Analog is the calmest of the four. Hands communicate time as position rather than as digits, which is easier to read in peripheral vision, and a dial puts far less bright area on screen — the reason it is the least intrusive option at night.

3D is for displays that are meant to be looked at. It is the heaviest option, wants a reasonably modern GPU, and is not the face to pick if the same machine is doing other work at the same time.

Running a clock for days at a time

An always-on display is where most clock pages fall apart. Browsers throttle timers in hidden tabs, operating systems dim or sleep the screen, and a clock that looked correct for ten minutes is suddenly hours out of step.

Two things help. The Keep Awake toggle requests a screen wake lock where the browser supports it and falls back to a silent looping video where it does not, releasing automatically when the tab goes to the background. And for a screen that is genuinely unattended, treat the browser as a kiosk: use its own fullscreen or kiosk mode and switch off the screensaver at the operating system level. A page can ask the display to stay on; it cannot overrule a system policy that insists on sleeping.

If the panel is OLED, be careful with any static interface. Identical bright digits in the same place for weeks can leave a ghost. Lowering the brightness, or switching faces occasionally, is worth the trouble on a screen you care about.

Settings that survive without an account

Face, theme, 24-hour format, sound, time zone — every preference is written to the browser’s local storage rather than to a server. It survives a refresh and applies to every visit from the same browser, with nothing to sign up for and nothing to sync.

The trade-off is that preferences belong to one browser on one device, and clearing site data resets everything to the defaults.