calcom/sans-ui

これは何？

主な機能

• 01ウェイト、ジオメトリ（GEOM）、アセンダーの高さ、シャープさ、イタリックを調整できる可変軸。
• 02オプティカルサイズは10 ptのUI用デザインに固定。
• 03OpenType機能で利用できる20種類のスタイルセットと42種類の文字バリエーションを収録。
• 04CSSファイルとNext.js用ローカルフォントラッパーを含むnpmパッケージとして提供。
• 05InterやRobotoなど、一般的なUI書体に合う縦方向の比率。

ユースケース

• Webアプリやデザインシステムで、14～15pxの本文やUIテキストを設定する。
• ボタンや入力欄のサイズを変更せずに、プロダクトUIのInterやRobotoを置き換える。
• セルフホストの可変フォントを使うNext.js App Routerプロジェクトで利用する。
• フォント機能に対応したデザインツールで、デフォルト設定やOpenType機能を適用する。

クイックスタート

1. 1

   npmからパッケージをインストールします

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

   アプリにスタイルシートを読み込み、フォントファミリーを「Cal Sans Text UI」に設定します

使う前に知っておきたいこと

• !メタデータには検出されたライセンスが記載されていませんが、READMEにはSIL Open Font Licenseとあります。使用前にライセンスを確認してください。
• !14～15pxのインターフェーステキスト向けに最適化されているため、見出しや大きな表示サイズにはフル版のCal Sansフォントが適しています。
• !Next.jsで使用するには、peer dependencyとしてNext.js 13.2以降が必要です。

トピック

よくある質問

sans-ui とは？

高DPI画面の14～15pxのUIテキスト向けに設計された、Cal Sans v2のUI最適化可変フォント版。 Cal Sans Text UIは、Mark DavisがCal.com向けにデザインした書体Cal Sans v2のUI向けカットです。オプティカルサイズ軸は10 ptのUI用デザインに固定され、ウェイト、ジオメトリ（GEOM）、アセンダーの高さ、シャープさ、描き起こされた9.5°のイタリックは調整できます。14～15pxのテキストに合わせて調整されており、CSSファイルとNext.js用フォントラッパーを含むパッケージがnpmで配布されています。

sans-ui は無料で使えますか？ライセンスは？

sans-ui は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

sans-ui は今もメンテナンスされていますか？

活発にメンテナンス中。sans-ui の最終コミットは 2026年10月6日 です。

sans-ui は何に使えますか？

Webアプリやデザインシステムで、14～15pxの本文やUIテキストを設定する。 ボタンや入力欄のサイズを変更せずに、プロダクトUIのInterやRobotoを置き換える。 セルフホストの可変フォントを使うNext.js App Routerプロジェクトで利用する。 フォント機能に対応したデザインツールで、デフォルト設定やOpenType機能を適用する。

sans-ui のインストール方法は？

npmからパッケージをインストールします: npm i @calcom/cal-sans-ui アプリにスタイルシートを読み込み、フォントファミリーを「Cal Sans Text UI」に設定します

sans-ui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/calcom/sans-ui