the look

tuesday, 10 august 2021

for this site was originally inspired by a wiki based web app called Nanoki written in Lua, a scripting language I had been investigating at the time. The clean monochromatic layout of its original example site “Sputnik” (no longer hosted) aligned with my deference towards clean content focused layouts.

This site retains the simple header / content page, text only presentation format of Nanoki minus its revision history recall—of which, articles on this site, including this one, are re-edited and updated accordingly.

Unlike most sites, the darnedest thing has undergone many incremental and substantive changes, as it sought to find its visual “voice”. And much of that influence has been derived from the distraction free editing environment that feeds it.

fonts

spacing and layout all impart a visual “feeling” to a site. But more than anything, fonts express its character. Serifs with their romanticism and sans-serifs with their more clinical expression.

The original site used possibly the most recognizable of fonts, Helvetica throughout—not uncommon and for good reason due to its readability. From that simple beginning, text objects have become differentiated, refining the site’s “look”..

text object typeface  
title Major Mono Display
AdventPro
Jost*
Roboto
Helvetica
monospace geometric sans-serif
subtitle / table heading
Iosevka
Unica One
AdventPro
Roboto Jost*
Helvetica
monospace grotesque sans-serif**
header / footer Quasilexic
Roboto
Helvetica
quasi-proportional grotesque sans-serif**
body / table content Monolexic
Atkinson Hyperlegible
Jost*
Montserrat
Verdana
Helvetica
monospace grotesque sans-serif**
quotation / excerpt Monolegible
Sanchez
Courier
monospace grotesque sans-serif**
code Iosevka
DejaVu Sans Mono
monospace grotesque sans-serif**

**Slender monospace slab-serif typeface customized as an expanded width grotesque (variant) sans-serif font. subtitle / heading incorporates additional side bearing spacing.

This tabular rewrite of this article more graphically illustrates the progression of the look.

embellishments

The thin light headings are rendered in a reddish accent to the otherwise monochromatic layout on a soft paper (vim-duochrome) hued background. The use of light title and heading font weights reflects the distraction free design emphasis.. perhaps to the extreme for those with compromised visual acuity (a bit contrarian in lieu of my ever increasing focus on readability).

bold and italics are now rendered in x-height caps (as well as the three word lead in). This refined embellishment came about as a result of the limited weight selection available with the Atkinson Hyperlegible Font—the bold being far too heavy (for my tastes) and the italic visually looking larger by virtue of the elongated slanted strokes.

A matter of personal aesthetic, this feels much more aligned with the distraction free goals, albeit unconventional (but so is the use of the lower case first person “i”).

✱  ✱  ✱

Not perhaps a web designer’s choice of font groupings, weights and colours, the design hopefully expresses a clean, yet readable, minimalistic distraction free layout with a pinch of style and nimble page refreshes.

»»  split chords

comment ?