Typst Brand YAML

개요

Brand YAML은 다양한 포맷과 애플리케이션에서 색상, 글꼴, 타이포그래피를 일관되게 유지하도록 도와줍니다.

이 문서는 Quarto용 Typst Brand YAML 구현 세부 사항과 문제 해결 방법을 정리했습니다.

Brand YAML 속성은 대부분 CSS 규칙을 따르므로, 이 기능은 Typst CSS에 기반합니다.

색상

Brand YAML 팔레트 및 테마 색상은 Typst의 brand-color에서 사용할 수 있습니다(예: brand-color.lime, brand-color.primary).

배경색으로 쓰기 좋은 밝은 버전은 brand-background-color(예: brand-background-color.success)에 제공됩니다.

타이포그래피

Brand YAML은 아래 요소와 속성 조합을 지원하며, NA는 현재 지원되지 않는 조합입니다.

base headings title1 subtitle monospace-inline monospace-block link
family NA
size NA NA NA NA
weight
style NA NA NA NA
color
background-color NA NA NA NA
decoration NA NA NA NA NA NA
line-height NA NA

Quarto Typst/HTML 구현은 (revealjs의 size 제외) 모든 조합을 지원합니다.

Typst에서는 NA로 표시된 조합의 상당수를 구현할 수 있지만, 1bd7a48 커밋에서 명세 호환성을 위해 제거했습니다. 필요하다면 Typst raw 블록이나 include-in-header를 통해 직접 구현할 수 있으며, 자세한 내용은 해당 커밋을 참고하세요.

Typst에서 글꼴을 찾지 못하는 경우

Typst가 요청한 글꼴을 찾지 못하면 기본 글꼴로 대체합니다. Quarto 1.7에 포함된 Typst 0.13의 기본 글꼴은 Libertinus Serif입니다.

이때 Typst는 unknown font family 경고를 표시합니다.

Typst가 대체 글꼴을 사용하지 않도록 하려면 문서에 다음을 추가하세요.

#set text(fallback: false)

이 설정을 사용하면 찾지 못한 글꼴을 표시하지 않습니다.

Typst Brand YAML은 필요한 글꼴을 Google Fonts에서 자동으로 다운로드하고 .quarto/typst-font-cache에 캐시합니다.

이후 Typst에 해당 폰트 디렉터리를 알려 시스템 글꼴과 함께 사용하도록 합니다.

드물게 글꼴 이름이 애매해 Typst가 글꼴을 찾지 못하는 경우가 있습니다. Typst에서 글꼴을 인식하는지 확인하려면 다음 명령을 실행하세요.

quarto typst fonts --ignore-system-fonts --font-path .quarto/typst-font-cache/

이 명령은 Quarto가 다운로드한 글꼴만 표시합니다. (--variants 옵션을 추가하면 더 자세한 정보를 확인할 수 있습니다.)

글꼴이 목록에 있지만 여전히 적용되지 않는다면 이름 변형을 확인하세요. 예를 들어 Google Fonts에서 Sono를 다운로드할 수 있지만, Typst는 Sono Extralight Monospace 같은 전체 이름이 필요할 수 있습니다.

“Big number” 버그

테이블 출력에서 숫자가 주변 텍스트보다 크게 보이는 이슈 #11683을 만났다면, 테이블 패키지가 요청한 텍스트 글꼴을 찾지 못해 Typst가 이모지 글꼴로 대체했기 때문입니다.

해결하려면 테이블 패키지에 Typst가 사용할 수 있는 글꼴을 명시하세요. 향후 Quarto에서 system-ui, sans-serif 같은 “font stack”을 Typst CSS에 구현해 문제를 해결할 수 있지만, 현재는 그대로 전달되어 Typst가 인식하지 못합니다.

타이포그래피 테스트 범위

아래 표는 기능/요소 조합에 대해 고유 테스트를 포함한 Kitchen Sink 테스트 파일을 나타냅니다.

고유하지 않은 경우에는 처음 등장하는 파일의 인덱스를 표기했습니다.

base headings title subtitle monospace-inline monospace-block link
family 1 1 1 1 1 1 R
size 1 NA NA NA 1 1 R
weight 1 1 1 1 1 2 2
style R 1 1 1 R R R
color 1 1 1 1 1 1 1
background-color R R R R 1 1 1
decoration R R R R R R 1
line-height 1 1 1 1 NA 1 NA

Footnotes

  1. 제목과 부제목은 헤딩과 비슷하게 스타일링되지만 별도 구현으로 처리됩니다.↩︎