Summary: Replace the outdated Arial typeface with a modern, embedded typeface for improved readability, internationalization, and accessibility.

https://learn.microsoft.com/en-us/typography/font-list/arial

Supported languages: Arabic Czech Danish Dutch English Finnish French German Greek Hebrew Italian Norwegian Polish Portuguese Romanian Russian Serbian Spanish Swedish Ukrainian Vietnamese

Description:
The current ZBX front-end uses Arial, which is outdated, lacks flexibility, is not available across all operating systems, and is not embedded. Additionally, it has limited language support and is paid typeface. A modern, UI-optimized typeface needs to be selected and embedded to ensure consistency, accessibility, and future-proofing.

Objectives:

• Improve readability and visual consistency.

• Support internationalization with minimal layout impact.

• Provide proper typeface fallback for CJK, Georgian, and Hebrew.

• Ensure open-source, UI-optimized typography.

Tasks:

1. Identify a modern typeface optimized for UI - Inter https://fonts.google.com/specimen/Inter?query=inter.
2. Validate that the new typeface supports the required languages: English, Catalan, Chinese, Danish, French, Georgian, German, Hebrew, Italian, Korean, Japanese, Norwegian, Polish, Portuguese (Brazil/Portugal), Russian, Slovak, Spanish, Turkish, Ukrainian, Vietnamese.
3. Find a suitable font stack (fallback) solution for CJK, Georgian, and - Hebrew.
4. Ensure the typeface has proper weight and sizing guidelines.
5. Prepare necessary typeface files for development handoff.
6. Test implementation across different OS and browsers.

Acceptance Criteria:

• The new typeface is embedded and functions consistently across UI.

• All supported languages display correctly without fallback issues.

• Ensure suitable font stack (fallback) is created for situations when an embedded typeface is not loaded in the front end.
• No major layout shifts occur.

• Typography guidelines are documented.

Progress tracker:

1. After exploring various Arial alternatives UX/UI team proposed using Inter https://fonts.google.com/specimen/Inter?query=inter. typeface as a replacement for various reasons:

• Inter is specifically designed for UI and digital interfaces and has excellent rendering quality on screens.
  - SIL Open Font License (OFL), free for personal and commercial use.


• Smaller file sizes compared to fonts with extensive character sets, improved performance, and loading speed.

• Dynamic adjustment of weight and width for better typographic hierarchy.

• Clear and readable at small sizes (10-12px), suitable for labels, tables, and charts.

• Covers 987 languages

• Is regularly updated

We also recommend using variable font because it offers greater flexibility, performance improvements, and better accessibility compared to static fonts. Detailed information: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web/variable_fonts_are_here

Font stack: Inter, Arial, Helvetica, 'Liberation Sans', Roboto, sans-serif (font stack will support Windows, iOS, Linux, Android)

All benefits come with only one small downside slightly larger character spacing, but this should not cause us any major problems during the transition to Inter.

2. During language support validation we discovered that Inter supports most languages used in ZBX front end, except Chinese, Japanese, Korean, Georgian, and Hebrew languages.

3. For languages unsupported by the Inter UX/UI team suggest setting up a fallback to Noto Sans https://fonts.google.com/noto specific to the unsupported language font.

Chinese - https://fonts.google.com/noto/specimen/Noto+Sans+SC https://fonts.google.com/noto/specimen/Noto+Sans+TC
font stack: font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; (This font stack will support Windows, iOS, Linux)

Japanese - https://fonts.google.com/noto/specimen/Noto+Sans+JP
font stack: font-family: "Noto Sans JP", "Meiryo", "Hiragino Sans", sans-serif; (This font stack will support Windows, iOS, Linux)

Korean - https://fonts.google.com/noto/specimen/Noto+Sans+KR

font stack: font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; (This font stack will support Windows, iOS, Linux)

Georgian - https://fonts.google.com/noto/specimen/Noto+Sans+Georgian
font stack: font-family: "Noto Sans Georgian", 'DejaVu Sans', "Sylfaen", sans-serif; (This font stack will support Windows, iOS, Linux)

Hebrew - https://fonts.google.com/noto/specimen/Noto+Sans+Hebrew

font stack: font-family: "Noto Sans Hebrew", "Arial Hebrew", 'DejaVu Sans', sans-serif; (This font stack will support Windows, iOS, Linux)

4. Define typography guidelines for font size, weight, and line height that should be used across ZBX UI by designers and developers to maintain consistency and improve accessibility and usability. Typography guidelines will be published in the design library ZBX foundations section and serve as a "source of truth" for future ZBX development.

5. Provide necessary typeface files.