CSS및 HTML에서 글꼴 크기(폰트 크기, font size)의 표시단위는 Keyword - Point(pt) - Pixel(px) - em - Percent(%)등이 있습니다. 표시단위는 크게 절대 단위와 상대적 단위로 나뉘게되는데 pt는 절대 단위이고 em과 % 그리고 px는 상대적 단위 입니다. 예전에는 px와 pt가 주로 사용되었는데 요즘 들어서 em의 사용이 늘어가는 추세인것같네요. 제가 처음 홈페이지를 만들기 시작했던 10년전에는 pt를 먼저쓰다가 px가 마음에 들어서 px만 사용했던 기억이 있습니다. 제가 전문적으로 홈페이지 제작에 대해서 배운게아니고 취미로 인터넷 이곳저곳에서 찾아다니며 배운거라서 미흡한 글이 될 가능성이 많겠지만 최대한 아는한도 내에서 설명해 보겠습니다.

1. Keyword

  절대 값과 상대적인 값을 둘다 포함하고있는 방식입니다. xx-small, x-small, small, medium, large, x-large, xx-large 와 같은 절대 값이있고 상대적으로는 smaller, larger가 있습니다. 각 값사이의 크기 편차가 크고 값들이 한정되어 있어서 세부적으로 글꼴크기를 조정할 수 없습니다.

2. Point(pt)

  1포인트(point) = 1/72in로 정의되는 절대 단위입니다. 여러곳에서 사용하지만 브라우져별로 상이한 결과물을 보여주므로 사용을 지양하는게 좋습니다.

3. Percent(%)

  백분율은 기본 글꼴 크기에 대해 상대적으로 값을 지정합니다. 일반적인 브라우저에서 100%=16px과 같습니다.

4. em

  해당 글꼴의 대문자 M의 너비를 기준으로 상대적인 크기를 표시하는 단위이며 보통 브라우저들은 기본글꼴이 16px/1.0em/12px 으로 지정 되어 있습니다. 이 방식은 요즘들어 가장 많이 사용되는 방식입니다. 저도 이방식을 사용하고있습니다.
em 이나 %같은 상대적인 단위들을 사용 할 때 주의할점은 자신보다 바로 한단계 위 지점에서 종속된다는 겁니다.

<div id="font1" style="font-size:1.4em"> em test font1 <div class="font2" style="font-size:1.4em"> em test font2 </div> </div> em test font1 em test font2

<div id="font1" style="font-size:1.4em"> em test font1 <div class="font2" style="font-size:1.0em"> em test font2 </div> </div> em test font1 em test font2

  위와 같은 소스에서 font2는 기본글꼴의 1.4em이 아니라  font1의 1.4em으로 표시됩니다. 둘을 같은 크기로 표시하려면 오른쪽과 같이 font2부분의 글꼴크기를 1.0em으로 바꿔 주면됩니다.
  2010/02/02 - [Web/Tip] - 복잡한 em을 쉽게 입력하는법 - Em Calculator  이 글을 보시면 쉽게 em을 입력하는 방법을 알 수 있습니다.

5. Pixel(px)

  픽셀단위로 글꼴 크기를 지정합니다. 상당히 세세하게 조절이 가능합니다. 문제점은 IE6.0에서 줌인 줌아웃기능으로 글꼴크기 조정이 안된다는 문제가있고 모니터 크기와 해상도에 따라서 픽셀의 크기가 달라지게 되므로 다른 크기를 갖게됩니다.

6. 기타 다른 단위들

mm : 밀리미터(millimeter) 절대 단위입니다.
cm : 센치미터(centimeter) 절대 단위입니다.
in : 1인치(inche) = 2.54cm라고 정의되는 절대 단위입니다.
pc : 1피카(pica) = 12pt라고 정의되는 절대 단위 입니다.
ex : 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 표시하는 상대적 단위입니다.

7. Keyword - Pixel(px) - Point(pt) - Em - Percent(%) 비교표

P/S. MS워드에서 자료수집해가면서 4시간동안 작성하던글이 갑자기 외계어로 바뀌면서 날라가서 다시 작성했네요. 그래서 좀 허술한 글이 되어버리고말았습니다.