npm install --save-dev, -dev

SCSS 초기 환경 세팅 중 font 관련

글로벌 font size 설정

• 코드 보기

보통 이렇게 글로벌로 폰트에 대한 css를 만들어, font-size 및 font-weight, line-height까지 mixin으로 설정 하고 이를 사용한다.

밑에서는 h1, h2부터 h6까지 각 태그에 사용하는 폰트 사이즈를 사용한다.

font-height 관련 세팅

현재 글로벌 font size를 설정 시에, lien-height가 normal로 되어 있는 상황이었다.

@mixin font_4840 {
  font-size: 4.8rem;
  line-height: normal;
}

@mixin font_4860 {
  font-weight: 600;
  @include font_4840;
}

...

지섭님이 다음과 같은 피드백을 주셨다.

• line-height : normal은 약 1.2에 해당하는 값이다. 기본 값이긴 하지만, 현재 가독성 때문에 많이 사용하지 않는다.
• font-family에 따라 달라지기는 하지만, 최하 1.4 이상을 사용하게 될 것이다. 따라서 이 Mixin을 쓰면서 그 아래에다 또 line-height를 넣어서 사용하는 불상사가 발생할 수 있다.
• 그렇기 때문에 UX 팀에게 기본 line-height 값을 문의해서 기본 값으로 채워두는 것이 좋을 것 같다.

실제로 UXUI 팀에 문의 결과, line-height는 1.4로 사용하고 있다고 연락을 받고, 이를 수정하였다.

line-height의 경우는 부모에서부터 자식까지 inherited되는 값이고, 따라서 글로벌 CSS로 관리하는 것이 유리한 값이다. 실제로 line-height를 잘못 적용하는 경우 가독성이나 스타일에 변화가 있을 수 있기 때문에 무조건 UXUI 팀과 이야기해서 default 값을 글로벌로 설정해주는 것이 필요하다.

font-weight의 inheritance 문제