HTML, CSS

font-weight 제대로 알고가기 :: 마이구미

mygumi 2017. 8. 29. 00:58
반응형

이 글은 font-weight 속성에 대해 다뤄본다.

웹폰트를 사용하는 과정을 통해 font-weight 속성에 대해 설명한다.

웹폰트를 사용하기 위한 기본적인 @font-face와 같은 속성을 이해하고 오면 좋다.


font-weight는 무엇인가?

공식 문서를 보거나, 단순히 짐작으로도 알 수 있을 것이다.

다음과 같다.


The font-weight CSS property specifies the weight (or boldness) of the font.

=> 폰트의 가중치나 굵기를 명시한다.


본인 또한 단순히 짐작만으로 판단하여 굵기라고 판단하면서 필요할 때 사용했다.

하지만 웹폰트를 사용하는 과정에서 무식이 들어났다.


웹폰트를 사용하기 위한 기본적인 코드는 다음과 같다.


@font-face {
    font-family: 'Helvetica Neue';
    src: url('URL') format('TYPE');
    font-weight: 100 ~ 900;
}


웹폰트를 등록하고, 단순히 영역마다 font-weight 속성을 통해 굵기를 다르게 주려고 했다.

하지만 자세히 보니 폰트 파일의 종류가 여러개 존재했다.

굵기별로 나누어진 파일들이 존재했고, 각 폰트 파일을 따로따로 등록하는 모습을 볼 수 있었다.


@font-face {
    font-family: 'HelveticaNeueLTStd-Hv';
    src: url('fonts/HelveticaNeueLTStd-Hv.otf') format('truetype');
}

@font-face {
    font-family: 'HelveticaNeueLTStd-Md';
    src: url('fonts/HelveticaNeueLTStd-Md.otf') format('truetype');
}

@font-face {
    font-family: 'HelveticaNeueLTStd-Bd';
    src: url('fonts/HelveticaNeueLTStd-Bd.otf') format('truetype');
}


본인은 왜 똑같은 글씨체인데 파일을 따로 처리해야되는거지?

하나의 글씨체를 기준으로 잡고 굵기를 주면 되지 않은가? 라는 의문이 들었다.


의문의 답을 찾은 결과는 여전히 굵기가 다른 폰트 파일은 따로 처리를 한다.

다음 코드를 실행해보면 알 수 있다.


@font-face {
    font-family: 'Helvetica Neue';
    src: url('fonts/HelveticaNeueLTStd-Light.otf') format('truetype');
    font-weight: bold;
}


굵기가 얇은 글씨체를 적용한 후, font-weight 속성을 통해 굵게 하려고 해도 원하는 굵기가 나오지 않는 것을 확인할 수 있다.

하지만, 웹폰트를 사용함에 있어, 조금 더 효율적인 코드를 볼 수 있었다.


@font-face {
    font-family: 'Helvetica Neue';
    src: url('fonts/HelveticaNeueLTStd-Hv.otf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('fonts/HelveticaNeueLTStd-Md.otf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('fonts/HelveticaNeueLTStd-Bd.otf') format('truetype');
    font-weight: 700;
}


위와 같이 폰트 명칭을 동일하게 한 모습을 볼 수 있다.

그리고 src, font-weight 속성만 다른 것을 확인할 수 있다.

코드의 의미는 가중치 100을 사용할 때는 HelveticaNeueLTStd-Hv.otf 파일을 불러온다.

400일 경우에는 *-Md.otf 파일을 불러온다는 의미가 된다.


가중치에 있어, 발생하는 이슈는 휴리스틱 기법을 통해 처리된다.

이 부분은 한글화가 되어있으니 공식 문서를 참고하길 바란다.

https://developer.mozilla.org/ko/docs/Web/CSS/font-weight


.normal {
    font-family: 'Helvetica Neue';
    font-weight: 400;
}
=> *-Md.otf 폰트 적용

.bold {
    font-family: 'Helvetica Neue';
    font-weight: 700;
}
=> *-Bd.otf 폰트 적용


웹폰트를 사용하지 않고 지원하는 폰트는 굵기를 입히고 싶다면, 단순히 font-weight 속성만을 사용하면 된다.

그렇기에, 단순히 굵기를 명시해주는 것처럼 보인다.

하지만  웹폰트를 사용하지 않고, 지원되는 폰트를 사용할 때도 마찬가지이다.

위와 같이 font-weight 속성은 단순히 글씨체의 굵기를 명시하는 것보다는 그 가중치에 맞는 폰트를 가져오는 것이다.


반응형