Full Width 
Shortcuts 
Sign Up 
Log In 
Articles 
Reading List More from Ryan Mulligan
Whether you've barely scratched the surface of keyframe animations in CSS or fancy yourself as a seasoned pro, I suggest reading An Interactive Guide to Keyframe Animations. Josh (as always) does an impeccable deep dive that includes interactive demos for multi-step animations, loops, setting dynamic values, and more. This is a quick post pointing out some other minor particulars: Duplicate keyframe properties The order of keyframe rules Custom timing function (easing) values at specific keyframes Duplicate keyframe properties Imagine an "appearance" animation where an element slides down, scales up, and changes color. The starting 0% keyframe sets the element's y-axis position and scales down the size. The element glides down to its initial position for the full duration of the animation. About halfway through, the element's size is scaled back up and the background color changes. At first, we might be tempted to duplicate the background-color and scale properties in both 0% and 50% keyframe blocks. @keyframes animate { 0% { background-color: red; scale: 0.5; translate: 0 100%; } 50% { background-color: red; scale: 0.5; } 100% { background-color: green; scale: 1; translate: 0 0; } } Although this functions correctly, it requires us to manage the same property declarations in two locations. Instead of repeating, we can share them in a comma-separated ruleset. @keyframes animate { 0% { translate: 0 100%; } 0%, 50% { background-color: red; scale: 0.5; } 100% { background-color: green; scale: 1; translate: 0 0; } } Keyframe rules order Another semi-interesting qwirk is that we can rearrange the keyframe order. @keyframes animate { 0% { translate: 0 100%; } 100% { background-color: green; scale: 1; translate: 0 0; } /* Set and hold values until halfway through animation */ 0%, 50% { background-color: red; scale: 0.5; } } "Resolving Duplicates" from the MDN docs mentions that @keyframes rules don't cascade, which explains why this order still returns the expected animation. Customizing the order could be useful for grouping property changes within a @keyframes block as an animation becomes more complex. That same section of the MDN docs also points out that cascading does occur when multiple keyframes define the same percentage values. So, in the following @keyframes block, the second translate declaration overrides the first. @keyframes animate { to { translate: 0 100%; rotate: 1turn; } to { translate: 0 -100%; } } Keyframe-specific easing Under "Timing functions for keyframes" from the CSS Animations Level 1 spec, we discover that easing can be adjusted within a keyframe ruleset. A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe. Toggle open the CSS panel in the ensuing CodePen demo and look for the @keyframes block. Inside one of the percentages, a custom easing is applied using the linear() CSS function to give each element some wobble as it lands. Open CodePen demo I think that looks quite nice! Adding keyframe-specific easing brings an extra layer of polish and vitality to our animations. One minor snag, though: We can't set a CSS variable as an animation-timing-function value. This unfortunately means we're unable to access shared custom easing values, say from a library or design system. :root { --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1); } @keyframes { 50% { animation-timing-function: var(--easeOutCubic); } } Helpful resources An Interactive Guide to Keyframe Animations @keyframes on MDN Easing Functions Cheat Sheet Linear easing generator The Path To Awesome CSS Easing With The linear() Function
Once again, here I am, hackin' away on horizontal scroll ideas. This iteration starts with a custom HTML tag. All the necessities for scroll overflow, scroll snapping, and row layout are handled with CSS. Then, as a little progressive enhancement treat, button elements are connected that scroll the previous or next set of items into view when clicked. Behold! The holy grail of scrolling rails... the scrolly-rail! CodePen demo GitHub repo Open CodePen demo I'm being quite facetious about the "holy grail" part, if that's not clear. 😅 This is an initial try on an idea I'll likely experiment more with. I've shared some thoughts on potential future improvements at the end of the post. With that out of the way, let's explore! The HTML Wrap any collection of items with the custom tag: <scrolly-rail> <ul> <li>1</li> <li>2</li> <li>3</li> <!-- and so on--> </ul> </scrolly-rail> The custom element script checks if the direct child within scrolly-rail is a wrapper element, which is true for the above HTML. While it is possible to have items without a wrapper element, if the custom element script runs and button controls are connected, sentinel elements are inserted at the start and end bounds of the scroll container. Wrapping the items makes controlling spacing between them much easier, avoiding any undesired gaps appearing due to these sentinels. We'll discover what the sentinels are for later in the post. The CSS Here are the main styles for the component: scrolly-rail { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } } When JavaScript is enabled, sentinel elements are inserted before and after the unordered list (<ul>) element in the HTML example above. Flexbox ensures that the sentinels are positioned on either side of the element. We'll find out why later in this post. Containing the overscroll behavior will prevent us accidentally triggering browser navigation when scrolling beyond either edge of the scrolly-rail container. scroll-snap-type enforces mandatory scroll snapping. Smooth scrolling behavior applies when items scroll into view on button click, or if interactive elements (links, buttons, etc.) inside items overflowing the visible scroll area are focused. Finally, scroll-snap-align: start should be set on the elements that will snap into place. This snap position aligns an item to the beginning of the scroll snap container. In the above HTML, this would apply to the <li> elements. scrolly-rail li { scroll-snap-align: start; } As mentioned earlier, this is everything our component needs for layout, inline scrolling, and scroll snapping. Note that the CodePen demo takes it a step further with some additional padding and margin styles (check out the demo CSS panel). However, if we'd like to wire up controls, we'll need to include the custom element script in our HTML. The custom element script Include the script file on the page. <script type="module" src="scrolly-rail.js"></script> To connect the previous/next button elements, give each an id value and add these values to the data-control-* attributes on the custom tag. <scrolly-rail data-control-previous="btn-previous" data-control-next="btn-next" > <!-- ... --> </scrolly-rail> <button id="btn-previous" class="btn-scrolly-rail">Previous</button> <button id="btn-next" class="btn-scrolly-rail">Next</button> Now clicking these buttons will pull the previous or next set of items into view. The amount of items to scroll by is based on how many are fully visible in the scroll container. For example, if we see three visible items, clicking the "next" button will scroll the subsequent three items into view. Observing inline scroll bounds Notice that the "previous" button element in the demo's top component. As we begin to scroll to the right, the button appears. Scrolling to the end causes the "next" button to disappear. Similarly, for the bottom component we can see either button fade when their respective scroll bound is reached. Recall the sentinels discussed earlier in this post? With a little help from the Intersection Observer API, the component watches for either sentinel intersecting the visible scroll area, indicating that we've reached a boundary. When this happens, a data-bound attribute is toggled on the respective button. This presents the opportunity to alter styles and provide additional visual feedback. .btn-scrolly-rail { /** default styles */ } .btn-scrolly-rail[data-bound] { /* styles to apply to button at boundary */ } Future improvements I'd love to hear from the community most specifically on improving the accessibility story here. Here are some general notes: I debated if button clicks should pass feedback to screen readers such as "Scrolled next three items into view" or "Reached scroll boundary" but felt unsure if that created unforeseen confusion. For items that contain interactive elements: If a new set of items scroll into view and a user tabs into the item list, should the initial focusable element start at the snap target? This could pair well with navigating the list using keyboard arrow keys. Is it worth authoring intersecting sentinel "enter/leave" events that we can listen for? Something like: Scroll bound reached? Do a thing. Leaving scroll bound? Revert the thing we just did or do another thing. Side note: prevent these events from firing when the component script initializes. How might this code get refactored once scroll snap events are widely available? I imagine we could check for when the first or last element becomes the snap target to handle toggling data-bound attributes. Then we can remove Intersection Observer functionality. And if any folks have other scroll component solutions to share, please reach out or open an issue on the repo.
Over the last few months or so, I have been fairly consistent with getting outside for Sunday morning runs. A series of lower body issues had prevented me from doing so for many years, but it was an exercise I had enjoyed back then. It took time to rebuild that habit and muscle but I finally bested the behavior of doing so begrudgingly. Back in the day (what a weird phrase to say, how old am I?) I would purchase digital copies of full albums. I'd use my run time to digest the songs in the order the artist intended. Admittedly, I've become a lazy listener now, relying on streaming services to surface playlists that I mindlessly select to get going. I want to be better than that, but that's a story for another time. These days, my mood for music on runs can vary: Some sessions I'll pop in headphones and throw on some tunes, other times I head out free of devices (besides a watch to track all those sweet, sweaty workout stats) and simply take in the city noise. Before I headed out for my journey this morning, a friend shared a track from an album of song covers in tribute to The Refused's The Shape Of Punk To Come. The original is a treasured classic, a staple LP from my younger years, and I can still remember the feeling of the first time it struck my ears. Its magic is reconjured every time I hear it. When that reverb-soaked feedback starts on Worms of the Senses / Faculties of the Skull, my heart rate begins to ascend. The anticipation builds, my entire body well aware of the explosion of sound imminent. As my run began, I wasn't sure if I had goosebumps from the morning chill or the wall of noise about to ensue. My legs were already pumping. I was fully present, listening intently, ready for the blast. The sound abruptly detonated sending me rocketing down the street towards the rising sun. My current running goal is 4-in-40, traversing four miles under forty minutes. I'm certainly no Prefontaine, but it's a fair enough objective for my age and ability. I'll typically finish my journey in that duration or slightly spill over the forty-minute mark. Today was different. Listening to The Shape Of Punk To Come sent me cruising an extra quarter mile beyond the four before my workout ended. The unstoppable energy from that album is truly pure runner's fuel. There's certainly some layer of nostalgia, my younger spirit awakened and reignited by thrashing guitars and frantic rhythms, but many elements and themes on this record were so innovative at the time it was released. New Noise is a prime example that executes the following feeling flawlessly: Build anticipation, increase the energy level, and then right as the song seems prepped to blast off, switch to something unexpected. In this case, the guitars drop out to make way for some syncopated celestial synths layered over a soft drum rhythm. The energy sits in a holding pattern, unsure whether it should burst or cool down, when suddenly— Can I scream?! Oh my goodness, yes. Yes you can. I quickly morphed into a runner decades younger. I had erupted, my entire being barreling full speed ahead. The midpoint of this track pulls out the same sequence of build up, drop off, and teasing just long enough before unleashing another loud burst of noise, driving to its explosive outro. As the song wraps up, "The New Beat!" is howled repeatedly to a cheering crowd that, I would imagine, had not been standing still. I definitely needed a long stretch after this run.
I recently stumbled on a super cool, well-executed hover effect from the clerk.com website where a bloom of tiny pixels light up, their glow staggering from the center to the edges of its container. With some available free time over this Thanksgiving break, I hacked together my own version of a pixel canvas background shimmer. It quickly evolved into a pixel-canvas Web Component that can be enjoyed in the demo below. The component script and demo code have also been pushed up to a GitHub repo. Open CodePen demo Usage Include the component script and then insert a pixel-canvas custom element inside the container it should fill. <script type="module" src="pixel-canvas.js"></script> <div class="container"> <pixel-canvas></pixel-canvas> <!-- other elements --> </div> The pixel-canvas stretches to the edges of the parent container. When the parent is hovered, glimmering pixel fun ensues. Options The custom element has a few optional attributes available to customize the effect. Check out the CodePen demo's html panel to see how each variation is made. data-colors takes a comma separated list of color values. data-gap sets the amount of space between each pixel. data-speed controls the general duration of the shimmer. This value is slightly randomized on each pixel that, in my opinion, adds a little more character. data-no-focus is a boolean attribute that tells the Web Component to not run its animation whenever sibling elements are focused. The animation runs on sibling focus by default. There's likely more testing and tweaking necessary before I'd consider using this anywhere, but my goal was to run with this inspiration simply for the joy of coding. What a mesmerizing concept. I tip my hat to the creative engineers over at Clerk.
More in design
In the heart of Shanghai’s historic Zhang Yuan district, Paris-based agency Héroïne has redefined luxury retail with The Sillage, a...
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
Located in the heart of Las Vegas at The Forum Shops within Caesars Palace, the 1,153 sqm Guess flagship store...
A conversation with Sari Azout of Sublime
This label was created to tell the story of a collaboration: two people, one wine. The central visual element is...
