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).

Read more…

Tools I use


Read more…

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

Read more…

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!

Read more…

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.

Read more…

Ethan Marcotte: It’s not about the device.

Ethan Marcotte:

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.

Read article

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%);
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’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.