After the long anticipated font update from v0.1 to v0.2, Harald Peter Ström could finally add a CV to his personal website. Before that, the designer of Konst & Teknik used Electric Blue only on his front page. He requested the urgently needed diacritics on Future Fonts right after the release of version 0.1. “Guuuuys, i love this so much but my name doesnt work properly… any chance of a scandi version soon featuring åäö ÅÄÖ ? /peter stroem”

Font Spectrum’s Daniël Maarleveld and Edgar Walthert just have been really busy with other thing to finish the entire set of accents. Just dropping a few Middle European ones, as a patch, did not seem right for everyone else.

Recently, Harald Peter Ström added an animated loader to his CV page which makes use of the transforming abilities of variable fonts. The loader revolves through the weights in a wave motion.

The Index and Work pages use Weiß-Antiqua for everything. The bouncing “2025” device that references the iconic DVD logo screensaver has numerals from ABC Walter Neue.

When entering the website, all the pills rotate before they find their horizontal position. The background color changes according to the width of the browser window. If one does note interact with the page, everything gets blurry.

The animated GIF was made with a QuickTime screen grab and then made into a GIF with the help of ezgif.com

CV page of Peter Ström, entirely set in Electric Blue. The bottom of the page is faded out and gets thicker on scroll – one of the advantages of variable fonts.

The index with Harald Peter Ström’s work features Weiß-Antiqua (URW’s digitization).

Another sub-url called work.peter.stream. Weiß-Antiqua is one of the classic typefaces that still looks en vogue thanks to its slightly eccentric details.

Ata Macias’ website was designed by studio Liebermann Kiepe Reddemann in cooperation with Sandra Doeller. The purpose of the website is to make Ata Macia’s activities alongside his job as a DJ public and to reposition him as a personality in the cultural scene. The website is to be understood as a online business card.

Deviating from the typical structure of a website, atamacias.com does not have a header, footer or a menu. Informative text fields, periodically alternating with documentary photographs, determine the structure of the website. One of these text fields includes an animated line of text that distinguishes design, music and typeface. As soon as these are selected, you will be redirected to the associated website.

The website only uses ABC Whyte Variable from Dinamo. It’s a sans serif variable font with axes for weight, slant, and ink traps. The weight of the font used on the website is similar to a Book, but as it is a variable font no specific style is used.

Another fundamental element of the website are randomly distributed play buttons. Elements on which they appear are inverted so that both components remain recognizable. In addition, scrolling on the website causes them to rotate on their own axis. As soon as a play button is triggered, electronic music plays in a loop and the buttons display a pause sign. Furthermore, an animation of the font starts. The inktraps change their strength via code, depending on the highs and lows of the music. Triggering the button again freezes the animation and the music stops.

The scrolling behavior of the website is also striking. You can endlessly keep on scrolling in a loop. According to Liebermann Kiepe Reddemann, this feature was installed because the page only has relatively little text and images and therefore the design concept would only be weakly highlighted with an abrupt end.

The responsiveness of the website works by scaling the content from large to small. The narrower the window is drawn, the smaller the individual elements become. Thereby the text type and structure don’t change. This also applies to the mobile application.

Halyard Display by Darden Studio stars alongside several typefaces by Vocal Type in the design of Ben’s Best Blnz.

Ben’s Best Blnz, or B3, is a cannabis brand initiated by Ben Cohen, co-founder of Ben & Jerry’s. Its mission is “to sell Great Pot and use the power of our business to Right the Wrongs of the War on Drugs.” The independent non-profit organization advocates for the decarceration of those convicted of nonviolent cannabis crimes and the descheduling of marijuana as a Schedule 1 substance.

For the branding, Eddie Opara and his team at Pentagram relied on eclectic and colorful typography, exclusively using typefaces by Black designers. Halyard Display by Joshua Darden is the text typeface on the B3 website (development by Jacob Macdonald), and is also used in the packaging designs as well as for merchandise such as T-shirts. Halyard is paired with a range of more expressive fonts all designed by Tré Seals from Vocal Type, namely Eva Peron, Eva Maria, Martin, Bayard, and Ruben.

Read and see more in Pentagram’s case study and on B3’s page about their art and design.

Homepage with mission statement, main menu, quotes, contact form, and infographics

Social Mission page with info on background, advocacy, investment, vendors and partners

Mission statement on the homepage. Interestingly, the lowercase glyphs from Halyard Display Regular are here combined with caps from the slightly heavier Medium weight.

Labels for the Blended SloSmokes that are available in various effects: Focus, Creative, Relax, Stimulate, Cloud 9, Kick Back, Happy Go Lucky, and Dream Sweet Dreams

Website detail featuring Eva Maria for the ticker text, Eva Peron for “B3”, and Halyard for text

Website details including an interactive shop finder

Get There Slower Full Color T-Shirt featuring Halyard Display with alternating glyph colors

Get There Slower Wavy T-Shirt featuring Halyard Display set on a wavy baseline

Full Spectrum Vape Pen packaging designs

Blended SmoSmokes packaging

Assorted packaging designs

For this showcase website, which is supposed to show the interaction of two technologies (Webflow and Spline), two different fonts were used for big headlines: the very technical Gridular in combination with the bold Dharma Gothic. For small captions, I used the likewise technical looking Inconsolata. The list of events in Spline is in Neue Haas Grotesk.

Logo of the Tanztheater Wuppertal

