맨위로가기

커닝

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

커닝은 활자 사이의 간격을 조정하여 텍스트의 시각적 균형과 가독성을 향상시키는 기술이다. 활판 인쇄 시대에는 활자의 돌출된 부분을 활용하여 글자 간 간격을 조절했으며, 디지털 시대에는 글꼴 파일에 정의된 커닝 값을 사용하거나 알고리즘을 통해 자동 조절하는 방식으로 발전했다. 커닝은 자동, 수동, 문맥 커닝 등 다양한 형태로 존재하며, 웹 브라우저, 워드 프로세서, 디자인 등 다양한 분야에서 활용된다. 최근에는 커닝과 관련된 게임이 등장하여 대중에게 커닝을 알리고 있으며, 버락 오바마의 출생 증명서 위조 논란과 같이 커닝이 사회적 논쟁의 중심이 되기도 했다.

2. 역사

커닝(Kerning)은 타이포그래피에서 글꼴의 특정 글자 쌍 사이의 간격을 조정하여 시각적으로 더 보기 좋고 읽기 쉽게 만드는 기법이다.

2. 1. 활판 인쇄 시대의 커닝

오른쪽 글리프는 뒤에 오는 문자와 겹치도록 커닝되어 있다(글리프는 인쇄를 위해 미러링된다).


'kern'이라는 단어는 프랑스어 carne프랑스어에서 유래되었으며, "돌출된 각, 펜의 깃털"을 의미한다. 이 프랑스어 용어는 라틴어 cardola, cardinisla에서 유래되었으며 "경첩"을 의미한다.[4] 모든 활자가 금속으로 주조되던 시절에는, 인접한 글자와 겹쳐야 하는 활자 부분은 활자 슬러그의 가장자리에 단순히 걸려 있었다. 그 돌출된 금속 조각들을 'kern'이라고 불렀다. 당시에는 'kerning'이라는 단어는 kern을 가진 활자를 제조하는 것만을 의미했고, 조판 과정에서 글자 사이의 공간을 조정하는 것은 자간 조정 또는 글자 간격이라고 불렀다.

이 방법은 일부 글자 쌍에는 적합하지 않았기 때문에, 프랑스어 L’프랑스어 또는 ''ff'', ''fi'', ''fl'', ''ffi'', ''ffl'' 등과 같은 합자가 해당 글리프 조합에 제공되었다.

최종 인쇄물에는 나타나지 않지만, 활자는 사각형의 '''바디'''를 가지고 있으며, 그대로는 자면이 바디의 틀을 넘어 서로 가까워질 수 없다.[21] 예를 들어 소문자 "f", "ſ"(긴 s)나 대문자 "T", "V" 등에서는 문자의 오른쪽 위에 뻗은 부분 아래에 다음 문자나 약물을 넣지 않으면 그 부분에 보기 흉한 공백이 생기게 된다. 그래서 자면 아래의 바디를 깎는 등 자면을 바디에서 띄우는 방법이 사용되었다(그림이나 문헌[28]의 사진 참조). 활자의 바디에서 뜬 자면의 일부를 '''커언'''(kern영어)이라고 부른다(커닝의 어원 절 참조). 커언은 파손되기 쉽고, 취급에 주의를 요했다.[29]

활자의 한쪽 모서리를 잘라내고, 마주보는 모서리를 잘라낸 다른 활자와 나란히 하여 자면을 가깝게 하는 수법도 있었다.[22] 모서리 잘라낸 모양을 일정하게 함으로써 적은 종류의 활자로 많은 조합을 만들 수 있었다. 이 작업에 특화된 타입 모티서(type mortiser)라고 불리는 기계도 존재했지만,[30] 이 수법은 수고가 많이 들어서 속도가 요구되는 인쇄에서는 사용되지 않았다.[22]

다른 방법으로는, 빈번하게 등장하는 조합을 합자로 하여 하나의 활자로 미리 준비하는 방책을 취하기도 했다.[22] 활판 인쇄 성립 초기에는 합자가 필요한 조합이 현재보다 많았지만,[22] 이윽고 자형이 정돈되어 가는 가운데 커닝의 필요성이 적은 방향으로 발전하여,[29] "fi", "fl" 등의 대표적인 조합만 남았다.[22] (글꼴이 디지털화된 현재에도, 이러한 조합에는 독립된 자형이나 문자 코드가 부여되는 등 특수한 취급이 이루어진다. 자세한 내용은 합자를 참조).

어쨌든, 활판 인쇄 시대의 커닝 처리에는 특수한 활자를 준비하거나 활자의 모양을 가공하는 것이 필요하며, 노력과 비용을 요했다. 19세기부터 20세기 초에 걸쳐 주조 활자의 제조가 거의 기계화되어도, 커언드 레터에 대해서는, 그 제조에 요구되는 정밀도 때문에 손으로 만드는 것이 더 좋다고 여겨졌다.[31]

2. 2. 디지털 타이포그래피 시대의 커닝

