Neo-Grotesk Crypto-Brutalist

End of March, right when I’m throwing finally together my design portfolio (I swear I resisted, and now love having one), Emile asked if I might want to hurl together something for him. Something Web1.0, something like we’d handcode in HTML in the late-’90s, not quite something MySpace in the days of its browser-crashing gif-frenzy inferno, but definitely something that would be in its lineage; something tuner Nissan Skyline, unassuming on the surface, but all Fast & Furious: Tokyo Drift when you pop the hood. Something Helvetica, Neo-Grotesk, what’s getting called Brutalist right now, though not traipsing behind a fashion; this is Emile and when I was looking through years of his work putting his new website together, he has a deep love and understanding of the aesthetic, and the art and philosophy underpinning it.

First things first:

Emile: I have two websites. Can we make them one?
Frances: Yes!
Emile: Can we do all these other things?
Frances: OMG Yes!

Lucky I’d just done my portfolio, cos that gave me the framework to build on without having to bodge together fifty different functions and stuff. Saves a few hours there, which we made good use of in timezone-spanning conversations on typography, aesthetics, and usability.

First off, getting all those years of blog posts and work projects into a single database / website / organism. I used the hell out of interconnect/it’s Search & Replace DB script, merging, shuffling, shifting, getting rid of old code, jobs that would take a week or more to do by hand, done in seconds. We’d pretty much sorted out structure and functionality in a couple of afternoons; for a website that looks so simple, it was most of two weeks diligent work, back-and-forth conversations, picking away at details, (stripping and rebuilding, stancing, slamming, tuning … we are very good at turning all this into hoonage, especially with 24h Le Mans in the middle).

Obviously it had to be ‘Responsive’, look hella flush hectic antiseptic no matter what device, and for me (recently taking this stuff proper serious) it had to also be ‘Accessible’. I put those words in scare-quotes cos they’re kinda bullshit.

It occurred to me as I was finishing, that for a website to be neither responsive nor accessible — for example it looks crap if the screen size is too small or not ‘right’, or you can’t navigate with keyboard or screenreader — you have to actively remove this functionality. You have to break the website and override browser default behaviour. It’s a very active process to systematically remove basic functionality that’s been in web browsers since the beginning. You also have to actively not think, not empathise, intentionally not do or not know your job. Me for probably all of my earlier websites.

The funny thing is, it’s not really any additional work to make sure basic responsive and accessible design / functionality is present; the process of testing it always, always, always brings up usability issues, things I haven’t thought of, little points that become involved discussions about expectations, interactivity, culture, philosophy. Like ‘left and down’ is back in time, and ‘right and up’ forward; 下个礼拜 / 上个礼拜. Next week / last week. Yet the character for ‘next’ is xià, down, less than, lower; and ‘last’ (in the sense of ‘previous’) is shàng, up, more than, higher. So how to navigate between previous and next posts or projects turns into an open-ended contextual exchange on meaning.

And ‘responsive’, ‘accessible’? Basic, fundamental web design. Not something tacked on at the end.

Back to the design. System fonts! Something I’ve not done in years, being all web-font focussed these days. Another trip through the wombat warren of devices, operating systems, CSS declarations. It’s crazy impressive how deep people go in exploring this stuff. Emile Blue! A bit like International Klein Blue, and a bit like Web / HTM 4.01 Blue. But not! We worked this in with a very dark grey and very slightly off-white, bringing in and throwing out additional colours, and managing in the end to sort out all the interaction visual feedback though combinations of these three — like the white text on blue background for blockquotes. Super nice.

As usual, mad props to DreamHost for I dunno how many years of hosting (it was Emile who said to me, “Frances. Use DreamHost.”), WordPress for running Emile’s old and new sites (and all of mine), and Let’s Encrypt for awesome and free HTTPS. And to Emile for giving me the pleasure of making the website of one of my favourite artist.

Emile’s new website is here:


Národní galerie v Praze — Valdštejnská jízdárna: Otevři zahradu rajskou. Benediktini v srdci Evropy 800-1300

Last day in Prague, so last museum. Yesterday while on my public transport tram tour, I passed the Valdštejnská jízdárna, Wallenstein Riding School and saw The Benedictines in the Heart of Europe 800-1300 “Open the Gates of Paradise”, which despite the cloudless sky, sun and 15º day, I took myself along to, hoping to educate myself a little about the six hundred years between 600 and 1200CE, or as I think of it, between Hild and Caroline Walker Bynum.

