Where to find your next font
Trauma-Informed Design Reflections #9
Introduction
Welcome to the ninth edition of the trauma-informed design blog, a weekly series of thoughts and reflections on the intersection between trauma and design.
This week (15–21 Apr) I share about a recent project I built that aims to promote fonts designed by people with marginalized identities, while at the same time tries to challenge traditional design practices.
Working towards a more equitable font industry
Recently, I’ve been reading an incredible book called Feminist Designer. It is a collection of essays and conversations on the intersection of feminism and design, gathered and edited by Alison Place. In it there are two pieces that I’d like to touch on today.
Aggie Toppins wrote an essay called “On the contradictions of feminist branding” in which she explores the idea that “branding is fundamentally antifeminist”. She touches on some very interesting topics such as on how the existence of a single trademark stands in opposition with the feminist value of pluralism or on how research processes used in branding often exclude the people who end up using the brand. In the essay she also explores a case study and writes: “Since the font industry is dominated by white men, I proposed to WGRR that we license typefaces designed by women and nonwhite designers.” This quote has stuck with me since.
Right after that, the book included a conversation between Aasawari Kulkami and the editor Alison Place titled “On fighting the typatriarchy”. I don’t know if the placement was a result of luck or brilliance (my guess is the latter) but regardless it gave me some more ideas on the topic. In it Aasawari talks about how only few typefaces are deemed as “good” by modern design standards, which leads to the rest being pushed to the edges. “The patriarchal system in this case is the constant use of these typefaces, not the typefaces themselves, so I coined the term typatriarchy.”
Interestingly (or perhaps not), I’ve been working with fonts for over 5 years, either in the context of UI design or of graphic design, and never before had I heard of that imbalance in the industry. And, when I brought it up with friends in similar fields, neither had they. The problem is real, but not widely known.
So, inspired by the work of these great women, I embarked on a journey of building something that could potentially help change that. I ended up designing and developing a directory that features fonts designed by people with marginalized identities, starting with fonts designed by women and people of color. I called it Equitable Fonts.
With this project I wanted to go beyond simply designing a website; I wanted to challenge the traditional ways in which we design and brand software. My ideas are experimental, but I’m very excited to share them with you and to learn how they land. This blog-post includes the main ones.
You can find the website here. In its current version, it includes very few fonts. I will be adding more soon.
(In case it is unclear the connection with trauma-informed design comes through SAMHSA’s 6th principle: “Cultural, Historical, and Gender Issues”.)
The basics
The general structure of the website is quite standard. It includes a list of fonts, some filters, a search field (hidden in the above image), and some options to change how the fonts are displayed. Each font is presented using its name, a text that is written using that font, and the name of the designer. A user can click on any of these fonts and navigate to Google fonts, from where they can see more information or download the font. A user can also submit new fonts.
Plurality
The first thing I wanted to challenge in my design is the notion of a single identity for software products. When designing software nowadays, the prevailing trend is the use of a single primary color and of a single typeface. To challenge that, I chose to use multiple colors (8) and multiple typefaces. Each time a user visits the website, or each time they refresh it, a new color and a new typeface are randomly selected, creating a unique design.
Instead of a “one size fits all” I tried to make space for multiple “sizes” to co-exist.
The available colors are not picked randomly. Instead, I tried to follow Chayn’s trauma-informed design principles and “[use] simple, warm, and visually appealing UX with a soothing colour palette that uplifts the mood of survivors and feels restorative.” Even though this website doesn’t directly target trauma survivors, I strongly believe that designing in a trauma-informed way is always a good thing.
The same is true for the available typefaces; they weren’t picked randomly. Here, I chose to walk the talk and select the ones already featured in the website. However, this could potentially create an accessibility issue, because not all fonts are equally accessible. For that reason I added an option to disable the random typeface selection. The default typeface used in that case is Bitter, designed by Sol Matas.
I ended up adding that option for colors as well. This wasn’t done for accessibility, since colors were already chosen with that in mind, but it was done in order to give users control over their experience. Once again, practicing trauma-informed design is always a good thing and providing choices to our users is a big part of that.
Accessibility
I’m not an accessibility expert (yet?) so I fear that there are multiple accessibility misses in the website. I did spend plenty of time, however, trying to ensure that the website is accessible and two interesting things came up around this topic.
The process of designing and building that version of the website took me less than a week. So at some point I realized that I wouldn’t be able to include all the features I wanted to before I launch (today). I had to choose which ones I would drop.
I used a simple x-y grid with difficulty and importance as its axis in order to create clarity on what I valued and could do. I placed accessibility on the rightmost edge (i.e. most important). This is something I haven’t seen done in any of the places I worked before, and I believe that it’s a huge miss. If we want to be serious about building accessible (and trauma-informed) products, being clear on how we prioritize accessibility is a crucial first step.
Accessibility being one of the most important features meant that others would have to be compromised. In the end, I ended up having to decide between testing the website with a screen reader and adding motion in more components. I chose to drop the motion. Of course I would have liked better motion design in my website but this is what prioritizing accessibility really means.
We are almost always working within time constraints but “there is no time for accessibility” is a dangerous lie. “Accessibility is not a priority for us” is a hard thing to say but at least now we’re being honest and we can choose to change that.
Another tradeoff that I sometimes see discussed in this area is between accessibility and aesthetics. I believe that an accessible UI can be extremely beautiful and it’s not an either/or situation. But throughout this project I’ve come across having to change colors I liked to ensure adequate contrast.
I believe that when debating between accessibility and aesthetics you should always always always pick accessibility. Not only because an inaccessible product can be unusable for some users, but also because aesthetics are subjective. What I like might differ from what you like, and to enforce what I feel looks good in the face of clear accessibility guidelines is both selfish and foolish. I’ve seen seasoned designers lean towards aesthetics and this is extremely frustrating.
Privacy
One of Chayn’s trauma-informed design principles is privacy. They recommend: “Make your content available without the need for signing up.” I followed this approach and did not include user authentication.
Of course, this isn’t possible for every project, but I frequently see websites that require authentication even when it’s not needed. Here, the main question worth considering is: does adding authentication benefit the user? If not, chances are that authentication is added to extract user information (such as their email address). Please don’t do that.
Connected to privacy is also the collection of data related to how the website is being used. I experimented on the language for that.
In data collection, the default option has traditionally been to assume that the user will provide their data or go through a process to opt out of doing so. I reversed that assumption, starting from a point where the user won’t provide any data. Then I added a card that explains why data are requested and gives a very clear choice to the user about it. I believe that this gives more power and agency to the user and recognizes that they own their data and that they are not expected to share them.
I was also very intentional about the design of the buttons that facilitated the data sharing process. None of them is designed as a “primary call to action” in order to avoid steering the user towards one direction.
Finally, I ensured that the user had reversible consent, being able to change their initial decision and opt out (or in) of data collection at any time. This was done in order to give more control to the user over how their data are shared.
To facilitate that in the website, I included a small card with a cookie icon on the bottom right, where the initial card was. When this is clicked it re-opens the data collection dialog allowing the user to change their decision. This card is always visible. The cookie can be filled or empty which is used to display whether data are currently collected or not.
Timeline
As I mentioned above, everything in the project, from ideation to design to development took less than one week. Looking back I see that as a mistake.
The “mainstream” way of doing projects seems to be trying to fit them in a predefined timeline. The advantage of this approach is that when we have a clear deadline we can ship what is ready by then. This protects us from falling into a spiral of perfectionism and endless refinement. It also helps people in larger organizations coordinate (i.e. not one person).
But this approach is violent towards the project. And, it often promotes the urgency culture by rewarding working fast over working ethically or working well.
Lately, I have started seeing projects as seeds that are planted. I then provide support and nurturing and watch them as they grow following their own timeline. It’s a more life-affirming way of doing work.
Unfortunately, this isn’t how this project came to life; I didn’t challenge the traditional way of doing project management. But I do intend to shift how I’m working as I keep supporting it.
Limitations
Because time was a limitation I had to take a shortcut and heavily couple this project with Google fonts. When a user clicks on one of the available fonts they are navigated to Google fonts where they can find more information about that font and download it. In addition to that, the project uses Google fonts under the hood to display the different fonts on the screen. This resulted in me being unable to include some important typefaces which are not currently on Google fonts such as Nari. In a future version I will resolve this issue.
In addition, I chose to currently only feature fonts designed by women and people of color. This was done partly because of time and partly because it was more manageable to start with just two groups and slowly grow from there. I am aware and want to address that this leaves out important groups such as people with disabilities, neurodivergent people, transgender people who do not identify as women, and members of the LGBTQIA+ community. Including more groups is at the top of my priority list for future releases.
Finally, I did not do research before starting the design of that project. This was because I’m not a researcher, and because I didn’t have a budget for this project. But, I also see this as an opportunity to challenge the process of research → design → development. By doing the design and development first people can engage with an early version and provide feedback and insights, while also hopefully benefiting from using the project. I see this as potentially doing “co-design in reverse”.
Conclusion
Working on Equitable Fonts has been really fun and challenging at times. The process of exploring the font industry more deeply and of confronting traditional design practices has helped me learn a lot. I hope that reading about my process helped you learn something as well.
If you read this article (which you probably did since you’re here) and/or if you took some time to look at the website, I’d love to hear what you think. Do not hesitate to reach out to me. If you know of any font that is not currently included please take a moment to submit it (even if it’s not currently on Google fonts). And if you end up using this directory to pick a font for one of your projects it would mean the world to me if you could let me know. Thanks in advance. :)
A note
I couldn’t fit this anywhere in the blog-post, but I feel it’s worth mentioning. The book Feminist Designer also includes a conversation between Rachael Dietkus and the editor Alison Place on trauma-informed design. It’s really great!
Citations
In order to collect the fonts that are initially featured in the website I did use other online directories and articles. They have done an incredible job and you can find them below:
TID Nuggets
- Being inclusive in the selection process of a program is extremely good and important. And yet, if once people are selected the content or resources of the program are not inclusive we can end up doing more harm than good.
Notable on trauma-informed design
This section doesn’t include any personal reflections, instead it includes things that happened in the trauma-informed design field and are worth giving a look at (according to me). Enjoy! :)
- The Trauma-Informed Design Discussion Group is an amazing community to join. They offer support, share knowledge, and organize monthly calls on trauma-informed design. I can’t recommend them enough! You can request to join the group using this form. They are also building a really great directory of resources, which you can find here. (online)
(This section does not include promotions. Everything is being shared with permission.)
