WHAT IS
FABRIE
Before design🧠
Why is a Font Selector Needed?
In situations where layout and typography are crucial, such as during initial inspiration exploration with mood boards or while creating slides and project proposals, a single default font may not suffice. More diverse fonts are needed to present designs more accurately and clearly.
Creating moodboard and slides on fabrie
Should Font Weight Options be Provided?
In online whiteboard or presentation software, users typically cannot modify font weights and are only provided with a bold option. Professional design software such as Photoshop, Illustrator, and Figma offer font weight options and even more complex typography features.
Fabrie’s situation lies between the two: the primary benefit of font weight options is the significant flexibility and richer typography styles they provide.
However, for Fabrie, the disadvantages are also critical:
Increased Complexity: Adding font weight options complicates the font editing functionality. Although our target users are designers, not all designers across different industries have a foundation in visual design, and not everyone may understand the implications of font weight.
Complexity of Bold Function: With the introduction of font weight options, the existing bold function becomes particularly complex.
Performance Impact: Providing font weights requires loading additional font packages, which can lead to performance degradation.
Therefore, we have chosen not to offer font weight modification. Instead, we address the issue of limited typography styles by offering a rich set of default fonts. Specifically, when designing the font list, some fonts use their light or bold versions as the default "Normal" value for users, resulting in a rich variety of font styles.
How Many Fonts Should Be Provided for Users to Choose From?
As an online whiteboard rather than a professional design tool, providing users with too many choices can actually be confusing. It is sufficient to offer a number of fonts that cover most styles and scenarios.
Fabrie is a web-based online whiteboard tool and cannot access users' local fonts. When rendering fonts on the whiteboard, it is necessary to load fonts that are not already in the cache. To reduce user wait times and technical strain, it is also advisable to limit the number of fonts.
Ultimately, we have decided that the Fabrie.cn domestic site will offer 10 Chinese fonts and 10 Western fonts, while the Fabrie.com international site will offer 20 Western fonts. We believe this is the minimum number that can cover all user scenarios.
What Standards Should Be Used to Choose Fonts?
Taking the font selection for the Chinese site (fabrie.cn) as an example, the standards are as follows:
Coverage of All Scenarios: The selected font combination should cover all scenarios including headings, body text, and decorative text.
Comprehensive Character Set: At least two to three of the fonts should have a sufficiently large character set.
Commonly Used Fonts: The fonts should be commonly used by users, avoiding unconventional choices.
Free of Copyright Issues: The fonts should be free from copyright disputes and available under a license that avoids legal issues.
High Quality: The fonts themselves should be of high quality.
Includes Default and Brand Fonts: The combination should include both default fonts and any specific brand fonts.
Flow diagram & Prototype
Font list
Stories about Fonts
In Fabrie, the default font issue consists of two parts: the default font for the UI interface and the default font for text input boxes on the whiteboard. We have encountered difficulties with both types of default fonts.
Trouble of UI Default Font
During internationalization of the product, we selected TT Interface as the brand font. We considered changing the Fabrie.com font to TT Interface. However, we found that TT Interface did not align well with surrounding icons.
We later discovered that this was due to TT Interface’s font baseline being significantly higher than that of Chinese fonts. To resolve this, we used FontLab to modify the TT Interface font file, adjusting it based on the Pingfang baseline.
Trouble of Input Box Default Font
In the early stages of product design, we initially used system default fonts, namely Pingfang (Mac) and Microsoft YaHei (Windows), as the default fonts.
Because these are two different fonts with varying parameters such as character width and default spacing, Microsoft YaHei typically wraps text earlier and takes up more space than Pingfang. On the UI interface, responsive design prevents major issues despite font differences.
However, on the whiteboard, such flexible handling is not available. Users can input text into text boxes, sticky notes, and basic shapes, where the size of the shapes is determined by the fixed values of the user-resized bounding box. This means that when viewing the same document on different systems, the content layout may change due to font differences.
Since the company's computers are all Mac systems, we discovered this issue late. We had to retroactively switch the default font to a cross-platform font, Source Han Sans. However, because user documents already contained old data in Microsoft YaHei or Pingfang, changing to the new font would also lead to layout issues. Therefore, we had to retain these three fonts. On the UI interface, the original Pingfang and Microsoft YaHei will display as "System Font."
Product design: Chichi, Muki
UX design: Muki
UI design:Yoda
Front End develope: Guopeng
Quality assurance: Xiaoyang