PREMISE
Using Recommender system to assist aspiring designers in font selection suitable for their project based on desired feel.
SYNOPSIS
With hundreds of thousands of fonts available, many designers, especially aspiring designers struggle with choice overload when selecting fonts. Choice overload can be experienced by feeling overwhelmed with the vast number of options available. Current solutions are focused on generic categories, making it difficult for inexperienced to identify the appropriate category that conveys intended messages effectively. As font mismatch can lead to misperception of the design and author, it is crucial to select a correct typography. One possible solution could be implementing a Recommender system to help aspiring designers in the selection process by providing fonts that communicate their project feel. For this project, I created a prototype of a recommender system that provides font recommendation based on academic findings about font psychology and Google Fonts data.
SUBSTANTIATION
Font selection plays a crucial role in the perception of messages and emotions conveyed through design (Poon, 2021). However, selecting the appropriate font demands time and expertise (Zhao, Cao & Lau, 2018). The vast number of available fonts, which has been steadily increasing (Baluja, 2016) and now exceeds almost a million options available in popular font finders(e.g. What Font Is). Making it challenging for designers to make timely decisions that suit their project needs, causing a prolonged decision making process and often leading to selection of suboptimal font (De Grandis, 2022). Moreover, available filter options are limited, not allowing them to provide enough context further leads to a prolonged selection process (Roberts, 2022).
To address designers choice overload during font selection, it is important to consider studies on font psychology (De Grandis, 2022).These studies highlight the emotional impact of fonts and the importance of choosing a font that reflects the brand identity (Monotype and Neurons, 202) Incorporating font psychology findings into the recommendation system will help the navigating through the font selection based the desired emotions and feel they want to convey (O’Donovan, Libeks, Agarwala,& Hertzmann, 2014).
Recommender systems have been widely implemented in various fields to help users overcome choice overload by providing relevant information based on their preferences, actions or needs (Moghaddam & Elahi, 2019). To increase user trust in recommendations they should have access to clear visual representation as well as additional information provided for the recommendation (Berkovsky, Taib & Conway, 2017).
A content-based filtering recommender system was chosen as the underlying technology for the prototypes. This system generates recommendations based on content, avoiding the cold start problem (Roberts, 2022; Moghaddam & Elahi, 2019) often encountered when limited data is available. By choosing a content-based filtering recommender system, the prototype can be actively tested and improved while collecting data for future system expansion, ultimately helping designers make more informed font choices.
Design process
Data collection
Font data along with font files were collected through Google Fonts API (Google Fonts, 2023). Google provided a variety of font information such as font description, family name, available styles, weights, designer. Additionally, findings from font psychology studies were taken into account when creating the dataset (Shaikh, Chaparro & Fox, 2006; Shukla, 2018). Moreover, a popularity ranking based on yearly usage was taken into account when to provide more accurate recommendations. All gathered data will power the content based recommender system that will further collect user data. That data will be later used for graduation assignment to extend the current recommender system and implement a collaborative recommender system using the user data regarding their preferences (liked, disliked, saved) to create a hybrid recommender system.
The code and data files can be found here.
ITERATION 1
The first iteration was a simple recorder system created using Python Programming Language based on data acquired from Google Fonts API and font psychology findings. To test the prototype users interacted with a Streamlit dashboard.
During the first iteration, the prototype was tested with 5 aspiring designers with various levels of experience. The users were asked to fill in their name and select desired “feels” in order to get recommendations and select a font. Afterwards, users were asked additional questions regarding font selection process, the user experience as well as recommendations efficiency.
User testing sessions showed that the tool is desired by the target audience. Due to lack of experience they are not able to assess right away which font communicates certain feels, meaning they often need to try multiple fonts before they find a suitable one. Implementing a recommender system allowed participants to filter fonts more effectively based on their match to the project. However, participants highlighted that without font visualisation the recommendations were not as useful as it could be. Moreover, 4 users shared that they would be more prone to use it if it was a mobile version rather than desktop to conveniently support the design process. Participants suggested addition of desired font weights would help to make the recommendations more accurate. Furthermore, users mentioned that they would like an option to save the fonts to a personal library.
ITERATION 2
The second iteration prototype was a Figma interactive prototype of a mobile app (incl. recommendations, library and random generator font visualisation) created based on user feedback collected during first testing. The mobile app was designed based on fonts recommended by the system, keeping in mind to make the recommendations more visual, implement a font weight question as well as create a personal library where users could gather favourite fonts.
Additionally, a dashboard featuring the random font generation visualisation based on user input was created using Streamlit for testing and data collection.
The aim of second user testing (n=5) was to further explore the helpfulness of recommendations based on user input, collect user data and review user interaction with added features to identify possible improvements. Participants were presented with a Figma Prototype to provide a better, more visual, mobile user experience. This time the recommendations were supported by visual representation of the font. However, users shared that even though now the fonts were visualised (Figma), it was still not enough for them to be able to quickly assess whether the font would be suitable. On the other hand, all users were satisfied with the level of visualisation in the Random Font Generation (Streamlit), but did not like the randomness of the results.
Furthermore, participants found the “random generator” button confusing in the Figma prototype and often clicked on, and moved to the random generator screen, when they wanted to simply regenerate the recommendations.
ITERATION 3
Previous iterations further showed the importance of visualisation and filtering when selecting fonts. Therefore, for the 3rd iteration additional data was implemented into the recommender systems (e.g. designer name, description of the fonts, additional keywords) to enhance the accuracy of the recommendations over time. Furthermore, the Random Font Generation visualisation was adjusted to provide and visualise user text input using filtered fonts based on user preferences. This allowed to simplify the font selection process for the user allowing them to quickly view the font visualisations to assess the font-project fit and provide feedback. The prototypes for this iteration were an improved Streamlit dashboard allowing users to view recommended fonts along with visualisation. The Figma prototype was redesigned to showcase final Streamlit prototype functionalities in a mobile version.
User testings (n=5) of the Streamlit and Figma prototype were conducted to see whether the implementation of visualisation based on user input and user preferences would be more helpful for the selection process. The participants were asked to input their preferences (connotations & weight) and input text to showcase recommendations using a suitable font and user text input. Moreover, users were asked to press “like” and “dislike” and “save” buttons to provide feedback to the system. While participants still had to go through multiple recommendations, the time spent of proposed fonts to user preferences was improved. Participants stated that current visualisation was significantly more helpful, allowing them to immediately assess the feel of the font and match between the font and their text.
All tests were conducted using the researcher’s device.
CONCLUSION
This font recommendation tool was developed to help aspiring designers overcome choice overload and select suitable fonts efficiently. Usability tests and user interviews confirmed that such a recommendation tool is desired and could provide help improving the selection process. In the majority of testing sessions participants did not experience choice overload. While many participants found a font they liked, for some the process was still requiring a fair share or regeneration of recommendations. This prototype has great possibilities for further improvements. Once more user data is generated, a collaborative filtering can be implemented into the system to improve the accuracy of recommendations. Furthermore, font pairing data needs to be included in order to provide recommendations on fonts that work well together. Further user testing of the Interface and the system as well as mentioned improvements will be implemented in future iterations.
REFERENCES
Baluja, S. (2016). Learning typographic style. arXiv preprint arXiv:1603.04000.
Berkovsky, S., Taib, R., & Conway, D. (2017, March). How to recommend? User trust factors in movie recommender systems. In Proceedings of the 22nd international conference on intelligent user interfaces (pp. 287-300).
De Grandis, S. (2022). Fonty Psychology and how it influences design. https://www.vev.design/blog/font-psychology/. Accessed 10 March 2023.
Fuge, M., Peters, B., & Agogino, A. (2014). Machine learning algorithms for recommending design methods. Journal of Mechanical Design, 136(10), 101103.
Google Fonts (2023). Google fonts. https://fonts.google.com/ Accessed 20 March.
Moghaddam, F. B., & Elahi, M. (2019). Cold start solutions for recommendation systems. In Big Data Recommender Systems: Recent Trends and Advances. IET.
Monotype and Neurons. (2021). Can fonts really affect our feelings?https://www.monotype.com/sites/monotype/files/2022-06/Monotype-Neurons.pdf. Accessed 2 March 2023.
Poon, S. T. (2021). Typography Design’s New Trajectory Towards Visual Literacy for Digital Mediums. Studies in Media and Communication, 9(1), 9-19.
Roberts, A. (2022). The Who, What, Where, When, Why (and How) of Recommender Systems.https://arize.com/blog/the-who-what-where-when-why-and-how-of-recommender-systems/. Accessed 19 March 2023.
Shaikh, A. D., Chaparro, B. S., & Fox, D. (2006). Perception of Fonts: Perceived Personality Traits and Uses. Usability News, 8(1).
Shukla, A. (2018). Font psychology: New research & practical insights.
Zhou, J., Miao, X., He, F., & Miao, Y. (2022). Effects of Font Style and Font Color in News Text on User Cognitive Load in Intelligent User Interfaces. IEEE Access, 10, 10719-10730.