Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
53
So here I am playing with CSS view transitions (again). I’ve got Dave Rupert’s post open in one tab, which serves as my recurring reference for the question, “How do you get these things to work again?” I’ve followed Dave’s instructions for transitioning the page generally and am now working on individual pieces of UI specifically. I feel like I’m 98% of the way there, I’ve just hit a small bug. It’s small. Many people might not even notice it. But I do and it’s bugging me. When I transition from one page to the next, I expect this “active page” outline to transition nicely from the old page to the new one. But it doesn’t. Not quite. Did you notice it? It’s subtle and fast, but it’s there. I have to slow my ::view-transition-old() animation timing waaaaay down to see catch it. The outline grows proportionally in width but not in height as it transitions from one element to the next. I kill myself on trying to figure out what this bug is. Dave mentions in his post how he had to...
5 months ago

Improve your reading experience

Logged in users get linked directly to articles resulting in a better reading experience. Please login for free, it takes less than 1 minute.

More from Jim Nielsen’s Blog

How to Make Websites That Will Require Lots of Your Time and Energy

Some lessons I’ve learned from experience. 1. Install Stuff Indiscriminately From npm Become totally dependent on others, that’s why they call them “dependencies” after all! Lean in to it. Once your dependencies break — and they will, time breaks all things — then you can spend lots of time and energy (which was your goal from the beginning) ripping out those dependencies and replacing them with new dependencies that will break later. Why rip them out? Because you can’t fix them. You don’t even know how they work, that’s why you introduced them in the first place! Repeat ad nauseam (that is, until you decide you don’t want to make websites that require lots of your time and energy, but that’s not your goal if you’re reading this article). 2. Pick a Framework Before You Know You Need One Once you hitch your wagon to a framework (a dependency, see above) then any updates to your site via the framework require that you first understand what changed in the framework. More of your time and energy expended, mission accomplished! 3. Always, Always Require a Compilation Step Put a critical dependency between working on your website and using it in the browser. You know, some mechanism that is required to function before you can even see your website — like a complication step or build process. The bigger and more complex, the better. This is a great way to spend lots of time and energy working on your website. (Well, technically it’s not really working on your website. It’s working on the thing that spits out your website. So you’ll excuse me for recommending something that requires your time and energy that isn’t your website — since that’s not the stated goal — but trust me, this apparent diversion will directly affect the overall amount of time and energy you spend making a website. So, ultimately, it will still help you reach our stated goal.) Requiring that the code you write be transpiled, compiled, parsed, and evaluated before it can be used in your website is a great way to spend extra time and energy making a website (as opposed to, say, writing code as it will be run which would save you time and energy and is not our goal here). More? Do you have more advice on building a website that will require a lot of your time and energy? Share your recommendations with others, in case they’re looking for such advice. Email · Mastodon · Bluesky

6 days ago 10 votes
Occupation and Preoccupation

Here’s Jony Ive in his Stripe interview: What we make stands testament to who we are. What we make describes our values. It describes our preoccupations. It describes beautiful succinctly our preoccupation. I’d never really noticed the connection between these two words: occupation and preoccupation. What comes before occupation? Pre-occupation. What comes before what you do for a living? What you think about. What you’re preoccupied with. What you think about will drive you towards what you work on. So when you’re asking yourself, “What comes next? What should I work on?” Another way of asking that question is, “What occupies my thinking right now?” And if what you’re occupied with doesn’t align with what you’re preoccupied with, perhaps it's time for a change. Email · Mastodon · Bluesky

2 weeks ago 12 votes
Measurement and Numbers

