외부 에디터의 스타일 제한을 진행하면서 글꼴 크기의 pt px 정리가 필요했다.
pt (포인트)
- 정의: 1pt는 1/72인치입니다. 물리적인 크기
- 화면 해상도에 관계없이 일정한 물리적 크기를 유지.
- 12pt 글꼴은 대략 1/6인치의 높이
px (픽셀)
- 정의: 1px는 화면에 표시되는 한 점
- 화면의 해상도에 따라 달라지는 디지털 측정 단위
- 화면의 해상도에 따라 실제 크기가 달라질 수 있다.
- 고해상도 디스플레이에서는 12px 글꼴이 상대적으로 작게 보일 수 있다.
고정된 하나의 글자크기만 사용가능하도록 수정중이었다. 하나의 글자크기만 선택가능하도록 변경했지만, 눈에 보이는 글자크기가 화면정의서에 있는 크기보다 더 커보이는 문제가 있었다. line-height가 문제인지 이것저것 보다가 결국 디자이너분께 물어보니 단위가 문제였다.
지금까지 폰트 크기 설정을 따로 해본적이 없다보니 단위를 생각하지 못했다.
px,pt 한글자 차이지만 크기 차이는 분명했다.
맥과 윈도우
초창기 맥은 프린트와 같은 해상도를 지원하기 위해, 1pt = 1px 가 되도록 72 dpi를 채택했다. 하지만 윈도우는 모니터에서는 더 확대되어 보여야 된다고 생각해 4/3배를 한 96dpi를 채택했다.
- 맥: 72 dpi
- 윈도우 : 96dpi
- 웹 브라우저 : 96dpi
- CSS : 96dpi
1 inch 에 맥은 72px, 윈도우는 96px이 있다.
1pt = 1/72 inch 이므로
72pt에 대해 맥은 72px, 윈도우는 96px로 표현한다.
웹 브라우저의 해상도는 96dpi를 사용하므로,
12pt X 4/3 = 16px로 표현된다.
디자인 16px
CSS 또한 96dpi 이므로 16px가 요청되었다면 스마트 에디터에서는 12pt가 요구된 것과 마찬가지이다.
나는 pt와 px 단위를 보지 못하고 16px가 아닌 16pt를 적용하려 했다.
16pt는 곧 21.3333..px 이므로
당연히 16px 보다 크기가 커보일수밖에 없었다.
- pt, px의 차이, 맥과 윈도우의 해상도 차이를 알게되었다.
- 단위에 신경쓰자
be_zion