폰트 단위(px, pt) 완전 이해 가이드

px와 pt의 단위가 헷갈린다면 꼭 읽어보세요.

웹과 인쇄에서 폰트의 단위가 다른 이유와 상황별로 어떤 단위를 사용해야하는지 알기 쉽게 정리했습니다.

---

1. 디자인 단위가 혼란스러운 이유

웹과 인쇄 디자인을 함께 다루다 보면 px, pt, pica, ppi 같은 단위가 계속 등장한다. 같은 크기를 말하는 것처럼 보이지만 실제 출력 결과가 달라지면서 처음에는 꽤 혼란스러울 수 있다. 그래서 이번 글에서는 pt와 px의 차이, ppi 개념, 그리고 브라우저와 운영체제가 단위를 어떻게 해석하는지까지 전체적으로 정리해 본다.

2. PT(포인트)와 PICA의 역사적 기원

pt(포인트)는 인쇄 분야에서 사용하는 전통적인 단위로, pica(파이카)에서 파생되었다.
1785년 타이포그래피 시스템을 위해 만들어졌고, 1 pica를 더 작은 단위로 나누기 위해 12개의 pt로 나눈 것이 현재의 pt 개념이다.
즉, 1 pica = 12 pt, 1 pt = pica의 1/12이다.

 

3. 픽셀(px) 단위 이해를 위한 PPI 개념

픽셀이라는 단위를 제대로 이해하려면 먼저 PPI(Pixels Per Inch)를 알아야 한다.
PPI는 1인치 안에 몇 개의 픽셀이 들어가는지를 의미하는데, 예를 들어

• 10ppi → 1inch 안에 가로 10개, 세로 10개
• 20ppi → 1inch 안에 가로 20개, 세로 20개

처럼 표현된다.
물리적 1인치는 동일하더라도 픽셀 개수에 따라 픽셀 크기가 달라지기 때문에 기기마다 픽셀 크기가 서로 다르게 보이게 된다.

4. 픽셀 크기가 기기마다 달라지는 이유

픽셀은 절대 단위가 아니라 ‘얼마나 많은 픽셀을 해당 영역에 넣느냐’의 문제다.
ppi가 높을수록 픽셀 크기는 작아지고, ppi가 낮을수록 픽셀 크기가 커진다.
우리 눈에 더 촘촘해 보이는 기기일수록 ppi가 높은 것이다.

 

5. macOS가 72ppi를 선택했던 이유

 

과거 Mac OS는 72ppi를 표준으로 사용했다.
여러 기기마다 픽셀 크기가 다르다 보니 “폰트 크기”를 고정된 값으로 표현하기가 어려웠고, 이를 해결하기 위해 애플은 논리적 1인치(Logical Inch) 개념을 도입했다.

즉,
**‘72pt가 차지하는 크기를 1인치로 간주한다’**는 방식이다.
물리적 1인치(2.54cm)와는 별개로, 화면에서 표현되는 논리적 기준을 만든 것이다.

6. 72ppi에서 pt와 px의 관계

1point = 1/72 inch라는 정의 덕분에,
72ppi 환경에서는 1pt = 1px이 되었다.
이 구조가 만들어지면서 모니터의 10px은 인쇄물의 10pt와 비슷하게 보이도록 설계되었다.

7. Windows가 96ppi를 채택한 배경

Microsoft는 모니터를 보는 거리와 책을 읽는 거리가 다르기 때문에, 더 먼 거리에서는 더 높은 해상도가 필요하다고 주장하며 96ppi를 표준으로 채택했다.

• Apple: 1 inch = 72px → 1pt = 1px
• Windows: 1 inch = 96px → 1pt = 1.333px

결과적으로 동일한 10pt라도 플랫폼마다 실제 크기가 달라졌다.

 

8. 브라우저는 어떤 ppi 기준을 사용할까?

CSS 표준이 등장하면서 대부분의 브라우저는 96ppi를 기준으로 삼는다.

• IE → 96ppi
•  Safari(macOS) → 96ppi애플이 원래 72ppi였음에도 Safari는 96ppi를 쓴다.
  CSS가 웹 표준에서 96ppi를 기준으로 정의하고 있기 때문이다.
  
  

9. 웹에서는 왜 px를 사용하는가?

결론적으로 웹과 앱 UI에서는 px이 사실상의 표준 단위다.
pt는 인쇄 단위라서 화면 환경에서는 일관성을 유지하기 어렵다.

• Figma / XD / Sketch → 기본 단위 px
• Photoshop → pt 기반이라 px로 변경 필요
  
  

10. 폰트 크기를 정할 때 가장 중요한 기준

폰트 크기를 지정할 때는 보통 본문 크기를 기준으로 잡는다.
콘텐츠 중 가장 오래 읽는 부분이기 때문이다.
본문 크기를 기준으로 제목·소제목·표·버튼 등을 비례적으로 설정하면 전체 디자인 흐름이 자연스럽게 맞춰진다.

 

11. 가독성이 좋은 본문 폰트 크기(px)

거리·ppi·화면 크기 등 다양한 요소를 고려해야 하지만, 결론만 말하면 12~18px 범위가 가독성이 좋다.

 

• 일반 본문: 14~18px
• 글이 많거나 디자인적으로 작아야 할 때: 14~15px
• 고령층 대상 / 가독성 강화 필요: 17~18px
  또한 웹 접근성 때문에 10px 미만 텍스트는 일부 브라우저에서 렌더링 되지 않는다.
  
  

12. 고해상도 디스플레이에서 CSS px가 달라지는 이유

 

요즘 디스플레이는 레티나(HiDPI)처럼 픽셀 밀도가 높다.
그래서 우리가 CSS에서 사용하는 px은 실제 물리적 픽셀과 동일한 개념이 아니다.
즉, CSS px = 논리적 픽셀이다.

예를 들어,
아이폰 2배율 디스플레이에서는
CSS 1px = 물리 픽셀 2×2
를 사용해 표현한다.

그래서 같은 16px이라도 기기마다 선명함이나 두께가 다르게 보이게 된다.

13. 반응형 웹에서 rem/em 단위를 사용하는 이유

px 단위는 화면 크기를 고정하지만, 사용자 접근성 기능(글자 확대 등)에 제대로 반응하지 않는다는 단점이 있다.
반면 rem이나 em은 기준 폰트 크기에 비례해서 변하기 때문에, 접근성과 반응형 디자인 모두에 유리하다.

그래서 최근의 디자인 시스템이나 CSS 프레임워크는
px 대신 rem 기반 폰트 시스템을 표준으로 사용하는 경우가 많다.

14. 모바일에서 추천되는 텍스트 크기

같은 px이라도 모바일에서는 더 작게 느껴지기 때문에 모바일 UI에서는 조금 더 큰 크기를 사용하는 것이 일반적이다.

• 모바일 본문: 최소 15~16px 이상
• 모바일 타이틀: 18~24px 권장
  Google Material Design에서도 가독성을 위해 14px 미만 텍스트는 사용하지 않는 것을 권장한다.
  
  

15. 정리: px와 pt는 용도가 완전히 다르다

• pt는 인쇄 전용 단위
• px는 화면(디스플레이) 전용 단위
• 현대 브라우저는 모두 96ppi 기반
• 실무 UI 디자인은 px → 이렇게 접근해야 통일성이 생긴다

---

단위 개념을 정확히 알고 있으면 기기별 화면 대응이 훨씬 쉬워지고,

폰트 선택이나 가독성 전략에서도 안정적으로 디자인을 할 수 있다.