Here’s Jony Ive talking to Patrick Collison about measurement and numbers: People generally want to talk about product attributes that you can measure easily with a number…schedule, costs, speed, weight, anything where you can generally agree that six is a bigger number than two He says he used to get mad at how often people around him focused on the numbers of the work over other attributes of the work. But after giving it more thought, he now has a more generous interpretation of why we do this: because we want relate to each other, understand each other, and be inclusive of one another. There are many things we can’t agree on, but it’s likely we can agree that six is bigger than two. And so in this capacity, numbers become a tool for communicating with each other, albeit a kind of least common denominator — e.g. “I don’t agree with you at all, but I can’t argue that 134 is bigger than 87.” This is conducive to a culture where we spend all our time talking about attributes we can easily measure (because then we can easily communicate and work together) and results in a belief that the only things that matter are those which can be measured. People will give lip service to that not being the case, e.g. “We know there are things that can’t be measured that are important.” But the reality ends up being: only that which can be assigned a number gets managed, and that which gets managed is imbued with importance because it is allotted our time, attention, and care. This reminds me of the story of the judgement of King Solomon, an archetypal story found in cultures around the world. Here’s the story as summarized on Wikipedia: Solomon ruled between two women who both claimed to be the mother of a child. Solomon ordered the baby be cut in half, with each woman to receive one half. The first woman accepted the compromise as fair, but the second begged Solomon to give the baby to her rival, preferring the baby to live, even without her. Solomon ordered the baby given to the second woman, as her love was selfless, as opposed to the first woman's selfish disregard for the baby's actual well-being In an attempt to resolve the friction between two individuals, an appeal was made to numbers as an arbiter. We can’t agree on who the mother is, so let’s make it a numbers problem. Reduce the baby to a number and we can agree! But that doesn’t work very well, does it? I think there is a level of existence where measurement and numbers are a sound guide, where two and two make four and two halves make a whole. But, as humans, there is another level of existence where mathematical propositions don’t translate. A baby is not a quantity. A baby is an entity. Take a whole baby and divide it up by a sword and you do not half two halves of a baby. I am not a number. I’m an individual. Indivisible. What does this all have to do with software? Software is for us as humans, as individuals, and because of that I believe there is an aspect of its nature where metrics can’t take you.cIn fact, not only will numbers not guide you, they may actually misguide you. I think Robin Rendle articulated this well in his piece “Trust the vibes”: [numbers] are not representative of human experience or human behavior and can’t tell you anything about beauty or harmony or how to be funny or what to do next and then how to do it. Wisdom is knowing when to use numbers and when to use something else. Email · Mastodon · Bluesky

2 weeks ago 15 votes
Computers Are a Feeling

Exploring diagram.website, I came across The Computer is a Feeling by Tim Hwang and Omar Rizwan: the modern internet exerts a tyranny over our imagination. The internet and its commercial power has sculpted the computer-device. It's become the terrain of flat, uniform, common platforms and protocols, not eccentric, local, idiosyncratic ones. Before computers were connected together, they were primarily personal. Once connected, they became primarily social. The purpose of the computer shifted to become social over personal. The triumph of the internet has also impoverished our sense of computers as a tool for private exploration rather than public expression. The pre-network computer has no utility except as a kind of personal notebook, the post-network computer demotes this to a secondary purpose. Smartphones are indisputably the personal computer. And yet, while being so intimately personal, they’re also the largest distribution of behavior-modification devices the world has ever seen. We all willing carry around in our pockets a device whose content is largely designed to modify our behavior and extract our time and money. Making “computer” mean computer-feelings and not computer-devices shifts the boundaries of what is captured by the word. It removes a great many things – smartphones, language models, “social” “media” – from the domain of the computational. It also welcomes a great many things – notebooks, papercraft, diary, kitchen – back into the domain of the computational. I love the feeling of a personal computer, one whose purpose primarily resides in the domain of the individual and secondarily supports the social. It’s part of what I love about the some of the ideas embedded in local-first, which start from the principle of owning and prioritizing what you do on your computer first and foremost, and then secondarily syncing that to other computers for the use of others. Email · Mastodon · Bluesky

3 weeks ago 17 votes
Follow Up: An Analysis of YouTube Links From The White House’s “Wire” Website