Many manuscripts, some with funny marginalia, jewellery and decorations of all types, stonework, sculpture, masonry, wooden eating utensils, vast embroideries, a reliquary with pieces of the True Cross, pilgrims badges, illuminations, architectural models and drawings, astronomical and medicinal herb guides. Many of the items were of a similar age to what I’ve so far been looking at in Prague, but seemed much older. Some of them—the reliquaries and badges—referred directly to Bynum’s work, Wonderful Blood; others—the chalices (not shown here)—reminded me of the one Hild carried to King Edwin, though around a hundred years younger than that story. Slowly though I am discovering those periods, and the six centuries between.

Tomorrow, to Budapest. More museums. More other things,

thingswithbits updates itself

I’ve never been so taken by my design website, in respect to design having been thrown into a free template, and in respect to its purpose. On Friday evening, having just finished something or other, I thought perhaps I could just throw it into the template I use for, and had an idea I could use various images of various websites and so on as background.

Some enjoyable coding working out how to link the full-screen background image gallery code into WordPress using custom fields met with disappointment when I discovered the design idea in my head looked fairly crap in a browser.

Not one to shy away from excessive minimalism, I kept cutting things back until I was left with a large swathe of white and a single list on the far left. When I did the redesign for supernaut, (I forget when, I think early 2005 in Taipei), I was slightly afraid of the emptiness I’d uncovered. It was as if I’d taken a rococo edifice and levelled it until only the masonry remained. It’s an approach I tend to apply to choreographing also; I’m partial to an evening of killing one’s babies, it’s just the aftermath that makes me anxious.

So, has become perhaps an un-website, I feel slightly embarrassed to say. It’s intentionally empty, though without being a placeholder.

Now with three main websites, there is still a gap. I’ve been doing more photography in the last two years since getting a very good small camera, and yet this doesn’t fit into any of the sites. It may be that thingswithbits has to die so that it can be more inclusive. For now though, it’s at least a site of mine I no longer feel is the unmentionable one (which is good, considering it’s my work).


Early rising to Kreuzberg and after a time to wake Matthi up in Reichenbergerstr. Breakfast peanutbutter and coffee, talking across queer and politics and Berlin and so to work.

My project for the coming months is for Daniel Schlusser, better known as our man in berlin, though he isn’t. In Berlin, I mean. Theatre director and rather talented to boot, and perhaps other things to write of with him shortly.

A new website. Excitement of jQuery, some ideas for typography. Matthi is a typographer and genius in FontLab and Illustrator, so I ask him how to dismantle a font, remove various bits that make up a letter, all of which have names I don’t know. I thrill for beautiful typography, and it’s what I enjoy possibly the most in design, but actual making of fonts is deeply unfamiliar to me. So this is a story of how I learn about fonts.

The two things I wanted to do were convert a font into an outline (not to be confused, I think, with a outline font), and chops bits off. My approach, as Matthi laughed, was very Photoshop. Much messing around ensued, and without his help, I’d have been doing it for months in my awful untrained way.


Using the serif font, Tenderness from dot colon and opening in FontLab Studio, which to be uncharitable strikes me as an application ported to OSX without much thought towards standard user interface behaviour. Then opening a single letter or glyph in its own window and exporting as .eps. Now for playing.

Opening the .eps file in Illustrator and first hacking away bits (which I haven’t done in my test glyphs as I was more interested in workflow possibilities), and then turning it into an outline. The process is quite simple, once I learnt it, but I wouldn’t have stumbled onto it on my own.

Selecting the entire glyph and then setting the fill color to transparent and stroke to black, gives a one pixel outline. Opening the stroke pane and setting the weight to 6 pixels gives it some width. Then the important bit, selecting from the menu – Object – Path – Outline Stroke makes the vector path the width of the new 6 pixel outline. Saving as .eps again finishes the work in Illustrator.

Copy-Paste, back into the glyph in FontLab, aligning with the original, then shift-selecting to select the original before deleting (fixing up the mess, I called it), and saving the results…

First to export as something useful, .ttf, though it seems to not preview properly in FontExplorer… nonetheless! My first attempts at font stuff. (I’m not sure it will even be used, and there’s more work to do yet…)



I’m not sure where I stumbled upon this, but it wasn’t so long ago and immediately thought of someone whose love of fonts and typography is quite special. Then I discovered I ride twice every day past the Buchstabenmuseum, and so thought to bring it here as I am quite enjoying type at the moment and wish I had more time to write. Of course these small relics of a city touch me somehow. I wonder about the gradual change or decay from signage serving a purpose, information, advertising, to becoming somewhat an emotional fabric of this place in the city. (And a perfect accompaniment might be die alltägliche Nachkriegsarchitektur in Berlin.)


