Responses by Synoptic Office.

Background: The archive will support designers who use Chinese typography by developing descriptors for concepts, typefaces and related entities, archiving related and relevant visual examples, and providing points of entry through translation and relationships to other typographic systems.

The Chinese Type Archive is part of our studio’s interest and research into Chinese typography that first began when we encountered Chinese-language projects many years ago. It is a way of sharing the things we have found with the rest of the world.

Design core: From a cataloging standpoint, the site’s core feature is to provide a stable identifier—an ID number—to resources, concepts and typefaces, and to show the information associated with each of those records. At the moment, the site is very data intensive. The reason for this is that we are discovering new things about Chinese type every day and the information is constantly being updated. Having an identifier allows a fixed point of reference.

In terms of the design, we were fixated by this idea of a sliding drawer like the ones you find in old archives. For us, that became the interaction metaphor for the site. We thought it would be fun to somehow design something around this visual idea.

Favorite details: We are very happy at our initial take on the slider. In fact, we have more updates planned for the homepage and hidden features. The site is also a way for us to experiment with novel interactions.

Challenges: There is so much data that is associated with each record that the site can easily default to tried and true solutions that used by archives, libraries, and museums. We wanted to see if we could flex those approaches while bearing in mind that the data is incomplete and growing.

Project schedule: Our studio works on a range of commercial projects for cultural clients as well as more research-driven work like the type archive. As a result, we gave ourselves a deadline of a few months to prototype (working during project down-time) and pushing through the final development during the holidays. As a result, some of the more extravagant design features were paused but will be released later.

New lessons:  Everything on the site was built from scratch. We had a great developer who helped prototype the site, which served as the foundation when we pushed it through production. One novel aspect of the site was its bilingual nature. Different languages and typefaces mean different type settings, so the site has twice as many styles as it would have if it were in one language.

We also wanted to mix languages, which is often not seen—at least not in the way that we wanted. We wanted to use a character subset from one typeface and a character subset from another typeface. This is easy in print, but not so easy when it is on the web and the information is dynamic.

Navigation structure: The navigation was based on an idea of a drawer that are often found in old libraries and archives. We are planning on expanding on this idea; after building the site and playing with it for a while, we have some ideas about how it could be improved and used.

Technology: The site has a typical simple web app architecture. The prototype was first written in pure JavaScript, and the final production version was built using Vue.js with HTML and CSS. The data is sent to the site in JSON format.

One thing that we had to investigate thoroughly was vertical type (found in the indexical listing on the About page). Although the CSS specifications for vertical type are adopted by modern browsers, its implementation is dependent on quirky settings that are not documented at all. There was a lot of trial and error to make that work properly in a multilingual environment.