Sick of the onslaught of online imagery? These websites place emphasis on typography

As the internet has evolved to become increasingly saturated with imagery, a website which focusses instead of text and typography really stands out. To omit imagery altogether feels like a statement, a backlash against what has become the visual norm but it also shows skill, as to create a website which is engaging without the help of a photograph or even an icon is no mean feat.

For this month’s Double Click, we’re looking at websites which do exactly that – place emphasis on type in experimental, playful or adept ways. Some use 3D, some are responsive and some are simply executed so damn well, they had to make our list.

Regroup: www.copier-coller.club

Perhaps not what you were initially expecting from a Double Click all about typography, the first site included in this month’s article impressed us for its pixel-perfect attention to detail, rather than its in-your-face use of type. The site in question was designed by Regroup, AKA Victor Jacquard and Jean Reynaud for their project Copier Coller Club, a virtual artistic residence on Instagram. Each week, a different creative is invited to take over the Instagram account and is given carte blanche.

“The aim of the project is to spotlight the process of the artist and/or designer rather than their final works. Each Sunday, we delete the content of the Instagram to provide the next resident with a free space to publish on,” the pair explains. While the Instagram only ever shows that week’s content, the website acts as an up-to-date archive and features a clean, simple interface, minimal typography and a “sharp animation system” in order to reflect, and not interfere with, the vast styles featured on Copier Coller Club. In turn, the type, which is set in Kepler by Guillaume Besson, is integral to the site’s identity and their considered use of indents and spacing in order to denote a hierarchy of information takes centre stage.

It would be remiss not to mention the use of animation on the site as well. Upon clicking into a name, it smoothly rises to the header and returns to its original place in the list when you return to the homepage. No mean feat, Victor and Jean describe this as “a big challenge.” The project is currently on pause due to Covid-19 and the pair is taking time to “think about a brand new concept and a new website which is coming soon.”

Languages used:

“The website is made on top of Kirby CMS,  CSS and PHP. Libraries: Barba js for page transition.”

OKOK Services: www.okok.services

OKOK Services is a studio based between Amsterdam and Seoul, and its website focusses on typography and interaction in a big way. A duo made up of Faris Kassim and My Kim Bui, OKOK Services creates explorative work across interactive and web design, as well as development, mobile apps, creative coding, 3D design and augmented reality.

The studio’s website is very much a reflection of its practice, therefore. Upon loading, it presents you with a large, slowly moving 3D logotype (in Romie by Margot Lévêque), finished in a blue gloss. By using the mouse, you can move the giant letters to see them from different angles. Set against a black background, it’s a bold and dramatic choice and takes its cues, OKOK Services tells us, from the “camera shots you get in a product commercials, the slow panning and tracking shot of the perfume bottle etc.” At the time of creating the site, the studio was mainly freelancing for friends and so wanted its website to mirror a glossy product launch but also act as a “calling card of future projects and clients we hoped to work with.”

Languages used:

“Nothing out of the ordinary. Just HTML, CSS, Javascript with three.js to work with the 3D.glb file exported from C4D. No CMS either but just an editable local JSON file with videos hosted on Vimeo.”

E Roon Kang: math-practice.org

Next up is a site so simple yet so pleasing we had to include it. Designed by E Roon Kang, who is the founder of design and research studio Math Practice, its concept can be explained in one sentence: “The page features a flow of text that is constantly updating its line lengths – from full width of the viewport to single character – depending on the horizontal position of your mouse pointer.” And that’s it!

Languages used:

“Nothing special, just HTML/CSS/Javascript.”

Soft Power: nonymous.com

Nonymous is “a decentralised advertising and marketing agency that takes the costs of agency overheads and gives it to creative talent,” the agency tells us. The idea is to build an anonymous network of world-class creatives and strategists while, in turn, clients get better work at a lower price and “talent” gets paid more and can work from anywhere. “We also hope that this can help tackle biases concerning gender, race, and age that are still a major issue in the creative industry, and provide fair opportunities in the coming recession and economic downturn,” Nonymous continues.

With this unique concept in mind, Nonymous is entirely reliant on its website, which was designed and built by Soft Power to “build trust and credibility with both clients and talent.” The focus of the site is the agency’s logo, which is responsive, stretching and collapsing as you scroll. “By making the identity legible through human interaction, either by moving physically, or stretching it digitally, we also convey a sense of secrecy, stealth and confidentiality,” the agency explains and, it seems to be a success: “Our ambitions were to inspire great creatives and strategists to sign up, and bold brands to reach out. So far, it's working.”

Languages used:

“Javascript, CSS and Framer Motion (Animation Library).”

Alfatih: windhagervonkaenel.com

We’re ending on a high this month with a sophisticated yet playful site designed and built by Alfatih, a Switzerland-based artist and designer. The site is for Windhager von Kaenel, a gallery based in Zurich and it presents users with the bare minimum information required, asking them to click anywhere on the screen to reveal the next snippet of text. “We wanted to create something unique at each visit without enforcing an aesthetic or adding extra elements – only using the available content,” Alfatih explains.

The whole concept, therefore, focusses on “a time-based hierarchy first, and the spatial hierarchy (i.e. the layout) would come second.” Users can, at their own pace, reveal and discover the content, as well as organising it themselves – the words appear wherever you click and then rise to the top of the screen. “When the website launched, my client started to use it to create layouts that they could print for the invitation card,” Alfatih adds. “This is something I didn’t fully plan, but the website became a design tool on its own for this use case.”

Languages used:

“I used Vue JS and Matter JS for the physics.”

With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick20” at checkout.