iranian typography now

Japan design magazine PingMag has a long feature yesterday, Iranian Typography Now. It is one of the most sublime features I’ve had the pleasure of reading.

So what is it about Persian calligraphy and the writing system that makes it so desirable to work with?

The secret lies in the script and its mechanics. This script, that is written in Persian or Farsi, is known as the Arabic Script. It should be noted that the technical term Arabic Script refers to the script used in Iran, Turkmenistan, Tajikistan, Afghanistan, Pakistan, other Arab countries, and more Indian regions where the Pashtu language is spoken. Moreover it used to be the official writing system in Turkey before its westernization by Ata Turk. Therefore its use for writing in over a dozen different dialects and languages has prompted a natural cultural adoption of specific styles and characteristics.

— pingmag – iranian typography now

calligraphy painting by Mohammed Ehsaei
calligraphy painting by Mohammed Ehsaei

Iranian Typography Now

The past few years have been quite exciting for Iranian graphic designers. As Iran’s design gains more international attention, the graphic designers face new challenges and rewards. In winter 2002 a poster exhibition by Iranian graphic designers called “Un Cri Persan” (A Persian Cry) was held in the city of Echirolles as a part of the Month of Graphic Design in France. The exhibition exposed a wealth of works that somehow escaped the spotlight for almost two decades. Ever since then Iranian graphic designers, many of them already internationally known, have been sharing more of their magic with the rest of the world.

Written by Behrouz

One of the qualities that makes current Iranian graphic design unique is its typography. The country has a rich history of visual arts and moreover the better part of this heritage consists of calligraphy. Throughout the times calligraphy has been inventing and reinventing itself and has influenced other forms of art. The incorporation of calligraphy into Islamic architecture is a fine example of this union. In recent times these treasures of beauty and harmony have inspired painters, sculptors, and in particular: graphic designers.

In comparison to Europe and North America calligraphy is a far more popular and practiced form of art in Iran and in most other countries around this area. You can spot at least one piece of calligraphy hung on the walls of most Iranian households.

Perhaps these are all reasons why it is not so easy to draw the line where calligraphy ends and typography starts. Some of the masterpieces of Iranian design are often the results of a collaboration between a designer and a calligrapher. One of the classic examples of such collaborations is the logotype of the Reza Abbasi Museum. The late Morteza Momayez (1936-2005) used the brilliant calligraphy of Iranian master calligrapher Mohamad Ehsaei to create this logotype in 1976.

logotype of Reza Abbasi Museum on the wall of the museum in Tehran
logotype of Reza Abbasi Museum on the wall of the museum in Tehran

Mohammad Ehsaei has created numerous logos using various traditional aesthetics. His “Calligraphy Paintings” are highly praised for their complex compositions. In many of his works Ehsaei has extracted the essence of letters and traditional compositions and used them to create abstract works that are unmistakably Iranian in tone and character.

So what is it about Persian calligraphy and the writing system that makes it so desirable to work with?

The secret lies in the script and its mechanics. This script, that is written in Persian or Farsi, is known as the Arabic Script. It should be noted that the technical term Arabic Script refers to the script used in Iran, Turkmenistan, Tajikistan, Afghanistan, Pakistan, other Arab countries, and more Indian regions where the Pashtu language is spoken. Moreover it used to be the official writing system in Turkey before its westernization by Ata Turk. Therefore its use for writing in over a dozen different dialects and languages has prompted a natural cultural adoption of specific styles and characteristics.

The national language of Iran is called Farsi or Parsi. Farsi and Arabic use a similar alphabet but Farsi has four extra letters. In Arabic there is no Pe, Che, Zhe or Ge sound. That’s why in UAE you get Bebsi instead of Pepsi. Although both languages have borrowed from each other through history, Farsi’s vocabulary and grammar are very different from those in Arabic.

Farsi is written from right to left and it consists of 32 letters. Almost every word can be written without lifting your writing hand from the paper, meaning that usually all characters are connected. This makes Farsi a very fluid and flexible script. To be able to understand the complexity of the script it’s better to have a rough idea of the anatomy of Farsi letters. To make that easier, let’s forget about calligraphy for a moment and look at fonts designed for everyday purposes:

anatomy of Farsi Letters
anatomy of Farsi Letters

