폰트 스타일을 적용하는 것은 시간이 지나면서 점점 까다로워졌습니다. 그 이유는 디바이스의 화면 크기가 예전에 비해서 다양해졌기 때문인데요, 서로 다른 화면 크기에서도 디자인을 유지하는 팁이 있어서 공유합니다.
폰트 크기 적용 방법
Font Size Idea: px at the Root, rem for Components, em for Text Elements
- via CSS-Tricks
px는 가장 root 단위에서 사용하고 rem은 컴포넌트에서 사용합니다. 그리고 em은 하위 글 속성에 적용하는 것이 좋다고 하네요.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
- via www.w3schools.com
그리고 보통의 경우 기본 글꼴 크기는 16px 로 설정되어 있습니다. 이를 기준으로 1em이 설정되구요.
rem과 em의 차이는 rem은 가장 Root 단위의 글꼴을 기준으로 즉, body의 글자 크기를 기준으로 한 값입니다. 그리고 em은 부모 속성의 글자크기에 대한 상대적인 값이 되는 거죠. 잘 알고 활용하면 유용하게 쓸 수 있습니다.
글꼴 두께 조절 방법
글꼴은 font-weight로 조절하는데요. bold, normal 이외에 다음과 같이 상세하게 글꼴 두께를 조절할 수 있습니다.
웹 디자인 시 폰트 크기 적용 방법 px, rem, em의 이해저작권 없는 무료 한글 폰트 소개합니다. 서울 서체 - 한강체, 남산체직업 경제 정보100 Extra Light or Ultra Light
200 Light or Thin
300 Book or Demi
400 Normal or Regular
500 Medium
600 Semibold, Demibold
700 Bold
800 Black, Extra Bold or Heavy
900 Extra Black, Fat, Poster or Ultra Black
- via www.webtype.com