Font? px, pt, inch, pica, em, rem?!?!

시작하기에 앞서..

• 아티클에서 다룰 단위
  1. DPI - 1인치당 들어가는 픽셀의 수를 표현한 단위 (Dots per inch)
  2. pica - 파이카는 18세기에 만들어진 타이포그래피의 유닛 단위. 보통 1인치는 6분의 1로 나눈 값이다.
  3. px - 픽셀
  4. pt - 파이카를 12조각으로 나눈 단위입니다.
  5. em - 웹에서 부모요소의 상대적 크기를 갖는 단위 일반적으로 1em = 16px 으로 환산
  6. rem - em의 앞에 root(r)이 붙었으며 부모요소가 아닌 전체 root=html에서 지정한 값을 상대적으로 갖는 크기 단위

---

폰트는 어디서부터 쓰였을까? 적어도 모니터는 아닐 것이다. 폰트의 크기에 대한 개념은 활자시대에서부터 거슬러 올라왔으며 우리는 폰트를 이해하기 위해서 과거의 단위를 끌어와야한다.

---

인쇄물의 최소단위 'pt'

포인트(pt)는 타이포그래피에서 사용하는 가장 작은 인쇄 단위로, 파이카(pica)를 작게 자른것이다.

1 pica가 정의하는 길이는 다양하지만 보편적으로는 6분의 1 inch라고 생각하면 된다.

1 pica = 1/6 inch = 4.233 mm

그리고 포인트(pt)는 파이카를 12조각으로 나눈 단위이다.

1 inch = 6 pica

1 pica = 12 pt

1 pt = 1/12 pica = 1/72 inch = 약 0.3527 mm

 

Display 시대의 시작

pt 단위의 문제는 컴퓨터가 생기면서 시작되었다. 초창기에 만들어지던 모니터 디스플레이의 픽셀크기가 모두 달랐기 때문이었다.

그래서 Pixel의 크기와 물리적 단위인 inch의 고정된 관계를 만들어주기 위해서 논리적 단위를 만들게 된다.

 

1. 72 dpi의 정립

Xerox PARC 연구소에서 72ppi(pixels per inch)의 화면해상도를 가진 디스플레이를 표준으로 채택하게 된다.

그 이유는 ——————————————

위에서 설명한 1pt가 1/72 inch 인것에 착안하였다. 1pt의 크기가 1/72 inch라면 1 inch에는 총 72개의 pixel이 자리잡고 있는 것이기 때문이다.

그렇다면 72 ppi의 1pt는 1px이라는 결론이 나온다.

참고로 ppi(pixels per inch)와 dpi(dots per inch)는 서로 다른 개념이지만 최근에는 차이의 구분 없이 혼용되어 쓰이고 있습니다.

이 디스플레이 표준을 Apple에서 채택하게 되는데 그 이유는 그 당시 타자기 세대에서 널리 쓰이던 10 point 크기의 서체를 컴퓨터 스크린에서도 같은 값으로 같은 크기를 갖게 하겠다는 의도였다.

 

2. 96 dpi의 출현

반면 Microsoft는 96 dpi를 표준 해상도로 채택하게 된다.

그 이유는 ——————————————

인간이 컴퓨터 디스플레이를 볼 때는 책이나 문서를 볼때 보다 눈과의 거리가 약 1/3가량 더 멀리 본다고 주장했기 때문이다.

그래서 72dpi의 스크린에서의 글씨는 실제 작업자가 의도한 글씨의 크기보다 약 1/3가량 작게 보이기 때문에 그만큼 크게 보여야 한다는 것이다.

Microsoft는 이러한 문제를 해결하기 위해서 늘어난 거리만큼 모니터에서 글씨 크기를 키워 상대적으로 같은 글씨 크기를 지원하여 가독성을 높이겠다는 의도였다. 

3. 그럼 1 pt는 몇 px인데?

결국 디스플레이 속에서 1pt라는 개념은 해상도가 얼마냐에 따라서 px의 크기가 달라진다는 것을 알 수있다.

Mac: 1 inch = 72 px

Windows: 1 inch = 96px

Mac (72 ppi): 1 pt = 1 px = 약 0.3527 mm

Windows (96 ppi): 1 pt = 1 px * 96/72 = 약 1.3333 px = 약 0.4702 mm

 

Web Browser의 폰트 스케일

웹브라우저의 폰트 크기는 또 약간 다르다. Microsoft의 IE(Internet Exploer)의 경우 자사 제품이므로 96dpi의 해상도를 기준으로 하고있다.

하지만 Chrome이나 Safari의 경우에도 96dpi의 해상도를 기준으로 하는데 이는 CSS를 만들 당시에 96dpi를 기준으로 기획되었기 때문에 화면에서 4/3배가 된 픽셀크기를 가지게 된다.

과거에는 Web개발시 px 단위를 사용했지만 최근 반응형 웹사이트와 모바일에서 반응할 수 있게 하기 위해서 em,rem,%단위를 사용하고 있는 추세이다.

 

em

em이란 무엇일까? em은 rem과 같이 상대적인 크기를 지닌 단위로써 해당폰트의 대문자 M의 너비를 기준으로 하는 단위이다.

일반적으로 1em은 16px을 뜻하며 웹사이트에서 기본적으로 보여지는 폰트의 크기이다.

또한 상대적인 크기를 지닌 단위라고 하였는데 em의 경우 부모요소에서 지정한 폰트크기를 따라 변하는 단위이다.

1em = 16px , 1.5em = 24px 이런 식으로 사용된다.

 

rem

rem단위는 em단위와 대부분 같지만 단 하나 상대적인 요소가 부모요소가 아니라 r(root=html)요소에 상대적이라는 점이다.

em 단위는 부모로부터 폰트크기를 상속받기 때문에 같은 값이 설정되어 있다하더라도 단계가 깊어질 수록 폰트크기가 기하 급수적으로 크거나 작아진다.

이런 방식은 문제점은 부모 또는 조상 가운데 어떤 요소의 폰트 사이즈값을 변경할 경우 모든 자식과 자손요소도 그 영향을 받는다는 점이다.

그래서 예측하기 어렵고 계산하기 복잡하다는 단점이 있다. 물론 글꼴의 확대 축소를 유연하게 만들기 위한 목적으로 존재하기는 하지만 이러한 복잡성으로 개발자들은 이 방법을 잘 이용하지는 않는다.

이러한 단점을 극복하기 위해 html 요소에 기본 글꼴 크기를 지정해주면 rem의 경우 모든 글꼴의 크기의 변화를 em보다는 쉽게 예측 할 수 있다.