Font Size(Unit 단위) #1

Font Unit (폰트 단위 크기 비교)

텍스트 크기를 지정하는 CSS 속성은 font-size입니다.
크기 다음에는 항상 측정 단위(unit of measurement)를 사용합니다.
예를 들어,font-size : 1em; 이 속성에는 주는 값과 크기 단위가 텍스트의 크기를 결정하는데, CSS 는 어지러울 정도로 많은 단위를 지원하고 있습니다. 픽셀(px), 인치(in), 센티미터(cm), 퍼센트(%), 밀리미터 등등..
이러한 측정 단위 가운데 인쇄물에 주로 쓰이던 pc(pica 의 줄임말로, 1pc 는 12pt), pt(point 의 줄임말로, 1pt 는 1/72인치), in(inch 의 줄임말) 등등은 웹 페이지에서는 제대로 동작하지 않는데, 모니터마다 달리 보일 수 있기 때문입니다.
하지만 인쇄용 페이지를 위한 스타일 시트를 만들 때는 pt 를 단위로 사용하기도 합니다.
컴퓨터 모니터에 표시되는 텍스트의 크기를 설정할 때에는 px(pixel 의 줄임말)이나 크기 지정 키워드 em, 퍼센트(%) 를 사용합니다.
이번 포스팅에서는 그 동작 방식에 대해 알아보도록 합니다.

픽셀(pixel, px)

픽셀로 값을 지정하면 이해하기 가장 이해하기 쉽습니다. 브라우저 설정과 아무런 관계가 없기 없기 때문입니다.
가령 <h1> 서체 크기를 36픽셀로 지정하면, 웹 브라우저는 텍스트 높이를 36픽셀로 설정하고 표시합니다. 이는 어떤 브라우저나 컴퓨터에서 보더라도 일관성있는 결과물을 만들 수 있기 때문입니다.

픽셀과 레티나 디스플레이

애플이 아이폰에 레티나(Retina) 디스플레이를 탑재하기 시작하자 아이폰 사용자는 그 선명함에 환호했습니다.
레티나 디스플레이는 단위 인치당 표시 픽셀 밀도를 높여서 이미지의 선명함을 개선했습니다. 일반적인 컴퓨터에서 인치당 픽셀 밀도는 72-100 픽셀 정도이지만, 레티나 디스플레이의 경우에는 224 에 달합니다.
레티나 디스플레이 상에서 동작하는 브라우저는 지정된 픽셀 값에 2를 곱하여 표시합니다.
즉, 텍스트의 크기를 16픽셀로 지정한 경우, 레티나 디스플레이를 사용하는 장치에서는 실제로는 32픽셀로 표시된다는 것입니다. 이는 픽셀 밀도가 그처럼 높은 디스플레이에서 16픽셀로 텍스트를 표시하게 되면 글자가 너무 작아져서 읽을 수 없을 것입니다.

키워드를 사용한 조정법

CSS 는 기본 텍스트 크기를 기준으로 텍스트 크기를 지정할 수 있도록 하는 키워드들을 제공하고 있는데, xx-small, x-small, small, medium, large, x-large, xx-large 가 바로 그것입니다.
이 키워드는 font-size: large 와 같이 사용할 수 있습니다.
medium 키워드를 사용하면 텍스트 높이는 브라우저의 기본 서체 크기와 같아지게 됩니다. 다른 키워드들은 기본 서체 크기를 기준으로 하여 얼마만큼을 더하거나 줄여서 텍스트 높이를 계산합니다.
그런데 얼마를 더하거나 줄이는지는 일정치 않습니다. 기본적으로 xx-small 은 브라우저의 기본 서체 크기가 16px 이라고 가정했을 때 9px 쯤입니다. x-small 은 10px, small 은 13px, large 는 18px, x-large 는 24px, 그리고 xx-large 는 32px 입니다.
키워드로 지정할 수 있는 텍스트 크기는 제한적이어서, 일곱 가지만 사용할 수 있습니다. 텍스트 크기를 좀 더 자유롭게 제어하고 싶다면, 다음부터 설명할 옵션들을 사용하는 것이 좋을 것입니다.

퍼센트(%)

키워드와 마찬가지로, 퍼센트 값도 브라우저가 정의한 기본 텍스트 크기를 기준으로 합니다. 하지만 키워드를 사용해 크기를 지정할 때보다 훨씬 더 세밀하게 조정할 수 있습니다. 앞서도 언급했지만 모든 브라우저는 기본 텍스트 크기가 미리 프로그램되어 있으며, 그 값은 대개 16px 입니다.
그리고 이 값은 브라우저의 환경설정 메뉴에서 조정이 가능하며 프로그램되어 있는 값이 어떻게 설정되어 있건 간에, 100% 는 바로 그 기본 서체 크기와 동일합니다. 따라서 대부분의 브라우저에서는 CSS 속성의 값을 100% 라고 설정하면, 16px 이라는 뜻입니다.
만일 사용자가 특정한 서체 크기를 일반적인 텍스트 크기의 두 배로 하고 싶다면 font-size: 200%; 라고 하면 됩니다. 기본 텍스트 크기보다 살짝 작게 하고 싶다면, 90% 값을 주어 조금 줄이면 됩니다.
위의 예는 매우 직관적이지만, 그렇지 않은 경우가 많기 때문에 주의를 요합니다. CSS 를 다뤄봤다는 가정하에 말씀드리지만 서체 크기(퍼센트 단위 사용시)는 계승되는 속성입니다.
따라서 어떤 태그의 하위 태그는 상위 태그의 서체 크기를 계승하게 됩니다. 그래서 100% 의 실제 값은 태그가 font-sizs 를 계승할 경우 달라질 수 있습니다.
예를 들어, 서체 크기가 200% 로 설정된 <div> 태그가 있다고 가정해 봅니다. 그럼 그 값은 브라우저의 기본 텍스트 크기의 두 배로 32px 에 해당하며, 그 <div> 안에 있는 모든 태그는 바로 그 텍스트 크기를 계승하여, 자기 텍스트 크기를 계산하는 기준으로 삼게 됩니다. 따라서 <div> 안에 있는 태그에게 100% 란 바로 32px 이 됩니다. 그래서 <div> 안에 <h1> 태그가 있고 그 서체 크기가 100% 로 설정된 경우 기본 텍스트 크기의 두배인 32px 로 화면에 표시되게 됩니다.

em

퍼센트를 이해했다면, em 도 이해한 것이나 다름 없습니다. 같은 방식으로 동작하지만, 많은 웹 디자이너들은 em 이 타이포그래피에서 유래한 단위라서 선호하기도 합니다. em 이라는 단어는 인쇄물을 위한 타이포그래피에서 연유한 것으로 특정 서체의 대문자 M의 크기를 기준으로 합니다. 하지만 웹 세상에서 em 은 애초의 의미를 잃어버렸습니다. 여기서 em 이 기준으로 하는 크기는 기본 텍스트 크기입니다.
따라서 1em 은 100% 와 같습니다. 그러므로 퍼센트 값은 단순히 em 값에다 100 을 곱한 값이라고 생각해도 무방합니다.
따라서 .5em 은 50% 이고, .75em 은 75% 이며, 3em 은 300% 입니다.
계승과 관계된 부분도 % 와 동일합니다.

Jaehee's WebClub