CSS font 속성과 %, em, rem 핵심 정리

 

CSS font 속성 요약과 함께 font-family로 웹폰트 쓰는 방법, 반응형 폰트 크기 관리 방법에 대해 정리해보겠습니다.

 

폰트의 속성이라고 하면, 디자인된 폰트를 적용하는 것과 폰트의 크기( px, %, em, rem)가 가장 중요할 것 입니다.

 

웹폰트를 적용하는 것은 알고 보면 어렵지 않지만, 오히려 폰트의 크기를 반응형으로 생각하는 것이 처음엔 헷갈릴 수 있습니다.

 

따라서 폰트와 관련한 CSS 속성들을 알아보되, 반응형 폰트 크기에 대한 정리에 중점을 두고 글을 시작해보겠습니다.

CSS font 속성들

 

• font-family : 웹폰트를 적용할 때 쓰이며 아래와 같이 적용하면 됩니다.

 

HTML

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;700&display=swap" rel="stylesheet">

 

 

CSS

 

body{font-family: 'Noto Sans KR', sans-serif;}

 

 

• font-style : 이탤릭체와 같은 폰트의 스타일을 설정하거나 부모의 폰트 스타일을 상속하는 inherit를 설정 할 수 있습니다.
• font-variant : 이건 좀 생소할 수 있는데, 알파벳 글자의 디테일한 모양을 설정 할 수 있습니다.
• font-weight : lighter, normal, bold, bolder 또는 숫자로 텍스트의 두께를 설정할 수 있습니다. 보통 400이 기본값이며 100단위로 굵기 설정이 가능합니다.
• font-size : px, %, em, rem 등으로 폰트의 크기를 설정할 수 있습니다.

 

여기서 폰트 사이즈를 좀 더 자세히 들어가 보겠습니다.

 

크롬을 비롯한 웹브라우저의 기본 폰트 사이즈는 16px입니다.

 

아무런 설정도 하지 않으면 본문은 16px이라는 의미입니다. 여기까지는 쉽습니다.

%, em 이해하기

 

그럼 %, em, rem에 대해서 알아보겠습니다. 한 번 알고나면 어렵지 않으니 찬찬히 읽어보세요.

 

%와 em은 부모 요소에 대한 상대적인 크기입니다.

 

만약 font-size를 60%나 0.6em으로 설정한다면, 부모 요소의 폰트 크기의 60%로 설정되는 것입니다.

 

 

rem 이해하기

 

rem은 최상위 요소인 html태그에 대한 상대적인 크기입니다. 

 

앞서 아무것도 설정하지 않은 기본 폰트 사이즈는 16px이라고 했었죠? 2rem으로 설정한다면 16x2 = 32px이 됩니다.

 

rem은 최상위 요소를 기준으로 하기 때문에, 반응형 웹을 제작할 때 일관된 규칙으로 폰트를 설정하기에 좋습니다.

 

왜냐하면 폰트를 px로 설정하면 일일이 설정해야하고, 부모를 기준으로 하는 %나 em 또한 부모의 폰트 크기를 관리해야하는 번거로움이 있기 때문입니다.

 

 

text 요소에 대한 속성을 크게 크게 나눠서 핵심을 정리한 글도 작성해두었으니 참고해보세요.

 

CSS text 속성 요약 정리

 

 

여기까지 CSS font 속성 요약과 함께 font-family로 웹폰트 쓰는 방법, 반응형 폰트 크기 관리 방법에 대해 정리해보았습니다. 읽어주셔서 감사합니다.