디지털 글꼴의 등장으로 많은 글리프 조합을 커닝하는 것이 훨씬 쉬워졌다. 디지털 타이포그래피에서 커닝은 일반적으로 글자 쌍에 적용되며, 기본 문자 간격을 늘리거나 줄여야 하는 숫자로 표시된다. 숫자가 양수면 증가, 음수면 감소를 의미한다. 이 숫자는 ''em''의 특정 부분인 ''폰트 유닛''으로 표현되며, 1000 단위/em 및 2048 단위/em의 값을 주로 사용한다. 예를 들어 1000 단위/em의 경우, 커닝 값 15는 현재 활자 크기의 0.015만큼 문자 간격이 증가함을 의미한다.

대부분의 커닝 조정은 음수이며, 음수 조정이 일반적으로 양수 조정보다 크다. 주어진 폰트 내에서 다른 쌍에 대한 조정은 2에서 100 이상까지 다양할 수 있다(1000 단위/em으로 표현될 때). 주어진 쌍에 대한 조정은 폰트에 따라 크게 다를 수 있다.

음수 커닝은 ''A''와 같이 ''T'', ''V'', ''W'', ''Y''와 같은 대문자를 다른 대문자나 일부 소문자에 더 가깝게 맞추는 데 널리 사용된다. (예: ''Ta'', ''Te'', ''To'') 또한 마침표(온점)나 쉼표를 이러한 문자와 ''F'' 및 ''P'', 그리고 소문자 ''r'', ''v'', ''w'', ''y''에 더 가깝게 맞추는 데 사용된다. (예: ''FA'', ''LT'', ''LY'')

양수 커닝은 주로 특수 문자 및 구두점과 함께 사용된다(예: 오른쪽 괄호 또는 따옴표 뒤에 오는 소문자 ''f''). 폰트에 따라 강조된 글자와 ''Bo'', ''Dw'', ''TY''와 같은 쌍에 약간의 양수 커닝이 필요할 수도 있다.

다음 표는 몇 가지 예시적인 커닝 쌍과 해당 값을 보여준다. 이 값은 1000 단위/em을 기준으로 하며, Minion Pro 폰트의 커닝 테이블에서 가져왔다. 다른 폰트에서는 커닝이 매우 다를 수 있다.

A” −146W. −144P, −139L” −135VA −123F. −110YA −104Te  −98
AV  −97Vr  −86PA  −85m”  −82a”  −79FA  −78UA  −78w.  −73
Yt  −72LT  −64r,  −63Xv  −54Ku  −46D,  −40D”  −36OA  −36
Hv  −33T:  −32DY  −30c”  −25my  −23Ru  −21aj  −19bv  −16
Sp  −14ro  −13SR  −12lp  −12ot  −11tt  −10am   −9fe   −9
vo   −8xc   −8yo   −8Ix   −6e,   −6st   −5he   −4Fw   −3
us   −3Ak   +3la   +3Oj   +5il   +5CO   +7bc   +9Xf  +10
fr  +10F”  +12wb  +12YW  +13So  +14Co  +15VT  +16cv  +16
Dv  +17OC  +18Bc  +20RX  +20T”  +22gy  +24r:  +24XA  +25
ry  +29w;  +31f?  +76f” +121



어떤 글자를 커닝해야 하는지는 폰트를 사용할 언어에 따라 다르다. 고정폭 글꼴은 문자가 항상 동일한 간격을 갖기 때문에 커닝을 사용하지 않는다.

과거의 글꼴 형식(예: 마이크로소프트의 TrueType)에서 커닝 값은 각 항목이 문자 쌍과 해당 커닝 값으로 구성된 간단한 ''kern'' 테이블에 지정되었다.[6][5]

OpenType은 TrueType의 상위 집합이므로 OpenType으로 묶인 TrueType 글꼴에 대해 ''kern'' 테이블이 여전히 지원된다. 그러나 PostScript 기반 (CFF) OpenType 글꼴은 이 옵션을 갖지 않는다. OpenType은 글리프 위치 테이블 (GPOS)을 통해 커닝을 지정하는 새롭고 통일된 방식을 도입했다.[6] Adobe에서 최근에 출시한 글꼴은 더 이상 ''kern'' 테이블을 전혀 갖지 않고 GPOS를 통해서만 커닝을 지정한다.[7]

OpenType 글꼴은 수천 개의 글리프를 포함할 수 있고, 커닝이 필요한 엄청난 수의 문자 쌍을 가질 수 있으므로, OpenType 글꼴은 전체 저장 공간을 최소화하도록 설계된 정교한 테이블 및 하위 테이블 시스템을 가질 수 있다. (커닝은 GPOS에 저장되는 광범위한 새로운 글리프 위치 지정 기능의 일부로 처리된다.[8]) 이 시스템은 글리프 ''클래스''의 개념을 기반으로 한다.

