글꼴 크기

CSS에서는 폰트 크기 정하는 방법이 몇가지 있습니다. Px는 화면 해상도의 점 크기를 가지고 em은 각각 문서의 기본 글골 크기를 상대적으로 가집니다. rem은 html문서의 글꼴 크기를 가집니다.

폰트 단위

REM (Root EM) : html에 정의된 기본글꼴의 크기에 대하여 값을 가짐.
PX(Pixel) : 고정된 크기 단위 (1px는 컴퓨터 화면에서 점 1개와 같음)
EM : 웹 문서에서 사용되는 단위. (해당폰트의 대문자 M의 너비를 기준으로 함.)- 가변 단위
EX : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
PT(Point) : 고겅되 크기 단위 (주로 인쇄물에 사용됨)
Percent(%) : 기본글꼴의 크기에 대하여 상대적인 값을 가짐

화면 단위

vw : 뷰포트 너비의 1%
vh : 뷰포트 높이의 1%
vmin : 뷰포트의 중 작은 크기의 1%
vmax : 뷰포트의 중 큰 크기의 1%

더 많은 단위

w3c의 css3 스펙 중 distance unit

PX to EM 변환기

px와 em에 관해.

사람들은 주로 다음 두 가지 방법을 사용합니다. 아직은 … px, em
이 블로그 역시 em과 px를 이용하여 작성되었습니다. 저 역시도 아직도 px가 익숙하고 많이 사용하는 편이고 이글 적으면서도 px를 이용합니다. 이 글을 적으면서 공부하고는 “아 그렇구나~” 싶을 정도로 몰랐던 부분이기도 합니다. 그러면 저와 같이 밑의 차이점과 장단점을 배워 보겠습니다.

em과 rem은 왜 쓰는가?

상대적 길이 단위를 쓰는 이유는 물론 가변적 디자인을 하기 위해서이다. 유연한 디자인과 유지보수의 편리함. 또 어느 디바이스 어떤 상황에서도 사용자에게 같은 콘텐츠를 제공할 수 있다. 반응형 웹이나 웹 표준, 웹 접근성 모두 같은 맥락이라고 볼 수 있다. 자세한 내용은 인터넷의 많은 글에서 찾아볼 수 있다.

em과 rem의 차이점.

위의 설명처럼 em은 “웹 문서에서 사용되는 단위.”라고 하는데 가변적 단위입니다. 부모 요소가 어떤 사이즈냐에 따라 달라지기도 해서 자칫 잘못 사용하면 이상하게 보일 수도 있습니다. 예를 들어)

body {
  font-size: 14px;
}
div {
  font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

어떤 결과가 나오냐 하면

See the Pen rwaaMz by innks (@innks) on CodePen.

이렇게 디자인 된것이면 괜찮지만 대부분 이상하게 보일것입니다. 이런경우는 rem을 사용해서 디자인하는 것이 좋습니다.rem의 최상위 태그(요소)는 보통 html태그입니다. 예를 들어)

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

이렇게 디자인을 하면 일괄성 있게 사이즈가 통일 됩니다.

본문 글자 크기

아래 표에서 픽셀 (px)로 본문 글꼴 크기(부모 픽셀)를 선택하면 em과 % 부분이 변화되어 표시됩니다. 참고하세요.
도움말 : 기본 글꼴 크기는 대개 16px입니다.

출처 : [w3schools (중 px 크기 표)](https://www.w3schools.com/tags/ref_pxtoemconversion.asp)

마치며

이번에 적으면서 알게 된 것은 사이트 디자인을 하면서 두서없이 px나 em을 썼다는 것입니다. 보는 데로 수정해야겠다는 생각이 듭니다. 그리고 조금 더 많은 Size 조정 단위가 존재한다는 것에 놀랐습니다.

글꼴 크기 비교 지정하기