[PR #6360] [CLOSED] Enable Inter font OpenType features for better number readability #108730

Closed
opened 2026-06-02 16:22:54 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/6360
Author: @StephenBrown2
Created: 12/10/2025
Status: Closed

Base: masterHead: tabular-numbers


📝 Commits (7)

  • 9dd19cf Enable Inter font features
  • 607915f Add ss04 to styles.tnum
  • 6314361 Remove font feature settings and always apply in tnum style
  • 65f04ec Update VRT screenshots
  • 1fa2116 Update VRT screenshots
  • 8ec898f Merge branch 'master' into tabular-numbers
  • e69697f Update VRT screenshots

📊 Changes

208 files changed (+18 additions, -15 deletions)

View changed files

📝 packages/component-library/src/styles.ts (+5 -2)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png (+0 -0)
���� packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-1-chromium-linux.png (+0 -0)

...and 80 more files

📄 Description

This PR updates the styles.tnum style to include additional OpenType features for the Inter font to improve the readability and character disambiguation of numbers throughout the app.

Addresses https://discord.com/channels/937901803608096828/1448222594905018491 in a user-configurable way. See "settings" screenshots at the bottom.

Changes

Updated styles.tnum to include:

  • tnum (Tabular figures) - All digits have the same width, making numbers align perfectly for easier scanning
  • ss01 (Alternate digits) - More distinguishable number forms ("open" digits)
  • ss04 (Disambiguation) - Increases visual difference between similar-looking characters (1/l/I)
  • zero (Slashed zeros) - Further differentiates zeros in tables from other circular characters (0/O)

Updated FormatSettings:

  • Added a user setting to toggle the alternate "open" digits and slashed zero (zero feature) on/off based on personal preference

Applied styles.tnum to budget summary components:

  • ToBudgetAmount.tsx - "To Budget" / "Overbudgeted" amount display
  • BudgetTotal.tsx - Budget allocation progress display
  • Saved.tsx - Saved/overspent amount display

Background

The tnum style was already used selectively in various components (transaction tables, budget cells, etc.) to enable tabular figures. This PR extends it with ss01, ss04, and zero for better character distinction, and applies it to budget summary components that were missing it.

Why

Financial applications benefit greatly from these features:

  • Tabular numbers ensure columns and values align vertically, making it easier to compare amounts
  • Alternate digits & disambiguation help prevent misreading similar characters in account numbers, transaction amounts, etc.

Future Consideration

See all possible features in the Inter lab: https://rsms.me/inter/lab/

Screenshots

Sidebar

Screenshot from 2025-12-10 13-48-46

Envelope Budget

Screenshot from 2025-12-10 13-49-59

Tracking Budget

Screenshot from 2025-12-10 13-50-14

Settings (removed)

Screenshot from 2025-12-10 16-56-04 Screenshot from 2025-12-10 16-56-00
Screenshot from 2025-12-10 16-55-57 Screenshot from 2025-12-10 16-55-53


Note

Enable Inter OpenType features and apply tabular/disambiguated numerals to budget summary displays and form text for improved numeric readability.

  • Typography
    • Update styles.tnum to enable "tnum", "ss01", "ss02" OpenType features.
    • Apply font-feature-settings: 'ss04' to inputs/textareas in packages/desktop-client/index.html.
  • Budget UI
    • Apply styles.tnum to ToBudgetAmount, BudgetTotal, and Saved displays for aligned, clearer numbers.
    • Simplify BudgetTotal by removing CellValueText wrapper; use CellValue directly.
    • Ensure tooltip numeric values in Saved use styles.tnum.
  • Docs
    • Add release note upcoming-release-notes/6360.md.

Written by Cursor Bugbot for commit e69697f939. This will update automatically on new commits. Configure here.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/6360 **Author:** [@StephenBrown2](https://github.com/StephenBrown2) **Created:** 12/10/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `tabular-numbers` --- ### 📝 Commits (7) - [`9dd19cf`](https://github.com/actualbudget/actual/commit/9dd19cf4cef89d6d5b5a244bf997108b4ebc3e71) Enable Inter font features - [`607915f`](https://github.com/actualbudget/actual/commit/607915fdab4bae60a1f4dd2dec09e6f2fa3e4b99) Add ss04 to styles.tnum - [`6314361`](https://github.com/actualbudget/actual/commit/63143617a308efe4012b89d1c8cebd3e52059221) Remove font feature settings and always apply in tnum style - [`65f04ec`](https://github.com/actualbudget/actual/commit/65f04ec4e5d52b919c430cdddd9ba73069e9ab9d) Update VRT screenshots - [`1fa2116`](https://github.com/actualbudget/actual/commit/1fa2116b9e7f6caef4ae9d57f72cca54e3e2c00a) Update VRT screenshots - [`8ec898f`](https://github.com/actualbudget/actual/commit/8ec898f676179f21d68aeb5edcff0f72b83fa4f7) Merge branch 'master' into tabular-numbers - [`e69697f`](https://github.com/actualbudget/actual/commit/e69697f939a1d88faef6b8c4b2cfd48724bb9419) Update VRT screenshots ### 📊 Changes **208 files changed** (+18 additions, -15 deletions) <details> <summary>View changed files</summary> 📝 `packages/component-library/src/styles.ts` (+5 -2) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png` (+0 -0) ���� `packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.test.ts-snapshots/Accounts-closes-an-account-1-chromium-linux.png` (+0 -0) _...and 80 more files_ </details> ### 📄 Description This PR updates the `styles.tnum` style to include additional OpenType features for the Inter font to improve the readability and character disambiguation of numbers throughout the app. Addresses https://discord.com/channels/937901803608096828/1448222594905018491 in a user-configurable way. See "settings" screenshots at the bottom. ### Changes **Updated `styles.tnum` to include:** - **`tnum` (Tabular figures)** - All digits have the same width, making numbers align perfectly for easier scanning - **`ss01` (Alternate digits)** - More distinguishable number forms ("open" digits) - **`ss04` (Disambiguation)** - Increases visual difference between similar-looking characters (1/l/I) - **`zero` (Slashed zeros)** - Further differentiates zeros in tables from other circular characters (0/O) **Updated FormatSettings:** - Added a user setting to toggle the alternate "open" digits and slashed zero (`zero` feature) on/off based on personal preference **Applied `styles.tnum` to budget summary components:** - `ToBudgetAmount.tsx` - "To Budget" / "Overbudgeted" amount display - `BudgetTotal.tsx` - Budget allocation progress display - `Saved.tsx` - Saved/overspent amount display ### Background The `tnum` style was already used selectively in various components (transaction tables, budget cells, etc.) to enable tabular figures. This PR extends it with `ss01`, `ss04`, and `zero` for better character distinction, and applies it to budget summary components that were missing it. ### Why Financial applications benefit greatly from these features: - **Tabular numbers** ensure columns and values align vertically, making it easier to compare amounts - **Alternate digits & disambiguation** help prevent misreading similar characters in account numbers, transaction amounts, etc. ### Future Consideration See all possible features in the Inter lab: https://rsms.me/inter/lab/ ### Screenshots #### Sidebar <img width="228" height="538" alt="Screenshot from 2025-12-10 13-48-46" src="https://github.com/user-attachments/assets/dc528831-8dd7-46a9-922c-a1acf83ef7ce" /> #### Envelope Budget <img width="693" height="1172" alt="Screenshot from 2025-12-10 13-49-59" src="https://github.com/user-attachments/assets/bad0df31-b5ac-4804-abbe-02d570de3a1a" /> #### Tracking Budget <img width="693" height="1172" alt="Screenshot from 2025-12-10 13-50-14" src="https://github.com/user-attachments/assets/47d4c0c2-af33-4cf7-a2e4-3e6221d66c1d" /> <details> <summary> #### Settings (removed) </summary> <img width="49%" alt="Screenshot from 2025-12-10 16-56-04" src="https://github.com/user-attachments/assets/2de14be8-3493-4bb8-9d73-8368b2364601" /> <img width="49%" alt="Screenshot from 2025-12-10 16-56-00" src="https://github.com/user-attachments/assets/446c4229-2860-4585-ae80-19fbbad9e182" /> <img width="49%" alt="Screenshot from 2025-12-10 16-55-57" src="https://github.com/user-attachments/assets/3b1bf543-6f2f-4d99-b760-df24b35d16e0" /> <img width="49%" alt="Screenshot from 2025-12-10 16-55-53" src="https://github.com/user-attachments/assets/62b2456f-e291-44de-a863-87f8e5ecdb1a" /> </details> <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Enable Inter OpenType features and apply tabular/disambiguated numerals to budget summary displays and form text for improved numeric readability. > > - **Typography** > - Update `styles.tnum` to enable `"tnum", "ss01", "ss02"` OpenType features. > - Apply `font-feature-settings: 'ss04'` to inputs/textareas in `packages/desktop-client/index.html`. > - **Budget UI** > - Apply `styles.tnum` to `ToBudgetAmount`, `BudgetTotal`, and `Saved` displays for aligned, clearer numbers. > - Simplify `BudgetTotal` by removing `CellValueText` wrapper; use `CellValue` directly. > - Ensure tooltip numeric values in `Saved` use `styles.tnum`. > - **Docs** > - Add release note `upcoming-release-notes/6360.md`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e69697f939a1d88faef6b8c4b2cfd48724bb9419. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-06-02 16:22:54 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#108730