글꼴의 크기는 정확히 무엇을 의미합니까?


81

사용자 정의 이미지로 번역하려고하는 40 픽셀 글꼴이 있습니다. 이미지의 크기를 정확하게 일치 시키려고하는데 정확한 크기를 얻는 데 약간의 문제가 있습니다. 기본적으로 이것이 내려 오는 것은 이것입니다. 글꼴에 X 픽셀이라고 표시되면 이것이 실제로 무엇을 의미합니까?


글꼴에서 우리는 x 높이의 용어를 가지고 있습니다.
Jack

5
문서를 입력하는 경우 일반적으로 글꼴 크기 12가 사용됩니다. 12의 의미는 무엇입니까?
PearsonArtPhoto

12 = 12pt 타입 (일반적으로)
DA01

답변:


67

이것은 다소 만족스럽지 않은 대답입니다.

픽셀, 포인트 (1/72 ") 또는 밀리미터로 지정 되든 유형의 크기는 엠 제곱의 높이이며 보이지 않는 상자이며 일반적으로 가장 높은 어 센더에서 가장 낮은 디 센더까지의 거리보다 약간 큽니다.

이것은 다소 임의적 인 측정법이므로

  • 글꼴의 정확한 기술적 디자인에 의존
  • 인쇄 또는 래스터 화 된 샘플에서 정확하게 측정 할 수 없음

근사치 외에는 의미가 없거나 유용하지 않습니다.

귀하의 경우 실험을 통해 브라우저의 렌더링과 일치하도록 Photoshop에서 지정 해야하는 크기를 계산하십시오. 이 글꼴은 일정한 글꼴 비율을 유지해야하지만 브라우저 나 OS를 변경할 경우에는 그렇지 않을 것입니다.


49

ASCII 시간! 아래 두 상자는 1900 년 정도의 리드 유형 조각 인 것으로 가정하십시오. 당시에는 서체가 납으로 주조되었습니다 (또는 목재로 라우팅). 유형을 인쇄 잠금 장치로 설정하려면 솔리드 블록에 연결해야했습니다. 여기에서 유형의 치수 (포인트)는 다음과 같습니다.

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

위의 두 글자는 크기가 다르지만 경계 상자는 동일합니다. 따라서 포인트 측면에서 두 글꼴의 크기는 동일합니다.

오늘날 우리는 납과 목재를 많이 사용하지 않으며 대부분 디지털입니다. 그러나 포인트 크기 조정의 개념은 유형이 배치되는 모든 문자에 대해 동일한 높이의 가상 상자가 있다는 점에서 여전히 존재합니다. 다시 말하지만이 가상 상자는 글자 자체의 물리적 측정 대신 포인트 크기를 정의합니다. 글자체의 실제 크기는 종종 포인트 크기보다 작습니다 (그러나 더 클 수도 있음).

픽셀로 측정 유형은 작동하지 않지만 CSS 등에서 픽셀로 유형을 '설정'할 수 있습니다. 브라우저는 선언 된 px 크기 사이에서 가능한 최선의 번역을 수행합니다. 그러나 그것은 항상 퍼지 추정입니다.

궁극적으로 시각적으로보고 동일한 크기로 볼 때까지 각각의 크기를 변경하는 것보다 정확히 동일한 크기의 두 서체 레터 폼을 얻는 정확한 방법은 없습니다.


컴퓨터에서이 PX = Points * SystemDPI / 72와 같은 Points to Pixels를 계산합니다. 비디오 세계의 DPI (모니터)는 1984 년 Apple이 도입 한 순수한 임의의 값입니다. 비디오 장비는 픽셀 만 사용합니다. 비디오 / 이미지 세계에는 DPI가 없습니다. 현대 글꼴은 1 포인트, 1/72가 1/72 인치로 정의되는이 개념을 기반으로합니다.

5
@AbdiasSoftware 예, 1 포인트는 1/72 인치의 평균이며 첫 번째 Mac은 72ppi 화면이었습니다. 그러나 그것이 질문이나 내가 준 대답과 관련이 있는지 확실하지 않습니다. 사실 글꼴은 디지털 또는 아날로그 글꼴에 경계 상자가 있으며 경계 상자는 크기가 참조하는 것입니다.
DA01

41

글꼴의 "글꼴 크기"는 글꼴의 "em 높이"를 나타내며 글꼴의 특정 문자 높이와 반드시 같을 필요는 없습니다.

일반적으로 글꼴의 em 높이는 동일한 기본 아이디어를 따릅니다. 문자의 맨 아래와 같은 가장 낮은 자손에서 문자 g의 맨 위와 같이 가장 높은 어 센더 까지의 거리로 대략 설정됩니다 h.

보시다시피, 개별 문자 중 어느 것도 그 전체 범위를 다루지 않습니다.

디지털 글꼴의 경우 글꼴의 "em 높이"는 글꼴 디자이너가 선택한 것이며이 규칙을 전혀 준수 할 필요는 없습니다. 디지털 형식 디자이너는 em 크기에 대한 기초를 선택할 수 있습니다. 그러나 글꼴은 여전히 ​​적어도 대략 위에서 설명한 일종의 규칙을 따르는 경향이 있습니다. 예전에는 유형이 금속 블록으로 구성되어 있었을 때 "em height"는 해당 블록 중 하나의 높이였으며, 해당 서체의 문자뿐만 아니라 어 센더, 하강 및 악센트에 대해서도 충분히 높아야했습니다.

현재 많은 현대 서체에는 대문자와 같은 악센트도 포함되어 있습니다 (예 Ć:).이 악센트 는 전통적인 인쇄상의 어 센더 외부로 확장 되므로 이러한 문자 (및 다른 특수 문자)는 "em"의 최상위를 벗어납니다. 역사적 이유로 우리는 그것들을 허용하기 위해 em 크기를 조정하지 않고 em 크기를 유지하고 그것들을 확장시킵니다. 그런 악센트를 사용하는 타이포그래피 작가는 확장 할 수있는 공간이 있는지 확인해야합니다. 본문에는 줄 간격 이 적절합니다.

본문 텍스트 의 줄 간격 은 한 줄의 텍스트 내림차순과 그 아래 줄의 오름차순 사이에 남은 간격입니다. 즉, "글꼴 크기"에는이 줄 간격 측정이 포함되지 않습니다. CSS 필드의 영향을받을 수 있습니다 line-height. 여기서1.4즉, 줄 간격이 em 높이의 0.4 배이므로 전체 본문 텍스트는 줄 간격을 포함하여 em 높이의 1.4 배를 차지합니다. 다른 응용 프로그램에서는 줄 간격을 다르게 지정할 수 있습니다. 워드 프로세서는 종종 여러 개의 "단일"줄 간격으로 지정하지만 CSS와 달리 일반적으로 "단일"간격은 줄 간격이 아니라 일부 "기본"줄을 의미합니다. 응용 프로그램이 글꼴 파일의 메타 데이터를 기반으로 기본값을 설정하려고하는 경우 간격. 글꼴에 메트릭을 지정하기위한 여러 표준 (예 : 트루 타입, Mac 및 Windows / OS2 표준이 다름)이 있으므로 기본 줄 간격은 응용 프로그램과 운영 체제마다 다를 수 있습니다.

이제 디자이너 자신의 높이에 대해 예측 가능한 규칙을 따르 더라도 대문자 크기 (모자 높이) 또는 말하기 o(x 높이 또는 중간 선) 의 크기 는 다양하지 않습니다. 어 센더 높이와 관련하여 서체 사이를 자유롭게 폰트 패밀리 내에서, 이것들은 일반적으로 일관됩니다. 예를 들어, Times New Roman Bold 및 Times New Roman Regular는 동일한 em 크기에 대해 동일한 문자 크기를 가지며, 여기에는 오름차순, 내림차순, 모자 높이 및 x 높이가 포함됩니다.


2
예-규칙이 있습니다 (예 : 'g'의 맨 아래에서 'h'의 맨 위에 있음). 여전히 차이가 있으며 글꼴 형식은 디자이너가 이러한 규칙을 전혀 준수하지 않습니다.
thomasrutter

7

세로 막대 문자 ( '|')를 입력하여 측정하십시오. 상황을 올바르게 복제했는데 앤티 앨리어싱이 너무 흐려지지 않으면 22px 여야합니다.

22px는 유형 블록의 높이를 나타냅니다. 그러나 각 문자는 블록을 다르게 채 웁니다. 'g'또는 'q'는 22px의 하위 영역을 차지하고 'b'또는 'd'와 같은 대문자 및 소문자는 상위 부분을 차지합니다. '|' 유일한 (그렇지 않은 경우 중 하나입니다 완전히 22 픽셀의 공간을 채우기에만) 문자.

CSS 설정과 비교하는 방법을 모르겠지만 Photoshop에서 텍스트 높이를 해석하는 방법을 설명합니다.


1
또한 동일한 크기로 두 개의 글꼴을 설정할 수 있으며 종종 글자 자체가 아닌 것을 알 수 있습니다. 그들은 단순히 같은 '블록'크기를 가지고 있습니다.
DA01

3
파이프가 할당 된 총 공간을 항상 채우지는 않습니다. 형식 디자이너가 선호하는 것입니다. 어 센더의 상단과 하위의 하단과 일치하는 경우가 많지만 문자에 할당 된 공간은 훨씬 더 클 수 있습니다.
DA01

2
세로 막대 문자가 항상 글꼴의 em 크기 (예 : "전체 높이")와 같지는 않습니다. 실제로는 일반적으로 적습니다.
thomasrutter

2
세로 상자 그리기 문자 는 이론적으로 전체 높이를 가리켜 야합니다 (아마도 약간 겹치게됩니다). 그러나 이러한 문자를 포함하는 글꼴은 거의 없습니다. 일반적인 수직 막대 ( |)는 일반적으로 em 크기와 같지 않습니다. Microsoft 핵심 글꼴 (Arial, Georgia 등)에서는이 작업을 수행하지 않습니다.
thomasrutter

2
세로 막대 문자가 전체 높이를 채우지 않습니다. 대문자로 된 악센트 (예 : "Á")가 높아집니다. 자신을 비교하십시오 : "Á" "|"
znq

0

글꼴이 픽셀 단위로 측정되어 있습니까? 대부분의 시간 글꼴은 포인트 단위로 측정됩니다. 포인트는 1/72 인치입니다. 따라서 40pt 글꼴의 키는 40/72 "또는 5/9"입니다. 키커는 키가 큰 문자의 어 센더 상단에서부터 기준선 아래에 매달려있는 문자의 하위 자 하단까지의 치수입니다. 그렇기 때문에 위에서 언급 한 것처럼 x- 높이가 사용되는 경우가 있습니다. 그것은 소문자의 높이입니다.

어느 쪽이든, 불행히도 측정은 결코 정확하지 않습니다. 시도하고있는 것을 달성하기 위해 측정하고 파악 (및 / 또는 시행 착오)하면됩니다.


그러나 포인트는 물리적 유형 (인쇄, 조각, 조각 등)에만 관련됩니다.
e100

완전히 정확하지는 않습니다. 유형은 승천 자의 상단에서 하위의 하단까지 측정되는 것이 아니라 승강기 / 상승 자 높이와 상관 관계가 있거나없는 경계 상자로 측정됩니다. 이것은 유형이 블록 위에 놓인 납과 목재 유형으로 거슬러 올라갑니다. 이 블록의 높이는 유형의 레이블 크기를 나타냅니다. 따라서 12pt로 설정된 두 글꼴의 크기는 서로 매우 다를 수 있습니다. (나는 1pt가 전통적으로 1/72 인치가 아니라는 사실을 알게되지 않을 것이다 ...;)
DA01
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.