클래스 기반 커닝은 각 항목이 글리프 클래스 쌍에 해당하는 2차원 테이블을 사용한다. 클래스에는 커닝 목적으로 오른손 윤곽선 (및 오른쪽 사이드 베어링)이 동일한 여러 문자 또는 왼손 윤곽선 (및 왼쪽 사이드 베어링)이 동일한 여러 문자가 포함된다. 첫 번째 문자가 첫 번째 클래스에서, 두 번째 문자가 두 번째 클래스에서 가져온 모든 문자 쌍은 동일한 커닝 값을 필요로 하므로 이 값은 테이블에 한 번만 지정하면 된다. 2차원 테이블의 행은 첫 번째 문자 클래스에 해당하고 열은 두 번째 문자 클래스에 해당한다. 주어진 문자 쌍에 대한 커닝 값은 해당 문자가 속한 클래스의 교차점에서 테이블에서 찾을 수 있다.

이 시스템은 경제적이지만 제한적이다. 예를 들어, 많은 클래스가 매우 작을 수 있다. 또한, 많은 유형의 글리프를 가진 글꼴은 이러한 테이블을 여러 개 필요로 할 수 있다. 마지막으로, 클래스를 통해 표현할 수 없는 많은 쌍이 남아있다. 이를 위해 더 간단한 1차원 테이블이 제공된다. 각 테이블은 많은 쌍에서 첫 번째 문자인 특정 문자에 대한 것이며, 항목에는 해당 커닝 값과 함께 이러한 쌍에서 두 번째 문자인 문자가 포함된다.

다음은 커닝 쌍의 첫 번째 문자에 대한 Minion Pro 글꼴의 글리프 클래스 몇 가지 예이다. (d i l u), (h m n), (j q), (b o p), (v w y), (D O Q), (H I), (V W); 그리고 쌍의 두 번째 문자에 대한 예: (f i m n r), (h k l), (j p t u), (c d e o q), (v w y), (C G O Q), (B D E F H I K L N P R).

클래스 기반 커닝에 적합한 문자의 범주는 분음 부호가 있는 문자이다. 이러한 문자는 기본 문자의 클래스에 추가할 수 있으며, 쌍에서 첫 번째 문자이든 두 번째 문자이든 함께 유지될 수 있다. (예: (a à á â), (e è é ê)) 특정 쌍에서 다른 문자와 커닝이 다르면 해당 문자는 클래스에 포함될 수 없다 (예: ''Yá'' vs. ''Yä'').

대부분의 최신 사무실 및 데스크톱 출판 시스템은 OpenType 기능을 지원하므로 클래스 기반 커닝도 지원한다. 문자의 모양에 맞춰 개별적으로 문자 간 거리를 미세 조정하는 타이포그래피 기법으로, 심미적 측면과 인쇄물의 가독성이라는 실용적 측면을 함께 지닌다.[22]

사진 식자나 그 이후의 DTP의 보급에 따라 인쇄물에 주조 활자 자체가 사용되는 경우는 줄어들었다. 사진 식자나 DTP에서는 활자의 몸체 대신 글자 면은 장방형의 "가상 몸체" 안에 배치된다.[36] 인접한 문자의 가상 몸체의 경계를 접촉시켜 틈 없이 배열했을 때가 베타 묶음에 해당한다. DTP에서의 커닝은 이 때의 표준 문자 간격에서 얼마나 간격을 줄여야 하는지를 나타내는 숫자로 지정된다. 변별 기호가 있는 경우나,[37] 글자꼴끼리 충돌하는 경우에는 반대로 간격을 늘리는 경우도 있다.

활자의 커닝은 노동력과 비용이 많이 드는 것이었지만, DTP의 등장으로 이러한 제약이 없어졌고, 더 많은 조합으로 커닝이 이루어지게 되었다. 최근에는 사용자가 의식하지 않아도 자동으로 커닝이 이루어지는 '''자동 커닝'''도 일반화되었다.[38] 어떤 조합에서 커닝이 필요한지는 언어에 따라 다르다. 또한 고정폭 글꼴로 커닝을 하는 일은 없다.

최근 고품질 영문 글꼴은 자체적으로 커닝에 관한 정보를 미리 가지고 있는 경우가 많아, 이 기능에 대응하는 소프트웨어에서는 자동으로 커닝이 실행된다. 이를 '''메트릭스 커닝'''이라고 한다.[39] 예를 들어 P., To, Tr, Ta, We, Wo, Ya, Yo 등과 같은 빈번하게 사용되는 문자・기호의 조합에 대해 적절한 간격에 대한 정보가 존재한다.[40] 이처럼, 커닝이 필요한 문자・기호의 조합은 그 모양에 따라 대체로 결정되어, 이를 '''커닝 페어'''라고 부른다. 영문에 한정하더라도 그 조합은 수백 가지에 달한다.

OpenType은 이러한 진보적인 기능에 대응하는 글꼴 형식 중 하나이다. 다만, 류민, 신고, 태고B101 등과 같은 일본어 글꼴에 부속된 영문자 모양에는 이 정보가 포함되어 있지 않은 경우가 많다.[41] 또한, 대응 글꼴이라 하더라도 한 줄 안에 서로 다른 글꼴・크기・서식의 문자가 혼재된 경우에는 메트릭스 커닝이 적용되지 않는다.