When, in 1973, dancer and choreographer Pina Bausch (1940–2009) took the lead at Wuppertal’s ballet, no one would have guessed that she would put the city’s name on the international map of modern dance theater – and in big letters. In 2023 Tanztheater Wuppertal Pina Bausch celebrates its 50th anniversary, and at that very moment, the house got a new artistic director and a new visual identity.

French-born Boris Charmatz was appointed Pina Bausch’s successor in 2022 and the repertoire of the 2023/24 season is a combination of pieces by both choreographers. It is the declared wish of Charmatz to develop more French-German cooperation in the field of contemporary dance, which explains two observations on the new website: the whole site is available in German, English, and French – and the header mentions Pina Bausch’s Tanztheater as much as Boris Charmatz’s Terrain project.

Instead of a rigid grid, the design of the website systematically works with overlaying elements that provide it with a certain ease. While the homepage is predominantly based on a black background, the Season section comes in a very different layout: here, each piece gets an opener entry that is split diagonally. While one half shows a big stage photograph, the other half displays the title and key information on a typographically animated petrol-colored base.

The diagonal is evidently the key idea in the brand visuality conceived by MOR Design from Berlin. It starts in the logo lettering at the head of the site and finds its way through all the display typography. Fundamental for this effect is the font in use, the Black weight Origin Super Condensed, designed by Jean-Baptiste Levée from Production Type. This typeface family comes with a left-leaning italic named Backslant – a feature seldomly found. The Wuppertal website is the first use for the variable font version of Origin Super Condensed that also includes a conventional right-leaning italic, Slant. In fact, this new cut was specifically made for this application.

This two-sidedness of the typeface is used in a clever way in order to make the letters dance. What already works in print can be further augmented in the digital medium: the designers of Hamburg-based Convoy Interactive found playful ways of animating the headlines while you scroll or hover. What could be more appropriate for a dance theater?

As a reading typeface you get to see Söhne, published by Klim. Origin Super Condensed Black Slant is available for licensing upon request.

Pina Bausch, the founder of the Tanztheater

Website detail from the page the current season

Schedule with the abbreviated months in the menu in upright Origin Super Condensed, dates in left-leaning and play names in right-leaning letters. Description, venue and date in Söhne.

Detail from the French language version, with words alternating between left-leaning and right-leaning caps

Detail from the English language version with a page about Carnations

Detail from the page about Café Müller with the title repeated in a bigger size in the petrol-colored background

Detail from thepage about Liberté Cathédrale. The textual information here is shown to the right of the diagonal division.

20 danseurs pour le XXe siècle, with words alternating between left-leaning and right-leaning caps

Credits from the German language version, with roles in left-leaning and names in right-leaning Origin Super Condensed

“…como el musguito en la piedra, ay si, si, si…“ (Wie das Moos auf dem Stein), with words alternating between left-leaning and right-leaning caps

Credits from the English language version, with roles in left-leaning and names in right-leaning Origin Super Condensed

Banner graphic for the 2023/24 season

Identity for a Festival de Achtertuin (“Festival the Backyard”), a music festival in Rotterdam, the Netherlands. The website uses Kayak in four of its five weights. For browsers with support for variable fonts, the designers made use of this format, and included various animations and scrolling effects that interact with the weight axis of KayakVF.

Design: Koen de Graaf & Niels Bal. Web development: Robbert Lokhorst.

Animation on the festival website, playing with Kayak’s variable font for the date.

The “Line-Up” heading gets lighter (and narrower) as the visitor scrolls through the artist images.

The festival logo – with stacked and justified caps from various weights of Kayak, featuring mirrored and hyper-extended glyphs – cut in plywood in different sizes and used as stencil for a handmade eroded look.

Unlike most booksellers who publish their promotional catalogs as printed booklets or static PDFs, Left Bank Books produce theirs as one-off, standalone web pages. Produced using Readymag, their catalogs’ design and functionality are distinctive and change from issue to issue, with different scrolling effects, bright colors, and interesting typefaces used to promote a “hand-picked inventory of used and rare books that reflect their interest in the creative process”.

The 6th issue of their catalog, from December 2019, has a playful holiday theme. The intro, designed by Taylor Woods, features a giant nutcracker whose mouth opens as you scroll to reveal the title typography. The nutcraker’s face is constructed with repurposed shapes from Ohno Blazeface, which is also used as the typeface for titling and list numbering. Other smaller type is set in Avenir. Photos are by Michael Bucher.

As web content continues to shift from the flexibility of individual web sites toward large silos of rigidly templated content, controlled by large corporations, I strongly endorse this kind of customized, small-scale web design. It offers a valuable low-risk testing ground for exploring new digital design techniques and unusual typefaces that might not be as practical for larger, less-ephemeral websites. The modern equivalent to what was traditionally called job work is now largely relegated to preparing small images for social media posts, which is a shame considering all the potential for experimentation and innovation offered by modern technology and the growing availability of unusual typefaces. (For more of my thoughts on this, see my talk on the topic.)

As a side note: I learned about Left Bank’s web catalogs while chatting in their online booth for the Typographics Book Fair this year. Though they don’t carry many books about typography, they have a good selection of books on design in general, and – perhaps more notably – many, many books that demonstrate interesting typography on their covers or inside their pages. Browsing through their catalog, I’ve found several items deserving of documentation here at Fonts In Use.