Leading-Trim: 디지털 타입 세팅의 미래
새로운 CSS 표준이 오래된 문제를 해결하고, 웹 앱의 기준을 높이는 방법
*조판(Typesetting) : 조판은 디지털 시스템에서 기호, 문자 및 상형 문자와 같은 개별 유형을 사용하여 텍스트를 배치하는 행위이다. 최적의 읽기 경험을 만들기 위해 단어를 배열하는 것이다. 문자만 가지고 조판이라고 부르기도 한다.
본론으로 들어가기에 앞서, 현재 Leading-Trim 속성은 상용화되어 있지 않다. 하지만 UI 디자인 툴에서 점차 채택되고 있으며, 폰트마다 가지고 있는 추가 공간이 다르기 때문에, 간격 시스템 도입 및 디자인을 할 때 불편한 상황(한정적인 폰트 사용, 컨테이너의 가운데에 위치하더라도 텍스트가 세로 중앙에 위치 않은 것처럼 보이는 현상 등,,)에 대한 해결책이 되어줄 것이기 때문에 미리 알아보려고 한다.
오늘날 텍스트 박스(text box)의 문제
표준 텍스트 박스에는 실제로 텍스트의 위아래에 항상 여분의 공간이 있다. 이 때문에 텍스트 박스를 사용하여 간격을 측정하고, 구현하면 의도한 것보다 더 높게 측정된다. 줄 높이(line height)가 높을수록 문제는 커진다.
아래 예는 32px로 설정된 텍스트 박스 사이의 거리를 보여준다. 보시다시피 모든 세로 간격을 동일한 값으로 설정하더라도 시각적으로 32px보다 훨씬 크다.
이것은 툴과 플랫폼에 걸쳐 발생하는 일반적인 문제이다. 지난 Medium 아티클에서 4px 기준 그리드를 사용하여 텍스트 주위의 간격을 측정하고, 시각적 정확도를 높이는 방법에 대해 이야기했다. 이 접근법의 결함을 알고, 더 나은 해결책을 찾기 위해 노력했으며, 지난 6월 Leading-trim이라는 새로운 CSS 속성을 발견했다. Microsoft Design에 포함될 수 있도록, W3C CSS Working Group의 전문가인 spec 저자와 함께 작업했다.
이 아티클에서는 이 새로운 CSS 표준, leading-trim이 웹 디자이너와 개발자에게 의미하는 바는 무엇인지 소개하려고 한다.
우리가 여기까지 온 방법 : 역사 수업
이것이 웹에서 어떤 문제로 자리 잡았는지 이해하려면, 타이포그래피의 역사로 돌아가야 한다. 약 140년 전만 해도 개별 리드 박스(lead boxes)를 사용하여 수동으로 설정해야만 했다. 텍스트를 더 읽기 쉽게 만들기 위해 조판기(typesetters)의 공백 줄에, 납 조각을 넣어 구분하였다. (여기서 "leading"이라는 단어가 유래되었다.) 타입 블록의 높이와 행간(leading)을 더하면 전체 줄 높이(line height)가 된다.
80년대 초기 그래픽 디자인 소프트웨어는 사람들이 줄 사이 간격을 제어하기 위해 밑단을 직접 추가해야 했고, 결과적으로 줄 높이(line height)가 증가하는 전통을 유지했다. 다른 소프트웨어는 사람들이 직접 줄 높이(line height)를 조정할 수 있는 양방향 거리로 만들었다. 하지만 이면에는 항상 맨 아래 행간(leading)이 변화하고 있었다.
1996년 CSS1이 첫 선을 보이면서, 웹의 발명 이후 상황이 달라졌다. CSS1을 만든 사람들은 행간(leading)을 반으로 나누어 각 행의 위아래에 배치하기로 결정했다. 그들은 그것을 "하프 리딩(half-leading)"이라고 불렀다. 이유는 간단했다. 텍스트 박스를 균등하게 보이게 하기 위함이었다.
이미지 설명 : 행간(leading)은 CSS1부터 반으로 나누어 각 행의 위아래에 배치했다. 위의 브라우저 창은 Internet Explorer 3.0이다. IE3는 CSS를 지원하는 최초의 상용 브라우저였다. 사용된 폰트는 1996년에 Microsoft에서 발표한 웹 프로젝트 용 Core Fonts와 함께 출시된 Verdana이다.
하프 리딩(half-leading)은 고르지 않은 *바운딩 박스(bounding box)의 문제를 해결했지만, 또 다른 문제가 발생했다. 폰트 패밀리(font family)의 각 폰트 사이즈는 기본 줄 높이가 있다. 기본 줄 높이(line height)는 일반적으로 특정 문자와 악센트 기호를 수용하기 위해 실제 텍스트보다 높게 설계되었다. 만약 줄 높이(line height)를 높이면 하프 리딩(half-leading)이 추가되어 텍스트 박스가 자동적으로 커지게 된다. 기본 줄 높이(line height)에 따라오는 추가 공간과 하프 리딩(half-leading)은 오늘날 텍스트 박스에 대한 불만의 근원이다.
일반적인 텍스트 박스의 구조
bounding box = 테두리 상자차선책은 차선책일 뿐
Figma 및 Sketch와 같은 널리 사용되는 UI 디자인 툴 중 일부는, 하프 리딩(half-leading) 모델을 채택하였고, 이러한 방식으로 텍스트를 렌더링 한 것으로 보인다. 따라서 디자인 툴과 브라우저 모두에서 이 문제를 다룰 것이다.
디자인 측면의 문제 해결은 비교적 간단하다. 바운딩 박스(bounding box)를 배제하고, 텍스트의 *캡 높이(Cap height) 및 기준선(baseline)에 대한 공간을 직접 측정하면 된다. 대부분의 디자인 툴에는 캡 높이(Cap height)와 기준선(baseline)에 대한 스냅 타깃(딱 하고 부러지는 접점)이 없기 때문에 수동 프로세스이지만, 디자이너가 디자인을 더 보기 좋게 할 수 있다면, 그렇게 할 것이다.
하지만 이 접근 방식을 취한다면, 개발자는 여전히 CSS의 바운딩 박스(bounding box) 간격만 구현할 것이다. 따라서, 겉보기에는 임의의 간격 값을 얻게 된다.
이 임의성 문제를 완화하기 위해, 개발자는 CSS에서 여백이 음수인(negative margins) 텍스트 박스를 "자르기(crop)" 할 수 있다. 그러나 *음수 여백(negative margins)은 수동으로 설정해야 하며, 폰트에 따라 다르므로, "임의"이다. 폰트, 브라우저, 운영 체제, 로캘(locale) 변경은 신중하게 설정한 여백을 잃게 될 수도 있다. 게다가 이 기술은 일반적으로 좋은 코딩 방법이 아니며 의도하지 않은 부작용을 일으킬 수 있다.
*음수 여백(negative margins) : 여백에 음수 값을 주는 것이다.
· Cap Height : 베이스라인 위의 대문자 높이
· X-Height : 베이스라인과 소문자의 평균 맞춤선이 되는 가상선 사이의 거리
소문자 x뿐만 아니라 v, w, z의 높이로 맞춰져 있다.
다만 a, c, e, m, n, o, r, s, u와 같은 곡선이 들어간 소문자는 X 높이를 약간 넘는 경향이 있다. 글꼴의 가장 중요한 치수 중 하나 인 X 높이는 소문자를 대문자와 비교하는 방법을 정의하는 데 사용되기도 한다.
· Ascender : 소문자 중에서 X 높이를 초과하는 부분
· Descender : 'g', 'j', 'q', 'p', 'y' 등이 대표적으로 베이스라인 밑으로 나와 있는 부분
leading-trim 소개
Leading-trim은 우리가 24년 동안 사용해 온 표준을 바꿀 것이다.
Leading-trim은 CSS Working Group에서 도입한 새로운 CSS 속성이다. 이름에서 알 수 있듯이 가위처럼 작동한다. CSS로 두 줄로 선택한 참조 지점을 기준으로 모든 추가 공간을 잘라낼 수 있다.
위의 예는 먼저 text-edge(신규 CSS 속성)를 사용하여, 브라우저에 원하는 캡 높이(Cap height) 및 알파뱃 기준선(baseline)을 알린다. 그런 다음, Leading-trim을 사용하여 양쪽에서 잘라낸다(trim). leading-trim은 텍스트 박스에만 영향을 미치며, 텍스트 박스 안의 텍스트는 자르지 않는다.
이 두 줄의 간단한 CSS는 텍스트를 감싸는 깨끗한 텍스트 박스를 만들어낼 것이다. 이렇게 하면 더 정확한 간격을 확보하고, 더 나은 시각적 계층 구조를 만드는데 도움이 된다.
Leading-trim은 정렬 문제를 해결한다.
Leading-trim을 사용하면, 사이트에서 볼 수 있는 모든 정렬 문제를 해결할 수 있다. 예를 들어 텍스트 박스가 컨테이너의 가운데에 위치하더라도 텍스트가 세로 중앙에 위치 않은 것처럼 보일 수 있다.
기본 줄 높이에 텍스트가 가지고 있는 추가 공간으로 인해 텍스트가 항상 텍스트 박스 중앙에 배치되지 않는다. Leading-trim를 사용하면, 텍스트를 세로 중앙 정렬로 맞출 수 있다.
폰트마다 다르게 디자인되고 있으며, 텍스트가 가지고 있는 자체 기본 줄 높이와 함께 줄 안에 있는 텍스트의 크기와 기준선(baseline) 위치가 다를 수 있다. 따라서, 폰트 사이즈, 줄 높이(line height) 및 텍스트 상자 위치가 동일하게 유지되더라도, 아래 예제와 같이 폰트를 변경하면 텍스트 정렬이 변경될 수 있다.
아래 예제에서는 Leading-trim이 이를 방지하고, 텍스트를 형식에 맞게 유지하는 방법을 볼 수 있다.
기타 즉각적인 영향 : 일관성 및 워크플로우(workflow) 개선
Leading-trim은 간격과 정렬을 보다 정확하게 만든다. 이는 정확한 간격 시스템을 가능하게 하는데 핵심적인 역할을 하며, 디자인의 정확도와 일관성을 보장하고, 효율적인 디자인과 개발을 위한 기반을 마련할 것이다.
현재 코드에서 색상표 또는 유형 램프를 설정하는 방법과 마찬가지로, CSS 클래스를 사용하여 간격 값을 나타낼 수 있다. (간격 시스템에 대한 자세한 내용은 Nathan Curtis's Space in Design System.)
간격 시스템이 있으면 많은 이점이 있다. 디자이너는 간격을 더 빠르게 결정할 수 있으며, 개발자는 코드에서 하드 코딩된 임의의 값을 제거하기 위해 해당 간격 변수를 설정할 수 있다. 그러나 오늘날에는 간격 시스템을 설정해도 텍스트 박스의 추가 공간 때문에 텍스트 요소가 정확하지 않다. 디자인의 바운딩 박스(bounding box)를 배제하고, 코드로 텍스트 박스를 “자르기(crop)”만 한다면, 문제가 발생할 것이다.
leading-trim 없이 텍스트 요소에 적용된 간격 시스템leading-trim을 통해 디자이너는 간격 시스템의 힘을 극대화시킬 수 있다. 디자인 단계에서부터 *optical spacing 측정(타입의 캡 높이 및 기준선(baseline)에 대한 측정) 후 간격 시스템을 적용할 수 있다. 정확한 간격 외에도 시각적 계층 구조를 개선하고, 레이아웃에 대한 자신감을 높이는데 도움이 된다. 종합적으로 디자인의 일관성을 개선할 수 있다.
개발자가 똑같은 시스템을 설정하고, 레이아웃 버그에 많은 시간을 할애하지 않아도 되기 때문에 디자인에서 개발로의 이동이 원활해질 것이다. 가장 중요한 것은 leading-trim이 적용된 간격 시스템은 사용자가 신뢰하고, 시각적으로 세련된 제품을 제공하는데 도움이 될 것이다.
*optical spacing : 타이포그래피에서 조판 문자의 "모양"으로, 다양한 문자 모양의 근접으로 인해 착시 현상으로 정확하지 않을 수 있다.
*Optical Volume : 타이포그래피에서 항상 정략적으로 측정할 수 없는 글자 사이의 간격이 결합된 모양. 서로 다른 문자 조합은 그들 사이에 다소 차이나는 공간이 있는 듯한 착각을 일으켜 '커닝'이 필요하다.
예를 들어 "O" "V" "I" 사이의 공간이 양적으로 같더라도 다르게 보일 수 있다.
*커닝(kerning): 글자의 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽게 보이게 하는 것을 말한다.
작은 변화, 큰 의미
leading-trim이 디지털 타입 세팅(digital typesetting)의 새로운 장을 열어 *OpenType을 시작으로 다른 표준 및 플랫폼의 개선을 촉진시킬 수 있길 바란다.
leading-trim은 브라우저가 폰트 *메트릭에 액세스 하여 캡 높이(Cap height) 및 기준선을 찾는 방식으로 작동한다. 표준 폰트 형식으로 OpenType은 폰트 파일에 포함할 메트릭을 지정한다. OpenType은 1997년부터 Apple의 TrueType 글꼴 형식의 확장으로 Microsoft와 Adobe가 공동으로 개발했다. 오늘날 OpenType은 라틴어와 CJK 언어에 대한 지원을 받고 있지만, 히브리어나 태국어와 같이 자주 사용되지 않는 다른 쓰기 시스템에 대한 핵심 지표(key metrics)는 아직 부족하다. 사람들이 leading-trim을 채택함에 따라, OpenType에 다른 쓰기 시스템의 폰트 메트릭을 추가할 수 있기를 바란다.
궁극적으로, leading-trim이 전 세계에 걸쳐 동등한 typographical 기능의 중심이 됨으로써 OpenType과 그것의 국제화를 증진시키는데 도움이 되기를 바란다. 만약 모든 최신 브라우저에서 leading-trim을 사용할 수 있게 된다면, Figma, Teams 및 VS Code와 같은 웹 기술을 사용하여 구축된 데스크톱 응용 프로그램에서도 이를 활용할 수 있다.
그 영향은 웹을 넘어설 수도 있다. Sketch는 캡 높이(Cap height) 및 기준선에 대한 스냅 대상을 이미 추가했다. Option 키를 누른 상태에서 바운딩 박스(bounding box) 대 바운딩 박스(bounding box) 간격을 표시하는 대신 Control + Option 키를 누르고 있으면 기준선에서 캡 높이(Cap height) 간격까지 볼 수 있다. optical spacing을 훨씬 쉽게 측정할 수 있다. 더 중요한 것은 이것은 사람들이 디지털 타입 세팅(digital typesetting)에 대한 접근 방식이 서서히 변화하고 있다는 것을 보여준다. 우리는 Leading-trim이 이러한 변화를 더욱 장려할 수 있기를 바란다. 또한 이러한 사고방식의 변화를 통해 단순히 대상을 스냅 하는 것 이상으로, Leading-trim은 디자인 툴의 새로운 텍스트 렌더링 표준이 되고 운영 체제로 확장될 수 있기를 바란다.
*오픈 타입(OpenType) : 컴퓨터 글꼴을 위한 크기를 조절할 수 있는 포맷을 말한다. 오픈 타입 글꼴의 파일 확장자는. otf이다.
*메트릭(Metrics) : 폰트를 만들 때 사용한 디자인 도면의 크기, 도면 내에서 글자의 영역, 밑줄 위치 등의 정보들이 저장되어 있다. 또 개별 글리프(글자의 모양)의 크기 정보들도 저장되어 있는데 높이는 얼마이며 다음 글자는 어디쯤에 놓아야 하는지, 여백은 얼마나 되는지 등의 정보들이 들어 있다.
본문 번역
Ethan Wang, 'Leading-Trim: The Future of Digital Typesetting', Medium, Aug 19, 2020
단어 참고
Dave Cramer, Inline Box Edge Metrics: the text-edge property, W3C Working Draft, 27 August 2020
Dylan Todd, Explore the art and science of typesetting, adobe
Optical Spacing, ANGELIKA DESIGN, February 8, 2015
gold_dragon, Negative margin (음수 마진), tistory, July 17, 2020