메트릭스 커닝이 실행되지 않는 상황에서도, 조판 소프트웨어가 자동 커닝 기능을 갖추고 있는 경우가 있다.[40] 이는 문자의 모양을 분석하여, 최적의 문자 간격을 자동으로 산출하는 알고리즘에 의해 실행되며, '''옵티컬 커닝'''이라고 불린다.[42]

자동 커닝은 간편하고 편리한 기술이지만, 수동 커닝에 비해 떨어지는 경우도 있다. 공백을 판단하는 알고리즘에게 공백이 충분히 작더라도, 실제 접근하고 있는 것은 분음 부호에 불과하여, 사람의 눈에는 공백이 너무 크게 보이는 등의 경우가 발생할 수 있기 때문이다. 일부 웹 브라우저는 OpenType 글꼴의 메트릭 커닝 기능을 이용할 수 있다.

Cascading Style Sheets의 최신 버전인 CSS3의 기능으로 `font-kerning`이라는 것이 존재한다. ''CSS Fonts Module Level 3''에 포함되어 있지만,[43] 대응 상황은 브라우저에 따라 다르다. 값으로는 `normal`(메트릭 커닝 실시), `none`(커닝을 수행하지 않음), `auto`(문자 체계에 맞춰 사용자 에이전트가 판단)의 3가지가 있으며, 초기값은 `auto`이다.

```css

font-kerning: auto;

```

SVG의 기능으로 `text-rendering`이라는 것이 존재한다.[45] 이것은 본래 SVG의 그림에서 사용되는 기능이며, 어떤 버전의 CSS 규격에서도 규정되지 않았음에도 불구하고,[46] 일부 브라우저는 웹 페이지 내에서도 이것을 CSS로 해석하는 것으로 알려져 있다.