After publishing my Analysis of Links From The White House’s “Wire” Website, Tina Nguyen, political correspondent at The Verge, reached out with some questions. Her questions made me realize that the numbers in my analysis weren’t quite correct (I wasn’t de-depulicating links across days, so I fixed that problem). More pointedly, she asked about the most popular domain the White House was linking to: YouTube. Specifically, were the links to YouTube 1) independent content creators, 2) the White House itself, or 3) a mix. A great question. I didn’t know the answer but wanted to find out. A little JavaScript code in my spreadsheet and boom, I had all the YouTube links in one place. I couldn’t really discern from the links themselves what I was looking at. A number of them were to the /live/ subpath, meaning I was looking at links to live streaming events. But most of the others were YouTube’s standard /watch?v=:id which leaves the content and channel behind the URL opaque. The only real way to know was to click through to each one. I did a random sampling and found most of the ones I clicked on all went to The White House’s own YouTube channel. I told Tina as much, sent here the data I had, and she reported on it in an article at The Verge. Tina’s question did get me wondering: precisely how many of those links are to the White House’s own YouTube channel vs. other content creators? Once again, writing scripts that process data, talk to APIs, and put it all into 2-dimensional tables in a spreadsheet was super handy. I looked at all the YouTube links, extracted the video ID, then queried the YouTube API for information about the video (like what channel it belongs to). Once I had the script working as expected for a single cell, it was easy to do the spreadsheet thing where you just “drag down” to autocomplete all the other cells with video IDs. The result? From May 8th to July 6th there were 78 links to YouTube from wh.gov/wire, which breaks down as follows: 73 links to videos on the White House’s own YouTube channel 2 links to videos on the channel “Department of Defense” 1 link to a video on the channel “Pod Force One with Miranda Devine” 1 link to a video on the channel “Breitbart News” 1 link to a video that has since been taken down “due to a copyright claim by Sony Music Publishing” (so I’m not sure whose channel that was) Email · Mastodon · Bluesky

3 weeks ago 20 votes

More in design

Midea Showroom by SINITSA Bureau

SINITSA Bureau has designed a multifunctional showroom for Midea, one of the leading global home appliance brands, located on Novodmitrovskaya...

yesterday 2 votes
The arcane alphabets of Black Sabbath