Each letter can have a maximum of four different forms:

  1. Free form: When it appears without being connected to another character.
  2. Initial form: When the character is the first character in a word, therefore only connected to the character after itself.
  3. Medial form: When the character is connected to the characters after and before itself.
  4. Final form: When the character is connected only to the character before itself.
from right to left: Free, Initial, Medial and Final forms
from right to left: Free, Initial, Medial and Final forms

As a characteristic of the particular letter, different forms of a letter have in fact one single shape with different extensions reaching out of that shape. These extensions end either on, below, or above the baseline. The extension always lands on the baseline if it is going to join two characters. In other words – every two characters always meet on the baseline.

So what happens as you type?

Farsi fonts have to be “smart fonts”. The font has to decide which form a letter should appear in, depending on its position in the word. Open Type has solved the problems by providing all the different forms of the letters and all the exceptions and special connections. Here is an example of letters joining as a writer types a four-letter word.

Notice how the tail of each letter changes as the next letter is typed in
Notice how the tail of each letter changes as the next letter is typed in

Now let’s continue with calligraphy. Here is where the fun begins:

Nastaligh or Nastaliq is a cursive style developed in the late 14th century in Iran. It allows very dense compositions and is very fluid and expressive. Nastaligh is not directly bound to a baseline. The letters float and continue all the way below the baseline. This results in a well balanced line usually with an upward momentum at the end of the line. Understanding and mastering this balance takes years of rigorous practice under a master. A piece of calligraphy can be most beautiful when the artist bends the rules to create a unique yet aesthetically pleasing composition.

poem written in Nastaligh, calligraphy by Habiballah Fazaeli
poem written in Nastaligh, calligraphy by Habiballah Fazaeli

Shekaste Nastaligh (meaning “broken” Nastaligh) is a style born out of Nastaligh. It is more angular and suitable for fast writing. And its long oblique strokes imply an incredible sense of motion and rhythm.

Shekaste Nastaligh by Habiballah Fazaeli
Shekaste Nastaligh by Habiballah Fazaeli

In the late 1800s two master calligraphers, Mirza Gholamreza and Mir Hossein, explored visual qualities of Nastaligh by creating pieces known as Siah Mashgh. Siah Mashgh was originally just a practice for the calligrapher to warm up his hand and to refine the shape of letters by repeating them over and over. These practices resulted in a page filled with words and letters, hence the name Siah Mashgh literally meaning “Black Practice”. When calligraphers realized how stunning some of these pieces were it was turned into a style of its own.In these pieces the sole intention of the artist is to create visually stunning works. Words and letters are repeated regardless of meaning, all for the sake of composition and style. In some ways, a Siah Mashgh explores the concepts of typography in a more complex manner.

Reza Abedini is one of the contemporary designers who has explored and expanded the possibilities of Farsi typography. In many of his works Abedini breaks up the baseline and manipulates individual words and letters to achieve his unique typographic style. Although Abedini uses modern typefaces, he tries “to revive the poetic qualities of Persian calligraphy in his posters”, as he puts it.

Since 2003 The 5th Color – a group currently made up of four well established Iranian designers: Majid Abbasi, Saed Meshki, Alireza Mostafa Zadeh, and Bijan Sayfouri – have organized three typography exhibitions in Iran.

Members of The 5th Color represent a generation of designers who have had a considerable role in shaping and fostering graphic design in Iran in the last two decades. Saed Meshki has brought typography into music stores and bookstores with his designs. In the past few years he has focused on book design and has started his own publishing house called Meshki Publications.

Another member of The 5th Color, Majid Abbasi, is the creative director of Did Graphics, a leading graphic design studio in Tehran. His works often feature very peaceful Farsi typography, giving the viewers a chance to appreciate the elegance of the letters.

Typography exhibitions organized by The 5th Color have been an opportunity to see works of up and coming designers, design students and big names in Iranian design all in one place. The first exhibition was held to commemorate the 100th birthday of Sadegh Hedayat (1903-1951), an Iranian avant-garde writer. The event was titled “The Blind Owl” (Bouf-e Kour) after Hedayat’s best known book.

The 2nd and 3rd exhibitions were held in 2004 and 2006 with the subject of Molavi – a mystic Sufi poet in the 13th century – and Iranian proverbs.

Farzad Fozouni and Iman Raad are two of the younger artists who stand out for their typographic approaches. Through their relatively short careers as designers they have created a wide range of charming and playful works.

With all the energy and enthusiasm of designers the following years are definitely going to be full of surprises and astonishing works coming out of Iran. Thanks to all the artists who participated and sent us their works.