```css

text-rendering: optimizeLegibility;

3. 커닝의 종류

디지털 타이포그래피에서 커닝은 글자 쌍에 적용되는 간격 조정이다. em의 특정 부분인 ''폰트 유닛''으로 표현되며, 양수는 간격 증가, 음수는 감소를 의미한다. 폰트마다 단위가 다르지만, 1000 단위/em 또는 2048 단위/em이 주로 사용된다.[6]

음수 커닝은 ''A'', ''T'', ''V'', ''W'', ''Y''와 같은 대문자를 다른 대문자나 소문자에 가깝게 맞추는 데 사용된다. (예: ''Ta'', ''Te'', ''To'') 또한 마침표, 쉼표를 ''F'', ''P'', 소문자 ''r'', ''v'', ''w'', ''y'' 등에 가깝게 맞춘다. 양수 커닝은 주로 특수 문자 및 구두점과 함께 사용된다.

다음은 Minion Pro 폰트의 커닝 쌍 예시이다. (1000 단위/em 기준)

커닝 쌍값
A”-146
W.-144
YA-104
Te-98
AV-97
FA-78
Yt-72
LT-64
T:-32
Sp-14
fe-9
Ak+3
fr+10
T”+22
ry+29
f”+121



고정폭 글꼴은 커닝을 사용하지 않는다. OpenType 글꼴은 글리프 클래스 개념을 사용하여 커닝을 효율적으로 처리한다. 클래스 기반 커닝은 분음 부호가 있는 문자에도 적용 가능하다.

오카방고 강 표지판: ''AVA'' 조합은 커닝이 어렵다.


커닝(Kerning)과 트래킹(Tracking)의 비교: 트래킹은 글자 간격을 균일하게 조정하는 반면, 커닝은 특정 글자 쌍의 간격을 조정한다.


CSS1의 `letter-spacing` 속성은 균일하지 않은 글자 간격을, CSS3의 `font-kerning` 속성은 커닝을 제어한다.[20]

일본어에서는 자간 조절이나 커닝을 하지 않은 상태를 '''베타 조립'''이라고 부른다.[23] 커닝은 문자의 조합 형태에 맞춰 그때마다 다른 간격을 설정하는 것으로, 일률적으로 간격을 변경하는 "트래킹"이나 "자간"과는 구분된다.[24][25]

커닝의 강약은 타이트(tight)・루즈(loose)로 표현된다.[21] 글자 모양끼리 접촉하는 터칭(touching)은 타이트한 자간 조절의 극한이다.

커닝은 광학 문자 인식 소프트웨어의 인식 정밀도를 저하시킬 수 있다.

3. 1. 자동 커닝

자동 커닝은 프로그램이 자동으로 글자 간격을 조정하는 기능이다. 자동 커닝에는 '메트릭'과 '광학'의 두 가지 유형이 있다.

메트릭 커닝은 글꼴 파일에 포함된 커닝 테이블의 값을 직접 사용하여 글자 간격을 조정한다. 오늘날 대부분의 타이포그래피 기능을 갖춘 시스템은 메트릭 커닝을 제공한다.[39] 예를 들어, P., To, Tr, Ta, We, Wo, Ya, Yo 등과 같이 자주 사용되는 문자나 기호 조합에 대해 적절한 간격 정보가 글꼴에 포함되어 있다.[40] 이러한 문자나 기호 조합을 '''커닝 페어'''(kerning pair)라고 부른다.

광학 커닝은 프로그램이 알고리즘을 사용하여 각 문자의 윤곽선을 기반으로 최적의 간격을 계산한다. 광학 커닝은 메트릭 커닝보다 더 진보된 시스템에서 사용할 수 있다.[42]

최근 고품질 영문 글꼴은 자체적으로 커닝 정보를 가지고 있는 경우가 많아, 이 기능을 지원하는 소프트웨어에서는 자동으로 커닝이 실행된다. 이를 메트릭스 커닝이라고 한다.[39] 그러나 류민, 신고, 태고B101 등과 같은 일본어 글꼴에 부속된 영문자 모양에는 이러한 정보가 포함되어 있지 않은 경우가 많다.[41] 또한, 대응 글꼴이라 하더라도 한 줄 안에 서로 다른 글꼴, 크기, 서식의 문자가 섞여 있으면 메트릭스 커닝이 적용되지 않는다.

메트릭스 커닝이 실행되지 않는 상황에서도, 조판 소프트웨어가 자동 커닝 기능을 갖추고 있는 경우가 있다.[40] 이는 문자의 모양을 분석하여 최적의 문자 간격을 자동으로 산출하는 알고리즘에 의해 실행되며, 옵티컬 커닝이라고 불린다.[42]

자동 커닝은 편리하지만, 수동 커닝에 비해 떨어지는 경우도 있다. 알고리즘이 공백을 판단할 때, 실제로는 분음 부호에 불과하여 사람의 눈에는 공백이 너무 크게 보이는 경우가 있을 수 있다.

3. 2. 수동 커닝

수동 커닝은 사용자가 자동 커닝을 무시하고 텍스트의 특정 위치에서 문자 쌍에 직접 커닝 값을 적용하는 기능이다. 이 기능을 사용할 수 없는 경우, 해당 두 문자에 대해 텍스트 블록의 문자 사이의 공간을 수정하는 기능(일반적으로 트래킹이라고 함)을 사용하여 시뮬레이션할 수 있다.[24][25]

숙련된 사람이 사용하는 경우 수동 커닝은 일반적으로 광학 커닝보다 더 나은 결과를 제공한다. 예를 들어, 알고리즘 비교에서 매우 가깝게 간격이 벌어진 것처럼 보이는 일부 문자는 특히 글리프의 유일한 요소가 "너무 가깝게" 보이는 분음 부호와 같은 경우 사람의 눈에는 너무 멀리 떨어져 보일 수 있다. 수동 커닝은 글꼴 디자이너가 커닝 테이블에 내장한 메트릭 커닝보다 더 좋을 수도 있는데, 이러한 테이블에는 종종 오류나 누락이 있거나 차이가 개인적인 선호도의 문제일 수 있기 때문이다.

3. 3. 문맥 커닝

문맥 커닝은 둘 이상의 연속된 글리프(글자 모양)에 따라 위치를 조정하는 것을 말한다. 예를 들어, 특정 글리프의 간격은 앞선 글리프뿐만 아니라 뒤따르는 글리프에도 의존할 수 있다. 일반적인 문서에서는 거의 구현되지 않지만, 문맥 커닝은 양질의 타이포그래피에서 중요한 문제이다.[1]

Minion Pro 폰트에서 문맥 커닝이 필요한 상황의 예시는 인용문 끝에서 자주 발견되는 세 문자 시퀀스 ''f.”'' (''f'', 마침표, 따옴표)이다. 폰트의 커닝 테이블을 사용하면, 따옴표는 ''f''에 너무 가까이 붙어 있지만, 이 둘 사이에 마침표가 없다면 간격은 적절하다. 즉, 마침표는 간격을 늘리는 대신 줄어들게 한다. 마침표가 없을 때, 이 둘의 커닝은 +121(1,000단위/em으로 표현)이다. 마침표의 너비는 228이지만, ''f''와 마침표 사이의 커닝은 -5이고, 마침표와 따옴표 사이는 -138이다. 총 +85로, 원래 121과 비교하면 36단위의 순손실이 발생하여 따옴표가 이제 ''f''에 더 가까워지는 이유를 설명한다. 문맥 커닝은 세 문자 시퀀스를 인식하고 하나 또는 두 개의 문자 간 간격을 늘릴 것이다. 비슷한 문제는 문자 ''F'', ''P'', ''T'', ''V'', ''W'', ''Y''; 마침표 대신 쉼표; 또는 쌍따옴표 대신 작은 따옴표에서도 발생한다.[1]

문맥 커닝은 OpenType 폰트 형식에서 지원되지만, 이를 구현하는 폰트 디자이너는 거의 없으며, 현재 이를 사용할 수 있는 데스크톱 출판 시스템은 아마 없을 것이다. 중요한 경우, 사용자는 대신 수동 커닝을 사용하는 것이 해결책이다.[1]

4. 커닝과 관련된 기타 개념

트래킹은 문자와 관계없이 글자 사이의 공간을 균일하게 조절하는 것을 말한다. 이는 글자 쌍을 기준으로 공간을 조절하는 커닝과는 다르다.[24][25] 예를 들어 "V"와 "A" 사이에는 강한 커닝이 적용되지만, "S"와 "T" 사이에는 커닝이 적용되지 않는다.

글자 모양끼리 서로 닿을 정도로 자간을 좁게 조절하는 것을 터칭(touching영어)이라고 한다. 이는 자간 조절의 한계로 여겨진다.[22] 터칭은 본문에는 사용하기 좁지만, 표제어나 로고 타입 등에서는 인상적인 효과를 주기도 한다. --

4. 1. 트래킹 (자간)

트래킹은 문자와 관계없이 글자 사이의 공간을 균일하게 조절하는 것을 말한다. 이는 글자 쌍을 기준으로 공간을 조절하는 커닝과는 다르다.[24][25] 예를 들어 "V"와 "A" 사이에는 강한 커닝이 적용되지만, "S"와 "T" 사이에는 커닝이 적용되지 않는다.

4. 2. 터칭

글자 모양끼리 서로 닿을 정도로 자간을 좁게 조절하는 것을 터칭(touching영어)이라고 한다. 이는 자간 조절의 한계로 여겨진다.[22] 터칭은 본문에는 사용하기 좁지만, 표제어나 로고 타입 등에서는 인상적인 효과를 주기도 한다.

5. 커닝의 응용

타이포그래피 기법 중 하나인 커닝은 문자의 모양에 맞춰 개별적으로 문자 간 거리를 미세 조정하는 방식으로, 심미성과 가독성을 높이는 데 기여한다.[22] 특히 표제어와 같이 큰 문자를 사용할 때 커닝의 중요성이 커진다. 일본어나 중국어처럼 각 문자가 정사각형 틀에 들어가는 언어에서는 본문에 커닝이 사용되는 경우가 드물지만, 표제어 등에는 '''자간 조절'''이 이루어지기도 한다.

활자 인쇄에서는 커닝에 많은 노력과 비용이 필요했지만, 사진 식자나 DTP의 등장으로 훨씬 쉬워졌다. 일반적으로 일본에서는 커닝이나 자간 조절을 하지 않은 상태를 '''베타 조립'''이라고 부른다.[23] 커닝은 문자의 조합 형태에 따라 간격을 다르게 설정하는 것으로, 일률적으로 간격을 변경하는 "트래킹"이나 "자간"과는 구분된다.[24][25]

5. 1. 디자인

타이포그래피 기법 중 하나로, 문자의 모양에 맞춰 개별적으로 문자 간 거리를 미세 조정하여 시각적 효과를 높인다. 로고, 포스터 등 다양한 디자인 분야에서 활용된다.[22] 페덱스의 로고는 터칭을 통해 E와 x 사이의 공백에 오른쪽 화살표를 숨은 그림으로 배치하여 물류업으로서의 이미지를 인상적으로 표현한 대표적인 예시이다.[26]

커닝과 트래킹의 강약은 타이트(tight영어), 루즈(loose영어)로 표현된다. 타이트한 자간 조절의 극한은 글자 모양끼리 접촉하는 터칭(touching영어)이라고 불리는 상황이며, 이것이 글자 간격 조절의 한계이다. 본문에 사용하기에는 너무 좁지만, 표제어나 로고 타입 등에서 인상적인 터칭의 사용례를 접하는 경우가 적지 않다.

커닝은 인간의 가독성을 높이지만, 광학 문자 인식 소프트웨어는 문자의 경계를 판별하기 어려워져 인식 정밀도가 저하되는 단점이 있다. 특히 타이트한 조립에서는 오류율이 10%를 넘는다고 보고된 적도 있다.[27]

5. 2. 웹 브라우저

일부 웹 브라우저는 CSS 속성을 통해 커닝을 지원하여 웹 페이지의 가독성을 향상시킬 수 있다. `font-kerning`, `text-rendering`, `font-feature-settings` 등의 CSS 속성을 사용하여 커닝을 제어할 수 있다.[11][12][13][14][16]

  • `text-rendering: optimizeLegibility;`는 파이어폭스, 크롬, 사파리,[11] 오페라, 안드로이드 브라우저에서 커닝을 활성화한다.[12]
  • `font-feature-settings` 속성은 인터넷 익스플로러 10 이상, 크롬, 엣지, 파이어폭스, 안드로이드 브라우저에서 커닝을 활성화한다.[13][14]
  • CSS3 속성인 `font-kerning`은 주요 브라우저에서 지원되며,[16] OpenType 글꼴에 대해 커닝을 항상 활성화하도록 제안한다.[15]


SVG의 기능으로 `text-rendering`이 존재하며,[45] 일부 브라우저는 웹 페이지 내에서도 CSS로 해석한다.[47]

```css

