The beauty of system fonts is that it matches what the current OS uses, so it can be a comfortable look. If we can use a font already available on the user’s machine, we can completely eliminate the need to fetch this resource, making load times noticeably faster. Fonts are typically one of the largest/heaviest resources loaded on a website. The main reason for using 'system' fonts is performance. It is used by GitHub, Wordpress, Bootstrap, Medium, Ghost, etc. This solution is harmless and very useful.

Try to make font scale dance like a note: When you need to expand any gap, you can try to choose the different sizes of the font from the font scale table, which will create a subtle rhythm between the word scales.Font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif.Avoid meaningless use of large numbers of font scales, colors, and font weight to emphasize visual or contrast relationships. Less is more: Visual design should be achieved with as few styles as possible.The establishment of a systematic design approach helps to increase the consistency of horizontal font landing, improve the cost-effectiveness of font uses, and avoid unnecessary style waste. And then make any necessary fine tuning according to the specific situation. The primary, secondary, auxiliary, title, display, and other types of fonts are planned in a unified manner. Establish a systematic design thinking: In the UI design of the same system, a systematic design thinking should be established first.In practical design, we have three more advanced tips: The construction of the font system is the first step to achieve 'the beauty of dynamic order'. 7:1 or more between body text, title, and background color. To achieve barrier-free design, we follow the WCAG standard, which maintains an AAA level of contrast ratio, i.e. Text will be difficult to read if it is too close to the background color. Ant Design prefers the system default font family and then also provides a set of alternative font libraries to maintain readability for screens on different platforms and browsers and to make sure it's always user friendly, stable and professional to end user. In order to implement a good font system, the first thing is to choose an appropriate font family. While defining the font system for a visual system, we propose to start from the following five aspects: We strongly recommend it since it has been verified by a large number of Ant products. The Ant Design typography system is based on the design principle of 'dynamic order' combined with the law of natural logarithm and temperament. Text is a major channel for users to understand application content and complete their work, and a well designed font system will greatly enhance the user's reading experience and work efficiency. The font system is one of the most foundational parts of any interface design.

Apple san francisco font family