스케치 텍스트의 모든 것
Sketch에서 텍스트 작업하다 보면 수치가 px 인지 pt 인지 알 수도 없고 뭔가 잘 모르고..이렇게 하는 게 맞는 건지? 궁금해하는 경우가 종종 있는 거 같습니다. 그래서 하나하나 까보았습니다.
bounding 박스가 하는 것은?
텍스트 레이어를 선택하면 주위에 회색 박스로 감싸져있고 양쪽에 크기를 조정하는 핸들이 있습니다. 그런데 크기가 왜 저 크기이고 서체는 픽셀에 고정되지 않는 걸까요? 문자열 주위에 있는 여백들은 왜 생기는 걸까요?
사용하고 있는 각 폰트 기반으로 수치 값이 바뀝니다. 각 폰트에 전역 폰트 메트릭이 포함되어 있는데 Sketch는 다음과 같은 폰트 메트릭을 사용하여 캔버스에서 텍스트 레이어 주위에 표시되는 bounding box 크기를 결정합니다.
- Cap Height: 베이스라인에서의 대문자 높이
- x-Height: 베이스라인에서의 소문자 높이 (특히 소문자 x)
- Ascender: b k, l, ß 같이 x 높이보다 위쪽으로 뻗은 문자의 윗부분
- Descender: 베이스라인 아래로 삐쳐 나온 부분을 지칭하며 g, j, p, q, y의 5 문자가 디센더를 가짐.
*서체마다 위 수치는 다름.
폰트 매트릭스이러한 메트릭스가 합쳐진걸 엠(em)이라고 부르는데 이러한 박스들이 뭔지 알지도 모르겠네요. 그들은 활자와 매우 비슷합니다. 이것은 문자로 새겨진 금속 블록을 사용하는 조판 기술입니다. 이 문자들을 서로 옆에 배치함으로써 종이에 인쇄할 수 있는 문장을 만듭니다.
스케치는 레이어의 선 높이를 기준으로 텍스트 레이어의 높이를 렌더링 합니다. 이 높이는 위에서 언급 한 메트릭(소스)을 기반으로 합니다.
Willi Heidelbach, GFDL, CC-BY-SA-3.0 or CC BY 2.5, via 위키피디아스케치에서 서브픽셀을(소수점) 어떻게 제어하나요?
Sketch로 텍스트 레이어의 높이를 렌더링 하는 방법을 이해했으니 이제는 자문해 보세요.
텍스트 레이어가 서브 픽셀에 배치되면 어떻게 될까요? 텍스트가 흐려지는 것을 방지하기 위해 스케치는 항상 텍스트의 기준선을 가장 가까운 둥근 y 포지션으로 스내핑 합니다. 아주 좋은 기능이죠.
라인 높이( line-height)와 소수 자릿수를 사용할 때도 마찬가지입니다.
스케치에서 베이스라인 픽셀 좌표에 맞게 스내핑 됩니다.
여백
전체 텍스트 레이어의 y 값 위치는 스케치에서 조정할 수 있는 많은 것들 중 하나인데 타이포그래피 애호가를 위해 텍스트 박스 안에서도 미세한 많은 조정을 할 수 있습니다.
문자 간격
문자 간격 (letter spacing이라고도 함)을 사용하여 각 문자 사이의 전체 가로 간격을 조정할 수 있습니다. 문자 간격은 픽셀 단위로 측정됩니다. Sketch에서 디폴트로 0.1px 단위로 증가/축소를 사용하지만 shift 를 누른 상태로 1px 단위로 증가/축소도 가능합니다.
*픽셀 단위로 렌더링 되어야 티가 나는데 0.1 단위로 해도 되는지는 의문이네요.
문자 간격을 조정할 때 알아야 할 중요한 게 있습니다: 커닝(kerning)을 사용할 수 없습니다. 커닝은 특정 문자 조합에 대한 문자 간격을 지정하는 폰트 파일에 포함된 정보입니다. 이것은 기본적으로 폰트 디자이너가 문자 사이에 시각적으로 '이상적인'거리를 만들기 위해 제안한 미묘한 조정인데 전체 폰트 디자인이 문자를 시각적(optically)으로 동일한 공간을 가진 것처럼 보이게 만듭니다.
폰트 디자이너가 폰트의 간격 문제를 개선하기 위해 수행 한 모든 노력을 했어도 문자 간격을 0으로 설정하면 커닝은 비활성화되어 있을 겁니다.
커닝을 활성화하려면 입력 필드에서 숫자를 제거하고 빈 입력 필드를 만드세요. 이렇게 하면 입력 필드의 값을 다시 auto로 설정하여 폰트 디자이너가 의도 한 자간을 사용하고 있는지 확인할 수 있습니다. 그러면 안 좋은 타이포그래피에서 그나마 나은 디자인을 할 수 있습니다.
또한 auto 대신 0을 사용하면 letter spacing: 0 의 라인이 추가되므로 스케치에서 CSS를 복사할 때 CSS가 복잡해집니다. CSS에서는 스케치와 같은 문제가 없지만 이미 스타일 시트에 설정 한 다른 문자 간격 설정과 충돌할 수 있습니다.
커닝이 이상하면 “T ext” 로 읽힐 수도 있다.큰 문자(large character) 간격을 조정할 때 염두해야 또 다른 사항은 합자(ligatures)를 따로 조정해 줘야 한다는 것입니다. 합자 (Ligature)는 일련의 문자를 대체하여 두 문자가 서로 뒤에 입력될 때 간격 문제를 해결하는 문자입니다. 일반적인 합자는 f와 i의 꼭대기가 교차하기 때문에 fi입니다. 기본 문자 간격을 변경하는 경우 텍스트 리듬을 유지하기 위해 합자를 사용하지 않는 것이 가장 좋습니다.
합자란:
1. 두 글자 또는 세 글자를 합하여 한 글자로 만드는 것. 현대 한글 활자꼴의 ‘ㅃ ’의 경우 세로줄기 하나가 생략되어 사용되는 경우가 있는데 이런 경우를 이음자라 한다. 로마글의 리가츄어(ligature).
2. 둘 이상의 글자를 합하여 하나로 주조한 활자를 말하며, 구문 활자에는 fi, ff, ffi, ffl, Æ, Œ 등의 로만, 이탤릭체의 2서체, 합계 18종에 스몰캡 Æ, Œ을 합하여 합계 20종이 있다. 홀소리를 합쳐 만든 합자는 중모음 활자라 하여 다른 활자와 구별하기도 한다. 한글의 경우 세로줄기 하나를 생략한 ‘ㅃ’자가 여기에 속한다.
문자 간격이 큰 합자(ligatures)를 사용하면 텍스트 리듬이 방해 받습니다.스케치에서 합자(ligatures)를 비활성화하는 방법:
1. 스케치 > View > Show Fonts
2. 톱니바퀴 아이콘 클릭 > Typography
3. 일반 합자 체크박스 언체크
라인 간격
라인 간격(line-spacing)은 각 문자 사이에 간격을 설정할 수 있을 뿐만 아니라 두 라인의 텍스트 사이에 간격을 조정할 수도 있습니다. Sketch에서 폰트로 설정된 기본 라인 간격을 사용하거나 사용자 지정 픽셀 값을 사용할 수 있습니다. 새로 생성된 텍스트 레이어의 기본 라인 높이는 폰트로 설정됩니다. 이 기본 라인 크기를 변경한 후에 사용하려면 라인 간격 입력 필드에서 숫자를 제거하고 작업해야 합니다. 이렇게 하면 맞춤 라인 간격을 (재)설정하고 폰트 크기 설정에 대한 올바른 라인 높이 픽셀 값이 라인 간격 입력 필드 안에 밝은 회색으로 표시됩니다.
베이스라인의 라인 높이를 조정하면 첫 번째 라인의 베이스라인은 같은 y 위치에 머물게 됩니다.
문단(paragraph) 간격
스케치에서는 줄 바꿈(다음 줄로 이동) 하는 방법이 두 가지인데 단락 나누기와 줄 바꿈이 있습니다.
return 를 누르면 새 다락이 시작합니다. (혹은 심볼 오버라이드에서 alt + return )
shift + return 키를 누르면 줄 바꿈 (또는 심볼 오버라이드에서 ctrl + return )이 됩니다.
단락 간격 필드에 입력하는 픽셀의 양이 새 단락을 추가한 행 사이에 추가됩니다.
다음 줄로 감싸는(wrap) 리스트 항목을 만드는 경우 매우 유용하게 사용할 수 있습니다.
줄바꿈(라인) vs. 패러그래프 브레이크(paragraph breaks).
*return랑 shift+return는 다릅니다.
마치며
타이포그래피의 경우와 마찬가지로 작은 변화는 큰 영향을 미치지 않지만 작은 변화를 모두 결합할 때는 큰 변화를 더합니다. 타이포그래피는 사람들이 자주 충분히 인지하지 못하는 부분이지만 뭐랄까 그건 그거대로 느껴지는 것인 거 같습니다.
출처:
https://journal.yummygum.com/get-down-to-the-nitty-gritty-of-text-rendering-in-sketch-cd49f0544e20
UI 디자인을 하다 보면 타이포그래피는 선택이 아닌 필수라 생각 드는군요.
참고로 스케치에서 폰트 사이즈 단위는 pt입니다.
이유는 간단합니다. DPI 해상도에 맞게 대응하기 위해서입니다.
px로 하면 단말기별로 폰트 크기가 다 달라지겠죠.