text-rendering: optimizeLegibility;

```

`font-kerning`의 값으로는 `normal`(메트릭 커닝 실시), `none`(커닝을 수행하지 않음), `auto`(문자 체계에 맞춰 사용자 에이전트가 판단)의 3가지가 있으며, 초기값은 `auto`이다.

```css

font-kerning: auto;

5. 3. 워드 프로세서 및 DTP 소프트웨어

대부분의 워드 프로세서 및 DTP 소프트웨어는 자동 또는 수동 커닝 기능을 제공한다.[38] DTP의 등장으로 노동력과 비용이 많이 들던 활자의 커닝 제약이 없어졌고, 더 많은 조합으로 커닝이 이루어지게 되었다.[38] 최근에는 사용자가 의식하지 않아도 자동으로 커닝이 이루어지는 '''자동 커닝'''(autokerning)도 일반화되었다.[38]

최근 고품질 영문 글꼴은 자체적으로 커닝에 관한 정보를 미리 가지고 있는 경우가 많아, 이 기능에 대응하는 소프트웨어에서는 자동으로 커닝이 실행된다. 이를 '''메트릭스 커닝'''(metrics kerning)이라고 한다.[39] 예를 들어 P. , To , Tr , Ta , We , Wo , Ya , Yo 등과 같이 빈번하게 사용되는 문자・기호의 조합에 대해 적절한 간격에 대한 정보가 존재한다.[40] 이처럼, 커닝이 필요한 문자・기호의 조합은 그 모양에 따라 대체로 결정되어, 이를 '''커닝 페어'''(kerning pair)라고 부른다.

OpenType은 이러한 진보적인 기능에 대응하는 글꼴 형식 중 하나이다. 다만, 류민, 신고, 태고B101 등과 같은 일본어 글꼴에 부속된 영문자 모양에는 이 정보가 포함되어 있지 않은 경우가 많다.[41] 또한, 대응 글꼴이라 하더라도 한 줄 안에 서로 다른 글꼴・크기・서식의 문자가 혼재된 경우에는 메트릭스 커닝이 적용되지 않는다.

메트릭스 커닝이 실행되지 않는 상황에서도, 조판 소프트웨어가 자동 커닝 기능을 갖추고 있는 경우가 있다.[40] 이는 문자의 모양을 분석하여, 최적의 문자 간격을 자동으로 산출하는 알고리즘에 의해 실행되며, '''옵티컬 커닝'''(optical kerning)이라고 불린다.[42]

자동 커닝은 간편하고 편리한 기술이지만, 수동 커닝에 비해 떨어지는 경우도 있다. 공백을 판단하는 알고리즘에게 공백이 충분히 작더라도, 실제 접근하고 있는 것은 분음 부호에 불과하여, 사람의 눈에는 공백이 너무 크게 보이는 등의 경우가 발생할 수 있기 때문이다.

6. 커닝과 관련된 논쟁

버락 오바마의 출생 증명서 확대도. a와 p의 세리프가 겹쳐져 있다.(전체도)


일반적인 타자기의 활자는 고정폭이며, 한 글자 타건마다 종이가 이동하는 양도 일정하다. 따라서, 타자기로 쳐진 글자에는 커닝이 존재하지 않으며, 커닝이 적용된 것처럼 보이는 경우에는 워드 프로세서 등으로 만들어진 가짜 "타자기풍" 서류라고 인식되는 경우가 있다.

이것은 버락 오바마 국적 음모론을 둘러싼 논쟁의 한 부분이 되었다. 버락 오바마는 1961년에 태어났으며, 당시에는 워드 프로세서가 존재하지 않았고, 출생 증명서는 타자기로 작성된 것으로 보인다. 그러나 일부 문자에 커닝과 비슷한 특징(가상 몸체의 겹침)이 보이기 때문에, 증명서의 정당성에 의문을 제기하는 사람이 있다.[48] 만약 출생 증명서가 허위였다면 미국 대통령이 될 요건을 충족하지 못하는 것이 증명되어, 오바마의 당선 정당성이 흔들리게 된다. 그러나 이에 대해 1941년에는 이미 커닝(비례 간격)이 가능한 타자기가 IBM에서 출시되었으며,[49] 종이 미끄러짐, 잉크 번짐 등 다양한 설명이 가능하며, 가상 몸체의 겹침만으로는 위조의 증거가 될 수 없다는 반론이 제기되었다.[50]

7. 커닝 게임

"Kern Type, the kerning game"과 같은 웹사이트는 커닝 연습을 위한 게임을 제공한다.[51] 플레이어는 화면에 표시된 문자를 키보드나 마우스로 움직여서 이상적인 결과와 비교하여 채점받는다. 이는 일반적으로 알려지지 않은 전문적인 작업을 게임으로 만들어 엔터테인먼트로 전환한 예시이며, 디자이너에게도 자신의 기량을 확인할 수 있는 콘텐츠로 활용되고 있다.[52]

참조

