in CSS, 웹 디자인, 추천/리뷰

pt, px, em, % 비교표

웹디자인을 하면서 글꼴(폰트) 크기를 표현하는 방법에는 pt, px, em, % 가 있다. 나는 이미지 사용이나 기존 테이블 레이아웃을 할 때의 습관으로 px 를 주로 사용하는 편이다. 하지만 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있다.

REEDdesign 사이트에 이들 수치에 대한 비교표가 있다.

픽셀과 포인트, em의 비교표

댓글 남기기

16 Comments

  1. 해외에서는 em이 표준으로 자리잡아간다고 하더군요. pt는 모니터 해상도에 영향을 많이 받고, px는 mac과 linux에서 예상치 못한 결과를 초래한다고 하네요. ^-^

  2. 네.. 한참 px 쓰다가 당황스러운 적이 있어서요… pt로 곧 바꿨던 것으로 기억함니다.. 금방 이야기 듣고는 em으로 변경했습니다. 모니터 해상도에 영향을 받는다라… 곰곰히 생각을 해 봐야겠습니다.

  3. 윽.. 전 예전에 한참 pt로 쓰다가
    언젠가 (아마도 F모에이전시) 다른 코더들이 px을 추천해주길래 px로 다 바꾸어서 썼는데..
    이제 다시 또 em으로 바꾸어야 겠네요@_@
    회사에서 포인트 비교하려구..
    저것과 비슷한 표를 로컬에 만들어 두었는데
    전 미리보기식으로 만들었어요.. 그래서 표가..
    밑으로 갈수록 대빵 만해졌답니당… 으흐흐

  4. 저도 사실 어제서야 em으로 수정했답니다.
    기본폰트 크기를 12px로 쓰다가 0.75em으로 변경하니 어색하더군요.

    해외 사이트들은 폰트 뿐만 아니라 div 박스나 span에서 활용하고 있더군요.

  5. em이 표준으로 잡아간다는것에대한 문서 혹시 링크 가능할까요? 그런것에 대해 논하는 곳을 알고싶어요~ 우리나라에선 거의 전무하다 시피한 부분이라서요.
    좋은정보 감사합니다!

  6. WCG(Web Standards Group)에 가시면 관련 내용을 찾을 수 있습니다.
    WCG는 로그인을 해야 포럼 내용을 확인할 수 있기 때문에 링크가 안돼네요.

    간단한 절차에 따라 가입하시고 WCG의 회원이 되세요~ 어쩌면 당신 한국의 3번째 회원인 될 수도 있답니다. 🙂

  7. 일몰님 / 제가 일몰님 블로그 버튼 만들어 논 거 있는데, 멜로 한번 보내드릴까요?

    WP 일몰 블로그의 파비콘을 사용했답니다. ^^;

  8. em 의 결정적인 문제점을 발견했어요. IE 5.5 이하에서 1em 의 크기가 지나치게 큽니다. 1em 의 크기가 지금의 크기가 된건 IE 6.0 에서부터인듯해요.

  9. 요즘 스팸글이 많기 때문에, 1주 전에 작성한 글에 답글을 달면 일단 조정상태로 대기시키는 플러그인을 설치했답니다. ^^;

    바로 IE5.5를 설치하고 테스트해봐야 겠습니다. 좋은 정보 가르쳐주신 likejazz님 감사합니다.

  10. 12년이 지난 지금…
    여전히 px 와 pt를 사용하고 있네요
    css에서 디자인용으로는 em도 조금씩 사용은 하는데 거의 모든 작업은 px와 글자는 pt를 씁니다.
    20년 동안 대세와 표준이 되는것들의 흐름을 지켜본결과
    가장 많이 사용하는게 표준이 되네요
    가장많이… 가장많이가 뭐가 있을까..
    html, jquery, php, 안드로이드, 앞으로는??
    3D프린터 와 AR!!, 혁명이 일어날 것입니다.
    언론과 일반인이 아는 정도를 초월하는..

Webmentions

  • gildong's Web doodles 10월 31, 2017

    div 크기 단위 px 와 em 의 차이점…

    웹표준을 준수하기 위해 CSS 를 공부 중이다.이전까지는 아주 단순히 화면에 나타나는 위주로만 구성하다가 이제 웹표준에 맞춰 정식으로 적용해보려 한다.그중 가장 사용빈도가 많은 태그인…