Repolode
Submit
calcom

calcom/sans-ui

A UI-optimized variable typeface cut of Cal Sans v2, designed for 14–15px interface text on high-DPI screens.

Open-source alternative to:InterRobotoSF Pro

View on GitHubWebsite
Stars
174
Forks
8
Open issues
1
Last commit
16 days ago

What is it?

Cal Sans Text UI is the interface cut of the Cal Sans v2 typeface, designed by Mark Davis for Cal.com. The optical size axis is pinned at the 10 pt interface drawing, while weight, geometry (GEOM), ascender height, sharpness and a drawn 9.5° italic remain adjustable. It is tuned for 14–15px text, and the package is distributed on npm with CSS files and a Next.js font wrapper.

The family ships with all 20 stylistic sets and 42 character variants, toggled through OpenType features. The GEOM axis moves the design from an accessibility-oriented A11y end to a more geometric Geo end, with the default set to the UI drawing at 25. Static faces with per-weight italics are also included for environments that do not support variable fonts.

The typeface is released under the SIL Open Font License 1.1. Its vertical metrics are drawn to match common UI fonts such as Inter, Roboto and Segoe UI, so swapping it in usually does not require resizing components.

Key features

  • 01Variable axes for weight, geometry (GEOM), ascender height, sharpness and italic.
  • 02Optical size is fixed at the 10 pt interface drawing.
  • 03Includes 20 stylistic sets and 42 character variants via OpenType features.
  • 04Ships as an npm package with CSS files and a Next.js local font wrapper.
  • 05Vertical proportions are drawn to match common UI typefaces such as Inter and Roboto.

Use cases

  • Setting body and UI text in a web app or design system at 14–15px.
  • Replacing Inter or Roboto in a product UI without resizing buttons and inputs.
  • Using a Next.js App Router project with a self-hosted variable font.
  • Applying custom defaults and OpenType features in design tools that support font features.

Quick start

  1. 1

    Install the package from npm

    npm i @calcom/cal-sans-ui
  2. 2

    Import the stylesheet in your app and set the font family to "Cal Sans Text UI"

Things to know

  • The metadata reports no detected license, though the README says SIL Open Font License, so check the license before use.
  • It is optimized for 14–15px interface text, so headlines and display sizes are better served by the full Cal Sans font.
  • Next.js use requires peer dependency Next.js 13.2 or later.

Topics

#typeface#font#variable-font#ui-design#css#typography#opentype#cal-sans#design#typeface-design

FAQ

What is sans-ui?
A UI-optimized variable typeface cut of Cal Sans v2, designed for 14–15px interface text on high-DPI screens. Cal Sans Text UI is the interface cut of the Cal Sans v2 typeface, designed by Mark Davis for Cal.com. The optical size axis is pinned at the 10 pt interface drawing, while weight, geometry (GEOM), ascender height, sharpness and a drawn 9.5° italic remain adjustable. It is tuned for 14–15px text, and the package is distributed on npm with CSS files and a Next.js font wrapper.
Is sans-ui free to use? What license does it have?
sans-ui is open source under the Other license. Check the license terms before using it in commercial products.
Is sans-ui still maintained?
Actively maintained. The last commit to sans-ui was on Oct 6, 2026.
What can I use sans-ui for?
Setting body and UI text in a web app or design system at 14–15px. Replacing Inter or Roboto in a product UI without resizing buttons and inputs. Using a Next.js App Router project with a self-hosted variable font. Applying custom defaults and OpenType features in design tools that support font features.
How do I install sans-ui?
Install the package from npm: npm i @calcom/cal-sans-ui Import the stylesheet in your app and set the font family to "Cal Sans Text UI"
Where can I get sans-ui?
The source code and installation instructions are on GitHub: https://github.com/calcom/sans-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects