[Story]Hot Financial Platforms' Perspective on Fonts.

Font for UI Toss Product Sans

Branded font for financial platforms

The Toss Product Sans font was developed in response to inquiries from Toss, a financial platform company. This project took place from July 2020 to March 2021, spanning about nine months. The initial inquiry differed slightly from typical branded font projects that I remember. Unlike most projects undertaken by Sandoll, which usually focus heavily on Hangul (Korean characters), Toss prioritized Latin and numerals over Hangul. This unique perspective from the outset made the project intriguing and enjoyable. 

Discussion of the UI environment development direction

In discussions with Toss about font development, the most crucial point was to develop a font family optimized for the UI environment. The past UI environments, which appeared differently depending on the user's system or operating system (OS), were inconvenient for both users and creators. Additionally, due to the nature of Toss's service, which mainly deals with financial information, the importance of numbers and punctuation marks was high. Therefore, rather than creating new Hangul fonts, which were already well-designed and familiar to users, the focus was on optimizing Latin, numerals, and punctuation marks. Thus, Hangul remained unchanged, using the existing Sandoll Gothic Neo1, while the Latin, punctuation, and other glyphs were optimized to match the Hangul.

「토스 프로덕트 산스」를 위한 프로토타입 논의 과정

Design of numerals and punctuation marks

As mentioned earlier, the design of numerals and punctuation marks was one of the most critical aspects of the entire project due to the nature of Toss's service. During the development of Toss Product Sans, several considerations were made, and I'll explain some points on what was deliberated and the resulting design.

1. Width of numerals

There are two main types of numeral width: fixed width, where all numerals have the same width, and variable width, where each numeral has a different width depending on its shape. Fixed-width numerals have the advantage of maintaining a stable overall line regardless of changes in numeral content. However, they may appear to have different white spaces between numbers due to the same width. In contrast, variable-width numerals have their pros and cons.

Since Toss's service mainly uses short-word numerals, and numerals are frequently used within them, it was determined that fixed-width numerals with the same width for all glyphs would greatly enhance usability.

2. Form of numerals

Once the width was determined, the next task was to design the numerals as naturally and legibly as possible within a consistent width. As you know, numerals have significantly different appearances. For example, the numeral 1 has inherently narrow widths, while the numeral 0 has wider widths. Within the same width, it was essential to design them to be as unobtrusive as possible.

While considering whether to add a horizontal stroke to make the numeral 1 more distinct, the overall design concept was prioritized. Thus, the final form was decided as shown in the image below.

3. Punctuation marks

As mentioned earlier, punctuation marks were crucial for Toss's service. Since it is a financial service, the frequency of arithmetic symbol usage was high. Additionally, due to the nature of the app, where punctuation marks serve as symbols for specific functions such as back or forward navigation, it was necessary to finely adjust the size, height, etc., of punctuation marks, unlike those in typical Korean fonts.

Generate options for convenience

One of the unique experiences in the Toss Product Sans project was the division of generate options into three. Once all the fonts were created, they needed to be converted into files to be displayed well on the devices or systems where they would be used. Sandoll calls this process publishing or generating. Usually, most fonts are generated with the same glyph composition and design to be shared with the client. However, Toss divided the generate options into three for more optimized usability.

1.Option for internal use at Toss

This option is set up to make it convenient for internal employees to create various design outputs. It was set up as the most common option so that it could be used in various environments.

2.Option for use in the Toss app

This option is set up to make it convenient for both users and creators within the Toss app. As mentioned above, several punctuation glyphs were modified to allow punctuation marks to be conveniently used as symbols within the app. This prevented the need to modify punctuation marks each time when developing app services.

3.Option for use on the Toss website

This option is set up to make it convenient for use on the Toss website. Since the font file's size was crucial in the web environment, lightweight font files needed to be generated. Therefore, the number of Korean glyphs was reduced from the original 11,172 to the minimum specification of 2,780 for generation.

Toss Product Sans

With the final checks of the three generate options and confirming that they displayed well on all usage environments and devices, the Toss project was completed. As it is the font family used in Toss, the name was decided as Toss Product Sans.

Below are example images of Toss Product Sans in use. It was a highly satisfying project that produced results that complement Toss's clean brand image. Furthermore, it was an enjoyable experience to focus on Latin, numerals, and punctuation marks, unlike other projects where Hangul was the focus. It was a rewarding project from the perspective of a font designer.