pt와 px단위를 혼용하지 맙시다

작업을 위해 디자이너나 기획자와 커뮤니케이션 하다보면 이런 말을 들을 때가 있습니다.

‘이 부분 폰트는 20pt로 해주세요.’

얼핏 이해가 가는 말이기도 하지만 사실 굉장히 혼란스러운 말입니다. 아마도 화자의 의도는 20px을 말한거라고 생각하지만, 혹시 포토샵의 세팅이 pt로 맞춰져 있고 그걸 기준으로 설명했을지도 모른다고 생각하면… 혼란스러워집니다.

그래서 글꼴 크기에 있어서 Point와 Pixel의 차이에 대해서 정리를 좀 해보려고 합니다.

일단 이미지부터 하나 보고 가시죠.


72dpi


96dpi


300dpi

‘포인트랑 픽셀이랑 똑같은거 아냐?’ 라고 생각하신 분들… 이렇게나 다릅니다.

Point

포인트 단위는 웹보다 먼저 탄생한 단위입니다. 주로 출판쪽에서 많이 사용되었습니다. 그래서 결론적으로, 포인트라는 단위는 웹과 잘 어울리지는 않는 단위입니다.

포인트라는 개념을 알기 전에 먼저 알아야 할 것이 DPI(Dot Per Inch)라는 것입니다. 인쇄를 할 때 1인치 안에 얼마나 세밀하게 점을 많이 넣느냐 하는 출력 품질에 대한 단위입니다. 출판에서는 보통 300dpi를 기준으로 잡습니다. 300dpi가 넘어가면 사람이 눈으로 점을 인지할 수 없다고 하거든요. (이 부분은 훗날 레티나 디스플레이라는 물건이 탄생하며 다시 주목 받는데… 이론적으로는 220.53dpi가 기준입니다.) 그래서 가급적이면 300dpi를 기준으로 작업을 하지만 항상 그렇게 할 수는 없습니다. 가끔은 200dpi나 150dpi로 작업을 하게 될 수도 있죠.

출력물을 기준으로 할 때, 포인트는 항상 같은 크기를 보장합니다. 72dpi든 96dpi든 150dpi든 20pt로 텍스트를 쓴다면 출력된 종이에서는 동일한 크기의 텍스트로 표시됩니다. 포인트는 그런 목적으로 사용되는 단위입니다.

Pixel

픽셀은 사실 원시적인 단위지만, 결국 최근에 와서는 가장 대중적으로 사용되는 단위가 되었습니다. 말 그대로 점의 개수를 이야기 하는거죠. 최종 산출물이 종이가 아닌 디지털 디스플레이가 되면서, 디지털 디스플레이 출력의 기본인 픽셀을 글꼴의 단위로 사용을 하게 되는 겁니다.

픽셀은 상대적으로 계산되지 않고 절대적인 값입니다. 20px은 항상 20개의 점 갯수만큼의 크기를 가지게 되는거죠.

실제로 비교해보면 이렇습니다.

포토샵에서 72dpi, 96dpi, 300dpi의 이미지를 준비했습니다. 각각 의미가 있는 수치들이죠.

각각의 이미지에 20pt와 20px로 텍스트를 입력해보면 이렇게 나오게 됩니다.


72dpi


96dpi


300dpi

그럼 무엇을 써야 하는가?

이건 뭐 논란의 여지가 있을까 싶습니다. 산출물이 인쇄물이라면 포인트를 쓰세요. 산출물이 웹이라면 픽셀을 쓰세요. 혼용하지 마세요.

“걔 허리 엄청 가늘대. 허리가 24센티래.”
“와 너 발 엄청 크다. 한 300인치 되겠는데?”
“자네 키가 몇인가?” / “네. 180밀리미터입니다.”

이 말들이 이상한 만큼 포인트와 픽셀을 혼용해 사용하는 것은 이상한 겁니다.