▲

GN⁺: 고품질 글꼴에서 얻을 수 있는 이점

 (sinja.io)
9P by neo 2달전 | favorite | 댓글 4개
  • 폰트의 숨겨진 기능들 : 가변 축, 대체 글리프, 스타일 대체, 스와시, 숫자, 소문자 대문자(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 폰트의 가변 축과 대체 글리프 기능은 특히 유용함
  • 문맥 대체와 같은 기능은 개발자와 사용자 모두에게 편리함
▲
halfenif 2달전  [-]

폰트 기능을 올바르게 지원하는 것이 왜 이렇게 어려운지 의문임

인류 전체의 역사와 함께한 문제니.. 뭔가 해줄것이 얼마나 많겠습니까!

답변달기
▲
wedding 2달전  [-]

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

답변달기
▲
neo 2달전  [-]
Hacker News 의견
  • 숫자가 여러 줄에 걸쳐 정렬될 때 유용함
  • 시계나 카운트다운 같은 것에도 유용함
  • 화면에서 시간이 점프하는 것이 매우 짜증남
  • 폰트 파일을 조사하고 싶다면 Wakamai Fondue 사용 추천
  • 표 형식 숫자는 매우 유용한 기능임
  • Google Fonts는 파일 크기를 줄이기 위해 고급 OpenType 기능을 거의 제거함
    • 예: Google 버전의 Inter 폰트는 11개의 기능을 제공하지만, 전체 버전은 44개의 기능을 제공함
  • 페이지의 글꼴이 아름다움
  • 소문자 대문자(small caps) 사용이 멋짐, 더 많은 웹사이트에서 사용되길 바람
  • Berkeley Mono v2 출시 여부 확인, 아직 출시되지 않음
  • wght(무게) 축의 동작이 이상함, 400 이하로 슬라이드하면 텍스트가 얇아지면서 압축되지만, 400 이상으로 슬라이드하면 텍스트가 두꺼워지기만 함
  • VSCode에서 다른 폰트를 사용하여 주석, jsdocs, 기타 구문 강조 기능을 지원하려면 vscode-custom-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 추천
    • 인쇄 및 디지털 문서를 아름답게 만드는 실용적인 조언이 가득함
    • 그의 폰트 라이선스는 매우 관대함, 페이지 뷰 수에 대한 제한이 없음
    • 그의 폰트는 오픈 소스가 아니지만, 아름다움
    • Valkyrie와 Concourse 폰트를 구매했으며, Concourse는 문맥적 대안에 매우 유연함
답변달기