Contributed by Nick Sherman Source: fontsinuse.com Nick Sherman. License: All Rights Reserved. Black Sabbath’s first four studio albums – Black Sabbath, Paranoid, Master of Reality, and Vol 4, released in rapid succession between 1970 and 1972 – laid much of the groundwork for the heavy metal movement. While there were other bands playing heavy blues-inspired hard rock at the time, the gloomy, doom-laden stylings of Black Sabbath helped fuel their early success as one of the first – and most influential – heavy metal acts ever. Sabbath’s dark aesthetic was established from the start with help from the visuals on their records. Their first four albums were released through the Vertigo record label in London and, as such, involved Vertigo’s in-house designer at the time, Keith Stuart Macmillan. Macmillan studied photography at Royal College of Art but has worked in various roles related to the visual side of music – from design to directing music videos. Early in his career he signed with the moniker Marcus Keef (or simply “Keef”) to avoid confusion with photographer Keith Lionel McMillan who likewise worked with rock musicians at the time. In addition to his stylized photography, Keef also contributed design work to those first four albums, which – along with designs from the Bloomsbury Group – include now-iconic titling graphics. At least for the first two releases, he entrusted a fellow student from the Royal College of Art with the typography: it was Sandy Field who designed the titling for Black Sabbath and Paranoid. Despite the ubiquity of those albums and the many design imitations they’ve inspired, the sources of their letterforms have been largely undocumented and obscured by the passage of time. Some of the albums’ titling has often, mistakenly, been assumed to be totally hand-lettered. Even when a typeface was suspected as a starting point, exact sources have proven elusive. This situation is not surprising when you consider those first four Sabbath covers were all designed using uncommon sources from the era of phototype and dry transfer lettering – a relatively short period after the peak of letterpress printing but before the digital revolution. Type styles from larger companies of that era, like Photo-Lettering and Letraset, have been documented fairly well in subsequent years. But there were also smaller companies and publications at the time whose designs are still much less known today, partly because the original reference materials are so scarce. All four of the first Black Sabbath records got their titling styles from exactly those kinds of niche sources. Black Sabbath (1970) Source: fontsinuse.com Neil Priddey. License: All Rights Reserved. Though it is multiple generations removed, the titling style of the first, self-titled Black Sabbath album has its origins in an ornamented typeface from the Central Type Foundry called Harper, first released in 1882. The curly design was part of a wave of type styles from that era that tried to evoke a sense of exoticism through unusual forms. Source: archive.org Internet Archive. License: All Rights Reserved. 1892 Central Type Foundry specimen of Harper. Source: archive.org Internet Archive. License: All Rights Reserved. 1889 Franklin Type Foundry specimen of Harper. Source: fontsinuse.com License: All Rights Reserved. Harper Rimmed Initials as shown in the 1897 catalog of Day & Collins, a wood type manufacturer in Fann Street, London. Harper included a set of outlined or “rimmed” initials which seem to have outlived the core design through adaptation by various other publishers over the years, for various other formats. One such adaptation was for fonts of wood type by the British company Day & Collins, who sold it as Harper Rimmed Initials. This adaptation, in turn, inspired many subsequent interpretations, especially during the era of phototype and dry transfer lettering. One particular take on that design wasn’t even a proper typeface in the traditional sense, but instead was published as a standalone alphabet in the Twelve Unusual Alphabets Compiled by Crosby/Fletcher/Forbes portfolio (c.1970). This adaptation of Harper Rimmed Initials appears to be the one used by Field to compose the titling for the cover of Black Sabbath. Source: fontsinuse.com Patrick Concannon. License: All Rights Reserved. Sheet 9 from Twelve Unusual Alphabets Compiled by Crosby/Fletcher/Forbes. London: Mears, Caldwell, Hacker, n.d. [1970] Florian Hardwig. License: All Rights Reserved. A lineage of adaptations of Harper Rimmed, from top to bottom: 1970 Black Sabbath cover detail feat. the Unusual Alphabet #9 by Crosby/Fletcher/Forbes, c.1970. Harper with rimmed initials by Gustav F. Schroeder for Central Type Foundry, 1882. Eminence by Photo-Lettering, Inc., 1962. Manuscript Capitals by Bob Newman for Letraset, 1972. Fancy Letter by Walter Haettenschweiler. Allegedly from 1957. However, the earliest known showing is in the 5th revised edition of Lettera 2 from 1976. Abbey Scroll, shown by Formatt in 1974. Daisy Rimmed, shown by Solotype in 1992. Coincidentally, the Harper Rimmed Initials seem to have also influenced the design of the logo for Orange amplifiers around the same time. Black Sabbath weren’t regular Orange users but they were famously seen playing them for their 1970 performances on the West German Beat-Club television show. Source: www.preservationsound.com Preservation Sound. License: All Rights Reserved. The Orange amplifier logo as seen on an item in their circa 1970 catalog, seemingly based on some adaptation of the Harper typeface. Source: www.youtube.com Beat-Club. License: All Rights Reserved. Tony Iommi playing guitar through an Orange amplifier, from the famous Beat-Club performance in 1970. Paranoid (1971) Source: fontsinuse.com Heritage Auctions. License: All Rights Reserved. Following the success of their debut, the pressure was on for Black Sabbath to quickly release a follow-up album. Keef again handled the photography and design. The photography for the cover was prepared with the idea that the album would be titled War Pigs (after the song), however the title was changed to Paranoid at the last minute and the short turnaround meant there was no time to prepare new photography, resulting in an unintended mismatch of imagery and text. Despite this mix-up, the album was a hit, furthering Sabbath’s heavy metal influence. As with the first album, Field’s title design for Paranoid made use of a fairly recent, somewhat obscure adaptation of an earlier letter style. This time, though, instead of using an alphabet from a book based on a typeface, it was a typeface based on an alphabet from a book. Scanned by Florian Hardwig. License: CC BY-NC-SA. Book jacket for Lettera 2 (left), “a standard book of fine lettering” edited by Armin Haab and Walter Haettenschweiler and published by Niggli in 1961. One of the included alphabets is Lettre coupé. The showing on page 53 (right) is caps only and omits the letter L. In 1961, the Lettera 2 book was released as the second entry in the Lettera series of alphabet sourcebooks, published by Arthur Niggli Ltd. The book, edited by Armin Haab and Walter Haettenschweiler, included a collection of various alphabet designs – some taken directly from typefaces, others from original lettering samples. One of the samples was an original alphabet, titled Lettre Coupé, designed by Haettenschweiler with a hand-cut appearance. Some designers adapted the alphabet for album artwork, sometimes modifying glyphs, altering the proportions, and/or improvising characters that weren’t included in the original sample. By 1969, the alphabet had been adapted into a proper typeface by the Lettergraphics phototype company, offered under the name Black Casual. The typeface added new counterforms to A, B, and P, as well as a few new characters (L, comma, ?, and &). Black Casual appears to be what Field used to compose the titling for Paranoid. Given the Black name, the use might be considered a partial LTypI. Scanned by Florian Hardwig. License: CC BY-NC-SA. Californian phototype provider Lettergraphics turned Haettenschweiler’s lettering into a proper typeface. Their adaptation called Black Casual can here be seen in a catalog dated 1969. It adds the missing L alongside some punctuation glyphs (comma, question mark, ampersand) and also introduces counters in A B and P. Perhaps inspired by the dark vibes of Paranoid, Lettre Coupé was adapted in 1973 for the title sequence of blaxploitation horror film Scream Blacula Scream. Source: www.artofthetitle.com Art of the Title. License: All Rights Reserved. Title frame from the opening sequence of Scream Blacula Scream (1973). Master of Reality (1971) Source: fontsinuse.com Scanned by Nick Sherman. License: All Rights Reserved. The cover of Sabbath’s third album dropped photography entirely and went all-in on a text-only treatment, with large, bold, in-your-face, typography – twisted and warped as if being shaken by high-amplitude vibrations, or distorted by altered perception. While the photography of the first two Sabbath records gave them a dark, otherworldly feeling, the Master of Reality cover also puts an emphasis on HEAVINESS. The darkness wasn’t abandoned though. Below the purple band name, the album’s title for the first pressings was only distinguished from the black background via embossing, resulting in raised letterforms that are equally as tactile as they are visual. If the question is “How much more black could this be?”, the answer is: “None. None more black.” Eventually the record companies releasing new editions of the album decided that “none more black” was too black and/or embossing was too expensive, so the cover has seen many variants over the years with the title alternately colored gray, white, orange, green, pink, black with white outline, and more. Some releases have also colored the band’s name in alternating rainbow colors. Source: www.discogs.com Discogs. License: CC BY-NC-SA. A sampling of the various colorways that have been used for Master of Reality over the years. Despite the text-only cover, Keef’s stylized photography still made an appearance on a poster included as an insert with the original release. The design for the album is credited to Bloomsbury Group, a British firm active in the 1970s (apparently named after the early-1900s intellectual collective of the same name), with art direction by Mike Stanford. The typeface on the cover is, yet again, an obscure phototype interpretation of an existing design. In this case, the ancestral type is Rudolf Koch’s Kabel which originated in the late 1920s. The reimagined adaptation used for Master of Reality is Lodwick Kabel, which pushes the weight of Kabel beyond any of its previous incarnations, and even heavier than ITC or Letraset would later take their interpretations in 1975 and 1980, respectively. Nick Sherman. License: CC BY-NC-SA. A comparison of the heaviest interpretations of Kabel as offered variously in phototype, dry transfer lettering, and digital type. Samples scaled to approximately matching cap heights. Lodwick Kabel was available by 1970 from the Photoscript phototype company, and presented as an “Exclusive Royalty face”. The name suggests a possible connection to Hardy/Lodwick (a.k.a. Hardy/Escasany/Lodwick), a studio that was active in London in the 1970s – but that connection is unconfirmed. Scanned by Florian Hardwig. License: CC BY-NC-SA. London-based typesetting company Photoscript showed Lodwick Kabel in their List of Typefaces 1970, as “Exclusive Royalty face” and in two widths. Scanned by Florian Hardwig. License: All Rights Reserved. Lodwick Kabel as shown in a 1990 specimen book from the TypoBach typesetting company. Since its release, the Master of Reality cover has been imitated many times, perhaps most prominently by British rock group Arctic Monkeys. Even Black Sabbath themselves have rehashed the warped sans-serif effect for a Black Lives Matter benefit T-shirt. Vol 4 (1972) Source: fontsinuse.com Internet Archive. License: All Rights Reserved. The cover for Sabbath’s fourth album, appropriately titled Vol 4, continues the theme of extra-large, extra-bold type from Master of Reality. As with the precursor, the design is attributed to Bloomsbury Group with photography by Keef – this time credited by his real name, Keith Macmillan. For this release, Keef’s photography was brought back onto the cover, showing Ozzy with arms raised, giving his signature gesture of victorious peace signs ✌️ (not to be confused with the devil horns 🤘 popularized later by Ozzy’s successor, Ronnie James Dio). The image is treated more as a graphic element than a photograph, with a high-contrast monochrome effect, framed compactly on three sides with tightly-spaced, extra-heavy, geometric, sans-serif type. As with the previous albums, the name of the band and the name of the album are set in the same size and face. Though there were plenty of heavy geometric sans-serif typefaces being used around that time with similar structural features, the style used for Vol 4 seems to be a primarily original design, and not a direct adaptation of some other existing face. The typeface in question is Gadget, available by 1971 from Alphabet Photosetting, who listed it as a copyrighted design. Dry transfer lettering sheets of a Lined variant of the face were produced by Zipatone, and they credit the design to Peter Bennett. Scanned by Nick Sherman. License: All Rights Reserved. Glyph set for Gadget with alternate forms for c e &, from an undated catalog by Alphabet Photosetting. License: All Rights Reserved. The striped variant, Gadget Lined, was also produced by Letraset competitor Zipatone for dry transfer lettering. This sheet from their Zipatone Designers Fonts (ZDF) range has caps in 84pt. Thanks to this adaptation, we know that Gadget is the design of Peter Bennett. Due to the obscure nature of Gadget, many people over the years have assumed the Vol 4 titling was a case of one-off lettering and not composed with a proper typeface. As such there have been multiple typefaces in more recent years using the iconic design as inspiration for creating new typefaces. It’s interesting to see how others extrapolate the letters from the cover into an entirely re-imagined set of glyphs – with some letters matching Gadget quite closely but others being taken to totally new and different places. Some examples include OZIK, Volume Dealers, and VolumeFour. The iconic nature of Vol 4’s cover also makes it a common subject for imitation and parody, especially with assistance from those newer digital fonts. The Vol 4 design came full circle recently when the digital VolumeFour typeface inspired by the album cover was used for promotional materials and on-stage graphics for Black Sabbath’s final show, “Back to the Beginning”, on July 5, 2025 – less than three weeks before the passing of Ozzy Osbourne. Source: www.jambase.com JamBase. License: All Rights Reserved. Though Black Sabbath went on to release plenty of other noteworthy albums, the first four seem especially foundational. They are also unique in their common use of obscure typefaces, and their involvement of Keef for visuals. Finding proper identifications for these typefaces has only been possible with the efforts of others, sometimes as a collaborative effort that unfolded over literal years in the comments of old Fonts In Use posts. Special thanks are due to Florian Hardwig, Daylight Fonts, Mark Simonson, Patrick Concannon, and Fontastique Faces. Additionally, Kory Grow’s interview with Keith Macmillan for Rolling Stone was extremely insightful, even though it didn’t discuss specifics of typography. Finally, investigative work for articles like this would be nearly impossible without Discogs and the Internet Archive. If you have any further information about these typefaces or their use on the Black Sabbath records, please leave a message in the comments below or on the separate entries for each album. Those entries include more details about supporting typefaces, with additional detailed images: Black Sabbath Paranoid Master of Reality Vol 4 ✌️ This post was originally published at Fonts In Use

a week ago 13 votes
Guess Flagship Store – Las Vegas

Located in the heart of Las Vegas at The Forum Shops within Caesars Palace, the 1,153 sqm Guess flagship store...

a week ago 13 votes
head on the cloud, feet on the ground

A conversation with Sari Azout of Sublime

2 weeks ago 23 votes
Do Man by killeridea

This label was created to tell the story of a collaboration: two people, one wine. The central visual element is...

2 weeks ago 18 votes