[1] 웹사이트 Fonts : Type topics: Glossary http://www.adobe.com[...] Adobe 2011-09-16
[2] 뉴스 Kerning, spacing, leading: the invisible art of typography https://theconversat[...] 2023-12-16
[3] 웹사이트 kern {{!}} Definition of kern in English by Oxford Dictionaries https://en.oxforddic[...] 2018-07-13
[4] 웹사이트 kern http://dictionary.re[...] Dictionary.com 2012-11-13
[5] 웹사이트 Adventures in Kerning, Part II https://www.typograp[...] Hoefler & Co. 2023-06-24
[6] 웹사이트 The Kerning Table http://www.microsoft[...] Microsoft.com 2014-08-07
[7] 웹사이트 FontCreator http://www.softervie[...] Softerviews.org 2014-08-07
[8] 웹사이트 Developer Resources http://partners.adob[...] Partners.adobe.com 2014-08-07
[9] 웹사이트 Special Capabilities of a Math Font http://blogs.msdn.co[...]
[10] 웹사이트 Method and system of character placement in opentype fonts https://patents.goog[...]
[11] 웹사이트 Cross-browser kerning-pairs & ligatures http://aesthetically[...] Aestheticallyloyal.com 2014-08-07
[12] 웹사이트 Can I use Improved kerning pairs & ligatures http://caniuse.com/k[...] Caniuse.com 2014-08-07
[13] 웹사이트 Kerning on the Web https://blog.typekit[...] Typekit.com 2019-02-08
[14] 웹사이트 font-feature-settings https://developer.mo[...] mozilla.org 2019-02-08
[15] 문서 The font-kerning property in the 2012's CSS3 Draft http://www.w3.org/TR[...]
[16] 웹사이트 CSS3 font-kerning https://caniuse.com/[...] 2023-07-03
[17] 논문 Kerning or Positioning Using Spacer Glyphs. Positioning with Spacers http://www.cairn.inf[...] 2006
[18] 논문 Effects of intraword and interword spacing on eye movements during reading: Exploring the optimal use of space in a line of text http://eprints.bourn[...]
[19] 논문 The Rhetoric of Typography: Effects on Reading Time, Reading Comprehension, and Perceptions of Ethos http://www.ingentaco[...] 2004
[20] 웹사이트 CSS Fonts Module Level 3 http://www.w3.org/TR[...] W3.org 2014-08-07
[21] 서적 カーニング http://jiten.com/dic[...] 2012-11-04
[22] 간행물 Kerning & Mortising http://www.apa-lette[...] Amalgamated Printers’ Association
[23] 문서 JIS X 4051
[24] 서적 http://www.adobe.com[...] Adobe 2012-11-04
[25] 서적 カーニング http://www.sophia-it[...] Weblio 2012-11-04
[26] 문서 Federal Express Corporation http://www.leadercre[...] leader creative 2012-12-09
[27] 논문 Optical Character Recognition for Storing Literature References http://www.ajronline[...] 1991-10
[28] 간행물 TypeTalk: To Everything, Kern, Kern Kern... http://www.creativep[...] 2009-05-13
[29] 서적 Odd Fellows' Literary Casket 1856
[30] 간행물 Time-Saving Equipment for Printers https://archive.org/[...] H. B. Rouse and Company 1946
[31] 서적 Printing Types, Their History, Forms, and Use; a Study in Survivals https://archive.org/[...] Harvard University Press 1922
[32] 서적 kern http://www.etymonlin[...] 2012-11-05
[33] 서적 kern http://www.merriam-w[...] Merriam-Webster 2012-11-05
[34] 서적 kern http://dictionary.re[...] Random House 2012
[35] 서적 2011-04-08
[36] 서적 仮想ボディと字面 http://www.morisawa.[...] モリサワ 2012-12-11
[37] 논문 Problems of diacritic design for Latin script text faces http://scripts.sil.o[...] SIL International
[38] 서적 自動カーニング http://www.japanlink[...] 2012-11-04
[39] 서적 2012-11-05
[40] 서적 カーニングと字送り http://help.adobe.co[...] Adobe 2012-11-06
[41] 서적 2005
[42] 서적 オプティカルカーニング http://www.sophia-it[...] Weblio 2012-11-05
[43] 간행물 CSS Fonts Module Level 3 http://www.w3.org/TR[...] W3C 2012-08-23
[44] 웹사이트 Can I use... http://caniuse.com/#[...] 2017-07-18
[45] 간행물 Scalable Vector Graphics (SVG) 1.1 W3C 2011-08-16
[46] 간행물 text-rendering https://developer.mo[...] Mozilla Developer Network 2012-12-11
[47] 웹사이트 Cross-browser kerning-pairs & ligatures http://aesthetically[...] 2012-11-04
[48] 웹사이트 Web expert: Obama certificate falls short in authenticity http://www.wnd.com/2[...] 2011-05-08
[49] 웹사이트 1941 http://www-03.ibm.co[...] IBM 2012-11-05
[50] 웹사이트 Typewriter kerning (proportional spacing) existed in 1941 http://qbit.cc/typew[...] 2011-05-23
[51] 웹사이트 Kern Type, the kerning game http://type.method.a[...] Method of Action
[52] 뉴스 いま，見ておきたいウェブサイト：第68回　Kern Type, the kerning game，Designspiration，O'Neill Illusion https://gihyo.jp/des[...] 技術評論社 2011-11-01


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com