Wouldn’t it be nice if we could use a clamp()-like syntax for more granular typesetting on the web? Add the proposed hyphenation properties to the mix and you’ve got hyphenation and justification control that could rival InDesign / Quark:

p {
text-align: justify;
letter-spacing: clamp(-0.02em, 0, 0.02em);
word-spacing: clamp(-0.02em, 0, 0.02em);
hyphens: auto;
hyphenate-limit-chars: 5 3 3;
hyphenate-limit-last: always;
hyphenate-limit-lines: 2;
hyphenate-limit-zone: 10%;
font-stretch: clamp(97.5%, 100%, 102.5%);
}

How it produces total delight in almost everyone almost straightaway is a miracle of design.

That’s Brian Eno writing about Kid Pix, an early Mac paint application for children. Discovered via the description for this beautiful short film: Meeting Mr. Kid Pix. Watch the vid for a surprise Bowie appearance!

‘The optimism of modernity’ aims to tell the story of an incomplete and now almost forgotten project: that of modernity in British typography. This is envisaged as a matter not of style but of ‘design as a visible form of social philosophy’ and as an optimistic claim on enlightenment.

The optimism of modernity (via FMS).

Above all, I tried not to take it too seriously: even though I still spend almost all of my time thinking about it, it is only graphic design.

Lovely interview with Sara De Bondt over at Unit Editions.

The Fell Runner magazine

The Fell Runners Association have created an online archive of The Fell Runner magazine, including issues from 1971 to 2013. This sport and it’s surrounding culture was a huge part of my childhood in Yorkshire (pretty sure my dad owns most of these), so browsing the archive brings back a lot of memories. Most of the issues shown here are A5 size (or thereabouts). The format changed to A4 in Spring 1986, and the first full-colour cover appeared in October 1991.[1] Here are some personal favourites of the covers.


  1. The Fell Runner Index 1971–2019: An Introduction (PDF) ↩︎

Spent the day making a private website and podcast feed for my friends and I to share audio recordings from our respective parts of the world. Mostly nature. All great.

Eleventy compiles the site using data from a collaborative Airtable base (this is how my friends will be able to upload their audio directly). Netlify is the host, which will likely be configured to re-deploy the site using an IFTTT trigger (once I set this up).

Loop through an arbitrary number of items in Nunjucks

Loop through an arbitrary number of items using the Nunjucks range function. This is very useful when prototyping to generate dummy markup or content. This example outputs 10 <div> elements:

{% for i in range(0, 10) %}
  <div></div>
{% endfor %}

You can also include the index in the output, like so:

{% for i in range(0, 10) %}
  <div>{{ i }}</div>
{% endfor %}

I used this concept all the time when prototypying with Pug, but since I’ve been working with Eleventy more I’ve decided to switch to using Nunjucks where feasible, so I’m re-learning some old techniques. For completeness, here’s the Pug method:

for i in Array(9)
div #{i}

Site Query back online

Site Query is back online. I spent a little time resurrecting it, which mostly involved fixing minor bugs and removing the obsolete build process. Since the code was already in a GitHub repository it made sense to host a working version on GitHub Pages, keeping it all nice and self-contained.

It was tempting to fix some of the questionable design decisions or poorly-written code, but I also liked the act of faithful restoration and just letting it do it’s thing.

Here are some sample queries:

  • Search for cat across several art galleries / collections
  • Search for tree across several copyright-free image sites
  • Search for poster across several design studios

Moving RSS

I’ve decided to incorporate this blog into my main site, moving it from the subdomain where it previously lived. I think I’ve correctly redirected the old feed URL, but in case it doesn’t work please point your RSS readers to: https://sambaldwin.info/feed.xml

Default stylesheets

I’ve needed to refer to browser’s default stylesheets several times and it always takes me longer to find them than it should. Making a note here for future reference and in case it’s a helpful resource for others.

I’ve excluded Microsoft Edge since it’s soon (January 2020) going to be built on Chromium.

What do you like about your favourite things? Compare pubs closely. What makes a good pub? Location, publican, people who use it, decor, privacy, good beer, comfort? Also launderettes. What makes one better to be in than another? Lighting, surfaces, facilities, efficiency? How would you make one better?

Norman Potter, “Questioning design” from What is a designer (pp.157)

Blog typography update

The body copy on this site is now set in Standard and code is set in Courier, replacing Atlas Grotesk and Atlas Typewriter respectively.

Standard was released by Bryce Wilner in 2017, as a “translation and modification of Berthold’s 1896 version of Standard” (Standard being the name that Akzidenz-Grotesk was distributed under in England and the US). Wilner’s initial release was limited to book and book italic styles, but bold and bold italic styles have since been added.

True superscript and subscript figures with font-variant-position

Most good typefaces include OpenType alternates for superscript (superior) and subscript (inferior) figures. Web browsers don’t appear to use these by default, and instead mimic these characters by shrinking the font size and adjusting the vertical alignment. This presents a nice opportunity for some progressive enhancement.

