calcom/sans-ui

어떤 프로젝트인가요?

핵심 기능

• 01굵기, 형태(GEOM), 어센더 높이, 선명도와 이탤릭을 조절하는 가변 축을 제공합니다.
• 02광학 크기는 10 pt 인터페이스용 도안으로 고정되어 있습니다.
• 03OpenType 기능을 통해 20개의 스타일 세트와 42개의 문자 변형을 제공합니다.
• 04CSS 파일과 Next.js 로컬 폰트 래퍼를 포함한 npm 패키지로 제공됩니다.
• 05Inter, Roboto 같은 일반적인 UI 서체에 맞춘 수직 비율로 설계되었습니다.

활용 사례

• 웹 앱이나 디자인 시스템에서 14–15px 본문 및 UI 텍스트를 설정할 때.
• 버튼과 입력창 크기를 조정하지 않고 제품 UI에서 Inter나 Roboto를 대체할 때.
• 셀프 호스팅 가변 폰트를 사용하는 Next.js App Router 프로젝트에서.
• 폰트 기능을 지원하는 디자인 도구에서 사용자 지정 기본값과 OpenType 기능을 적용할 때.

빠른 시작

1. 1

   npm에서 패키지를 설치합니다

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

   앱에서 stylesheet를 가져오고 글꼴 패밀리를 "Cal Sans Text UI"로 설정합니다

사용 전 알아둘 점

• !메타데이터에는 감지된 라이선스가 없다고 표시되지만 README에는 SIL Open Font License라고 나와 있으므로 사용 전에 라이선스를 확인하세요.
• !14~15px 인터페이스 텍스트에 최적화되어 있으므로 제목이나 큰 디스플레이 크기에는 전체 Cal Sans 글꼴이 더 적합합니다.
• !Next.js에서 사용하려면 peer dependency로 Next.js 13.2 이상이 필요합니다.

토픽

자주 묻는 질문

sans-ui은(는) 무엇인가요?

고해상도 화면의 14–15px 인터페이스 텍스트에 맞게 설계된 Cal Sans v2의 UI 최적화 가변 폰트입니다. Cal Sans Text UI는 Mark Davis가 Cal.com을 위해 디자인한 Cal Sans v2 서체의 인터페이스용 버전입니다. 광학 크기 축은 10 pt 인터페이스용 도안으로 고정되어 있으며, 굵기, 형태(GEOM), 어센더 높이, 선명도와 직접 그린 9.5° 이탤릭은 조정할 수 있습니다. 14–15px 텍스트에 맞춰 튜닝되었으며, CSS 파일과 Next.js 폰트 래퍼를 포함한 패키지를 npm에서 배포합니다.

sans-ui은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

sans-ui은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

sans-ui은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. sans-ui의 마지막 커밋은 2026년 10월 6일입니다.

sans-ui은(는) 어디에 사용할 수 있나요?

웹 앱이나 디자인 시스템에서 14–15px 본문 및 UI 텍스트를 설정할 때. 버튼과 입력창 크기를 조정하지 않고 제품 UI에서 Inter나 Roboto를 대체할 때. 셀프 호스팅 가변 폰트를 사용하는 Next.js App Router 프로젝트에서. 폰트 기능을 지원하는 디자인 도구에서 사용자 지정 기본값과 OpenType 기능을 적용할 때.

sans-ui는 어떻게 설치하나요?

npm에서 패키지를 설치합니다: npm i @calcom/cal-sans-ui 앱에서 stylesheet를 가져오고 글꼴 패밀리를 "Cal Sans Text UI"로 설정합니다

sans-ui은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/calcom/sans-ui