Home

Rosetta Type

2020—2022 / BRAND, DESIGN SYSTEM, web & APP DESIGN

The multi-lingual type designers at Rosetta Type asked me to help them find a way of sharing their knowledge and increasing Rosetta’s brand reach.

designregression.com and universalspecimen.rosettatype.com

Rosetta Type foundry holds extensive knowledge and expertise in multi-lingual type design. After a decade of heads-down focus on their award-winning typefaces, they wanted to share that knowledge with the design community and increase their brand awareness in the process.

Together, we strategized two initiatives to achieve that: a suite of open-source tools and a design journal.

As a secondary goal, we decided to explore a future visual style for Rosetta Type’s web presence. To create a flexible design system that can be used for all Rosetta web projects in the future.

Design Regression

designregression.com

Design Regression is a small independent journal about design for reading and reading-related research.

My main challenge was designing a typography system that works well for long-form and short-form articles with a lot of multi-lingual typography. The overall visual style is focused on typography, showcasing the versatility of Rosetta’s own typeface Adapter.

List of articles — homepage
Article detail
Article footer & navigation menu
Three color schemes for different categories of content

Universal specimen

universalspecimen.rosettatype.com

The Universal specimen is a web app and an open-sourced project helping designers typesetting multi-lingual documents.

It answers questions such as: Does the font support the languages we need? If it does, does it represent all the languages equally well? Which translations will it cause to run long, and which will it cut short? Does it account for the frequent diacritics used in languages like Czech or Hungarian?

The Universal specimen allows type designers to easily typeset translations of the same text side by side. It lets them directly preview the effect of standard typographic parameters on a specific language’s appearance and economy.

Universal Specimen — Responsive behaviour

It was particularly challenging to find an appropriate form to preview the languages; to allow for a quick comparison between various languages while providing enough space to preview a single language. Through early prototyping, we arrived at a horizontal scrolling behavior, coupled with additional hover controls on the desktop, to support users struggling with horizontal scrolling.

Core interactions and transitions

Loading different fonts take an untrivial amount of time. To ease that transition, I introduced transitional loading states and motion, together with an unobtrusive placeholder. Placeholders also help during the initial load of the app.

Control elements and behaviours

Universal Specimen served as a blueprint for another tool called Hyperglot, helping type designers identify the proper language support for multi-lingual fonts.

To make the development of future tools simpler and consistent, we created a small design system spanning typography, spacing, grid, and interactive components. We kept it small and flexible, avoiding building a large system that wasn’t fully used.

Design system — form elements

Rosetta.com

The above work culminated in a large-scale redesign of Rosetta's font catalogue rosettatype.com, building on all we created and learned on Design Regression and Universal Specimen.

Main contributors

  • David Březina (Rosetta Type) — art direction
  • Anna Gierdric (Rosetta Type) — stakeholder
  • Johannes — software engineer