The snippet below leverages a font’s true super-/subscript numerals by resetting the default browser styling and then setting the font-variant-position property with corresponding values for sup and sub elements. The whole thing is wrapped in an @supports ruleset, so we can display the original faux super-/subscript numerals for browsers that don’t support font-variant-position (looking at you, Chrome).

Tools I use

Hardware

Site Query

Site Query was a simple tool for constructing combined site: Google Image searches. By storing the search string as parameters in the URL, the queries could be easily saved as bookmarks or shared with other people.

The project was created in a cold January afternoon back in 2015 in the studio with Piper Haywood, but is no longer online. Below, some screenshots for posterity.

The default landing page:

Site Query default landing page

Scroll-linked Animations

Speaking of scrolling, an unofficial draft proposal has been authored for “scroll-linked animations”. The proposal defines an API for creating animations and effects that respond to scroll-based interactions. It covers several common patterns, such as a navigation bar shrinking effect, a navigation highlight effect, and – my favourite – a reading progress bar:

@keyframes progress {
  to { width: 100%; }
}
#progress {
  width: 0px;
  height: 30px;
  background: red;
  animation: progress 1s linear;
  animation-timeline: scroll(element(#body));
}

So simple!

Intersection Observer

Support for the Intersection Observer API just landed in Safari in macOS 10.14.4 and iOS 12.2.

Scrolling is arguably the default user action on the web, so having a performant way to respond to this input is incredibly powerful from a design perspective. This complements several other recent features, such as native CSS Scroll Snapping, smooth scroll-behavior, sticky positioning – all of which can be utilised in a progressively-enhanced way with the powerful CSS @supports rule.

Personally, the Apple Watch is interesting to me not because it’s a watch. Rather, it’s interesting to me because it’s a smaller-than-normal touchscreen attached to a cellular antenna, and one that’s not necessarily on the most reliable connection. It helps me look past the device, and to think about how someone will interact with my work under those conditions. Once I do that, I can start to design accordingly.

Ethan Marcotte: It’s not about the device. See also: Device Agnostic (2014) by Trent Walton.

Simple dark mode with CSS filters

As a big fan of macOS Mojave’s dark mode, I was excited to see a new media query for targetting this user preference land in a recent release of Safari Technology Preview.

I’ve seen others add support to their websites by redefining colour variables or properties – which is probably the way to go in most cases. But it occurred to me that since this blog (currently) contains no images or rich media, I can get a very cheap dark mode by inverting the whole document using the filter property, like so:

@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
}
audio,
canvas,
embed,
iframe,
img,
object,
video,
svg
{
filter: invert(100%);
}
}

To see for yourself, open up this page in the latest Safari Technology Preview.

For good measure, I’ve also included a rule set to invert the images, videos, and other replaced elements back to normal, so that these don’t get inadvertently affected should I include them in future. This idea is borrowed from Are.na’s stylesheet, where they scope their dark mode styles to an .is-inverted class (try it out on their site by using the keyboard shortcut Ctrl + Shift + i).

Recent reading III

Imagining a Solar-Powered Internet: Kris De Decker Low<–Tech Magazine

So you have to adapt your society or technology to a new type of energy source. We actually need a lot of innovation because all our technology is based on fossil fuels, and it doesn’t really work with intermittent power sources. Which could be done, for instance: in some developing countries, internet networks are not always on. They are indeed intermittent, because they work with solar panels. Every internet node has a solar panel, and the data only gets from one node to another if there is sun. Your email might take three days to arrive, depending on the weather. So you can adapt basically anything to an intermittent energy supply. It’d be a kind of cultural shift towards something more sustainable.

How do you use the internet mindfully?

This summer we got to watch a workshop created by a few friends that used colorful cardboard blocks to imagine the internet as a city. Together they built structures that represented different ways of organizing the infrastructure of the web. “If the Internet were a city,” they asked, “what would be its roads, buildings, and parks?”

Typography on the Web (2015)

What we gained with modern web technology is the ability to have the layout (and even fonts) automatically react to outside conditions like screen format, device capabilities, user preferences, or even reading distance. Design is no longer about tailoring invariable content to one specific embodiment; the web forces us to think about typography in terms of parameters and to get clear about content versus form.

Archiving Is The New Folk Art (2011)

Clearly, all of this is a far cry -- and a lot of extra busy work -- from the act of merely listening to music. In fact, I spend much more time acquiring, cataloging and archiving my artifacts these days than I do actually engaging with them. The ways in which culture is distributed and archived has become profoundly more intriguing than the cultural artifact itself. What we’ve experienced is a inversion of consumption, one in which we’ve come to engage in a more profound way with the acts of acquisition over that which we are acquiring; we’ve come to prefer the bottles to the wine.

The Utility of Fun

Having spent a significant amount of time in design classrooms critiquing work and cutting my teeth, I sympathize with students who feel the pressure to create work imbued with austerity. Students easily fall into the trap of thinking that if something doesn’t feel clean, and professional, that it isn’t good. If it isn’t good, they won’t get a job. If they don’t get a job, they can’t pay off their loans. Obviously, I disagree. This notion is dangerous, and can strip professionals of the joy that is vital for sustaining careers.

Sourdough Bread! The oldest (and probably best) loaf

