Fonts

개요

@seed-design/css는 권장 폰트 스택을 --seed-font-family 변수로 제공합니다. 어떤 글꼴을 권장하는지와 그 이유는 Typography에서 다룹니다.

--seed-font-family:
  -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
  "Pretendard Variable", Pretendard, "Segoe UI", Roboto, "Helvetica Neue",
  Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol", "Noto Color Emoji";

SEED는 이 값을 어디에도 자동으로 적용하지 않으므로, 적용할 지점은 직접 선택해야 합니다. base.css나 all.css를 불러온 뒤 다음과 같이 참조합니다.

body {
  font-family: var(--seed-font-family);
}

html이 아니라 body에 선언하기

번들러 플러그인의 fontScaling 옵션을 켜면, SEED가 iOS에서 다음 규칙을 적용합니다.

@supports (font: -apple-system-body) {
  html[data-seed-platform="ios"][data-seed-font-scaling="enabled"] {
    font: -apple-system-body;
  }
}

이때 font가 shorthand로서 font-family까지 함께 설정하므로, fontScaling을 사용한 환경에서는 html에 직접 선언한 font-family가 이 규칙에 덮여 무시될 수 있습니다.

• base.css를 사용하는 경우, font-family를 body에 선언해야 합니다.
• base.layered.css(Cascade Layers)를 사용하는 경우, font-family를 body에 선언하는 것을 권장합니다. html에 선언해야 한다면, 레이어 밖(unlayered)에 두거나 seed-base 이후 레이어에 선언하세요.

Windows에서 Pretendard 보여주기

Windows에서 맑은 고딕 대신 Pretendard를 보여주려면 제품이 --seed-font-family를 사용하는 동시에 Pretendard 웹폰트를 직접 로드해야 합니다. --seed-font-family는 권장 이름을 나열할 뿐 폰트를 내려받지 않습니다.

일반적으로 여러 글꼴 두께를 사용하므로 가변 다이나믹 서브셋을 권장합니다. 자세한 내용은 Pretendard 프로젝트를 참고하세요.