# 고품질 글꼴에서 얻을 수 있는 이점

> Clean Markdown view of GeekNews topic #16709. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16709](https://news.hada.io/topic?id=16709)
- GeekNews Markdown: [https://news.hada.io/topic/16709.md](https://news.hada.io/topic/16709.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-09-11T20:34:27+09:00
- Updated: 2024-09-11T20:34:27+09:00
- Original source: [sinja.io](https://sinja.io/blog/get-maximum-out-of-your-font)
- Points: 9
- Comments: 4

## Summary

고품질 폰트는 가변 축, 대체 글리프, 스타일 대체 등 다양한 기능을 제공하여 타이포그래피의 품질을 크게 향상시킬 수 있습니다. OpenType 폰트의 가변 축과 대체 글리프 기능은 특히 유용하며, CSS 속성을 통해 쉽게 조작할 수 있습니다. 문맥 대체와 같은 기능은 개발자와 사용자 모두에게 편리함을 제공합니다.

## Topic Body

- 폰트의 숨겨진 기능들 : 가변 축, 대체 글리프, 스타일 대체, 스와시, 숫자, 소문자 대문자(Small Caps), 문맥 대체  
  
### 가변 축  
- OpenType 폰트는 하나 이상의 축을 가질 수 있으며, 축 값을 변경하여 폰트의 외관을 변경할 수 있음  
- 가장 일반적인 축은 `wght`로 폰트의 굵기를 조절함  
- 다른 일반적인 축으로는 `wdth`(너비), `slnt`(기울기), `ital`(이탤릭), `opsz`(광학 크기)가 있음  
- CSS 속성을 사용하여 축을 조작할 수 있음  
- `font-variation-settings` 속성은 상속 문제를 일으킬 수 있으므로, 가능한 경우 특정 CSS 속성을 사용하는 것이 좋음  
  
### 대체 글리프  
- 폰트는 특정 문자에 대한 대체 글리프를 포함할 수 있음  
- 대체 글리프는 숫자, 스와시, 합자 등 다양한 스타일을 포함함  
  
### 스타일 대체  
- 스타일 대체는 특정 문자의 대체 형태를 활성화하는 기능임  
- `salt`는 모든 문자의 스타일 대체를 활성화함  
- `ss01`, `ss02` 등 스타일 세트는 특정 문자 집합을 대체함  
- `cv01`, `cv02` 등 문자 변형은 단일 문자를 대체함  
- CSS 속성 `font-feature-settings`와 `font-variant-alternates`를 사용하여 대체 글리프를 활성화할 수 있음  
  
### 스와시  
- 일부 글꼴에는 제목에 약간의 개성을 더하는 데 사용할 수 있는 스와시가 포함  
- 스와시는 제목에 개성을 더할 수 있는 장식적인 요소임  
- `font-feature-settings`와 `font-variant-alternates`를 사용하여 스와시를 활성화할 수 있음  
  
### 숫자  
- 폰트는 다양한 숫자 글리프 세트를 포함할 수 있음  
- 숫자는 라이닝 또는 올드 스타일, 탭형 또는 비례형으로 나뉨  
- 탭형 숫자는 동일한 너비를 가지며, 비례형 숫자는 너비가 다름  
- 라이닝 숫자는 대문자와 같은 높이를 가지며, 올드 스타일 숫자는 소문자와 같은 높이를 가짐  
- `font-variant-numeric` 속성을 사용하여 원하는 숫자 스타일을 설정할 수 있음  
  
### 소문자 대문자  
- 소문자 대문자는 소문자를 대체하는 대문자 변형임  
- `font-variant-caps` 속성을 사용하여 소문자 대문자를 활성화할 수 있음  
- 폰트에 소문자 대문자가 없으면 브라우저가 이를 합성할 수 있음  
  
### 문맥 대체  
- 문맥 대체는 주변 문자에 따라 글리프를 자동으로 대체하는 기능임  
- 예를 들어, `->`를 화살표로 대체하거나, 대문자 사이에 있을때 `@`의 위치를 조정할 수 있음  
- 문맥 대체는 기본적으로 활성화되어 있으며, `font-variant-ligatures` 속성을 사용하여 비활성화할 수 있음  
  
### GN⁺의 정리  
- 고품질 폰트는 다양한 기능을 제공하며, 이를 활용하면 타이포그래피의 품질을 크게 향상시킬 수 있음  
- OpenType 폰트의 가변 축과 대체 글리프 기능은 특히 유용함  
- 문맥 대체와 같은 기능은 개발자와 사용자 모두에게 편리함

## Comments



### Comment 28876

- Author: halfenif
- Created: 2024-09-13T06:45:49+09:00
- Points: 1

폰트 기능을 올바르게 지원하는 것이 왜 이렇게 어려운지 의문임  
> 인류 전체의 역사와 함께한 문제니.. 뭔가 해줄것이 얼마나 많겠습니까!

### Comment 28864

- Author: seunggi
- Created: 2024-09-12T14:28:03+09:00
- Points: 1

폰트 렌더링은 어렵다  
  
https://faultlore.com/blah/text-hates-you/

### Comment 28848

- Author: wedding
- Created: 2024-09-12T10:12:56+09:00
- Points: 1

ligature는 도통 적응이 안되더라구요..

### Comment 28832

- Author: neo
- Created: 2024-09-11T20:34:28+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41502721) 
- 숫자가 여러 줄에 걸쳐 정렬될 때 유용함
- 시계나 카운트다운 같은 것에도 유용함
- 화면에서 시간이 점프하는 것이 매우 짜증남
- 폰트 파일을 조사하고 싶다면 [Wakamai Fondue](https://wakamaifondue.com) 사용 추천
- 표 형식 숫자는 매우 유용한 기능임
- Google Fonts는 파일 크기를 줄이기 위해 고급 OpenType 기능을 거의 제거함
  - 예: Google 버전의 Inter 폰트는 11개의 기능을 제공하지만, 전체 버전은 44개의 기능을 제공함
- 페이지의 글꼴이 아름다움
- 소문자 대문자(small caps) 사용이 멋짐, 더 많은 웹사이트에서 사용되길 바람
- Berkeley Mono v2 출시 여부 확인, 아직 출시되지 않음
- wght(무게) 축의 동작이 이상함, 400 이하로 슬라이드하면 텍스트가 얇아지면서 압축되지만, 400 이상으로 슬라이드하면 텍스트가 두꺼워지기만 함
- VSCode에서 다른 폰트를 사용하여 주석, jsdocs, 기타 구문 강조 기능을 지원하려면 vscode-custom-css 확장 사용 필요
  - 예: 
    ```css
    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    ```
  - VSCode의 폰트 처리 기능이 버그가 많아 실험이 많이 필요함
- 폰트 기능을 올바르게 지원하는 것이 왜 이렇게 어려운지 의문임
- 타이포그래피에 관심이 있다면 [Butterick's Practical Typography](https://practicaltypography.com) 추천
  - 인쇄 및 디지털 문서를 아름답게 만드는 실용적인 조언이 가득함
  - 그의 폰트 라이선스는 매우 관대함, 페이지 뷰 수에 대한 제한이 없음
  - 그의 폰트는 오픈 소스가 아니지만, 아름다움
  - Valkyrie와 Concourse 폰트를 구매했으며, Concourse는 문맥적 대안에 매우 유연함