Sourdough is fetishized like nobody’s business. It’s also the most bro-y of all foods (the only challenger is BBQ). YouTube is full of white dudes with beards and tattoos talking sincerely about hydration levels, scoring patterns and oven humidity. The root of it, I suppose, is the fascination with how a simple ingredients list (flour, water, salt) can produce such wildly different results. The magic is all in the process, and bros love a process.

The HTML Mark Text element

TIL about the <mark> element (HTML Mark Text element) – an inline tag used for highlighting a passage of text. Most browsers apply a fitting bright yellow background and black text by default. For example (via MDN):

When used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn’t think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest.

Quoting a passage from another source and adding commentary is such a common post type on many popular blogs, that I’m kind of surprised this tag isn’t used more commonly. For designers I think it provides an interesting typographic opportunity, and for content authors a helpful alternative to bold and italic styling.

go-2.txt

This is a RECORD COVER.  This writing is the DESIGN upon the
record cover.  The DESIGN is to help SELL the record.  We hope
to draw your attention to it and encourage you to pick it up.
When you have done that maybe you'll be persuaded to listen to
the music – in this case XTC's Go 2 album.  Then we want you
to BUY it.  The idea being that the more of you that buy this
record the more money Virgin Records, the manager Ian Reid and
XTC themselves will make.  To the aforementioned this is known
as PLEASURE.  A good cover DESIGN is one that attracts more
buyers and gives more pleasure.  This writing is trying to pull
you in much like an eye-catching picture.  It is designed to get
you to READ IT.  This is called luring the VICTIM, and you are
the VICTIM.  But if you have a free mind you should STOP READING
NOW! because all we are attempting to do is to get you to read
on.  Yet this is a DOUBLE BIND because if you indeed stop you'll
be doing what we tell you, and if you read on you'll be doing what
we've wanted all along.  And the more you read on the more you're
falling for this simple device of telling you exactly how a good
commercial design works.  They're TRICKS and this is the worst
TRICK of all since it's describing the TRICK whilst trying to
TRICK you, and if you've read this far then you're TRICKED but
you wouldn't have known this unless you'd read this far.  At
least we're telling you directly instead of seducing you with
a beautiful or haunting visual that may never tell you.  We're
letting you know that you ought to buy this record because in
essence it's a PRODUCT and PRODUCTS are to be consumed and you
are a consumer and this is a good PRODUCT.  We could have
written the band's name in special lettering so that it stood
out and you'd see it before you'd read any of this writing and
possibly have bought it anyway.  What we are really suggesting
is that you are FOOLISH to buy or not buy an album merely as a
consequence of the design on its cover.  This is a con because
if you agree then you'll probably like this writing – which is
the cover design – and hence the album inside.  But we've just
warned you against that.  The con is a con.  A good cover design
could be considered as one that gets you to buy the record, but
that never actually happens to YOU because YOU know it's just a
design for the cover.  And this is the RECORD COVER.

A plain-text reproduction of Hipgnosis’s album cover for Go 2 (1978), the second studio album by XTC. Rendered in <pre> tags to preserve whitespace.

Walking the Capital Ring

A good friend and I have started casually walking London’s Capital Ring, a 78-mile walk (split into 15 sections) which covers “open space, nature reserves, Sites of Specific Scientific Interest and more”.

Mapping InDesign tracking to CSS letter-spacing

Making a note of this since I always forget…

Tracking and kerning in InDesign are both measured in 1/1000 em, which is relative to the current type size. To map these values to CSS ems you just multiply by .001.

Here are some examples with InDesign tracking in the comments:

/* -40 x .001 */
letter-spacing: -0.04em;
/* 5 x .001 */
letter-spacing: 0.005em;
/* 20 x .001 */
letter-spacing: 0.02em;

Interesting orgs on GitHub

Since GitHub doesn’t allow you to directly follow organisations like you can users, I began collecting interesting ones over at Are.na. The criteria reflects my general interest and familiarity with the organisation, but contributions are welcome!

“… even the choice of a typeface for me is always this extremely laborious choice of trying to decide on what really makes sense for this context, what resonates historically, what is interesting in its own immediate context. There’s like a million decisions that go into that.”

Prem Krishnamurthy on Scratching the Surface ep. 13 (~23.5min). See also P!DF.

Tracker-free type on the web

A briefly-researched selection of type foundries that offer tracker-free webfont files for self-hosting:

Gerhard Richter on grey:

Grey is the epitome of non-statement … it does not trigger off feelings or associations, it is actually neither visible nor invisible … Like no other colour it is suitable for illustrating "nothing"

Design and build notes: sbaldwin.co.uk

This post was originally published on Medium, but is since removed. Strikethroughs represent some light edits made to the original.


Between client projects, I recently set aside time to redesign and build my personal website. The website is a simple online portfolio, aiming to provide context about my professional experience through writing and samples of past design work  –  all presented in a casual at-a-glance fashion. The prospect of a redesign provided a fun opportunity to explore a few new development techniques that I’d been keen to try out. In this post, I wanted to jot down some notes about said techniques both for personal reference and in case they’re of possible wider interest. Screenshots are provided as a snapshot of the site at the time of writing.