font-weight: 700 폰트 설정 글꼴 두께를 숫자로 표시하는 이유
워드프레스 테마 편집기에서 스타일시트(style.css)를 수정하다가 티스토리 블로그의 HTML/CSS 편집에선 볼 수 없었던 어떤 코드를 발견하게 됩니다.
font-weight: 700; 바로 이것인데요. 숫자로 표시한 글자 무게, 이런 것 때문에 당황할 수도.
티스토리에서는 font-weight(폰트: 글꼴 두께) 설정 시 normal과 bold 두 가지만 주로 사용했으나 워드프레스 블로그 스타일시트에 쓰여있는 700이라는 수치가 얼마 정도의 글자 두께인지 상상이 되지 않았습니다. 그래서 공부해본 결과를 적어놓으면 도움될 듯하여 이 글을 쓰기로 했습니다.
아래는 어느 외국 CSS 사이트의 글을 읽고 알기 쉽게 정리해본 내용입니다. 폰트 설정으로 고민하는 사용자는 참고하시기 바랍니다.
font-weight(글꼴 두께) 미묘한 호환성 문제: lighter text(얇은 글씨체)는 100-900 범위 정확히 어디에서 bold text(굵은 글씨체)로 바뀌나요?
font-weight는 글꼴의 무게(굵기)를 설정하는 뜻입니다. normal이 디폴트(기본값)입니다. 여기서 문제는 폰트(글꼴) 자체에 하나 이상의 무게 단위가 있어야 한다는 것입니다. 그것이 없으면 글씨를 굵게 만들 수 없습니다.
완전히 안전한 굵기의 볼드체를 원하면, 그냥 font-weight: bold를 사용하고 브라우저가 보여주는 모든 것을 받아들이세요.
모험적인 경우, 100-900 값을 사용할 수 있습니다. 매우 가벼운 것부터 매우 무거운 것까지 9가지의 다른 웨이트(무게)를 주기로 되어있습니다. 9가지 속성을 지원하는 폰트는 거의 없지만, 일부 글꼴은 4가지 또는 5가지 속성을 지원합니다.
font-weight: 400은 normal과 같고, font-weight: 700은 bold와 같습니다. 마지막으로 이 상댓값은 사용자가 정의한 절댓값 속성에 따라 텍스트를 기본 굵기보다 한 단계 굵게 또는 가늘게 만듭니다.
테스트 케이스의 경우 Windows 용 Segoe UI와 Mac 용 Helvetica Neue를 사용했습니다. Segoe UI에는 4가지 가중치가 있고 Helvetica Neue는 5가지가 있습니다. 무게가 두 개만 표시되면 브라우저가 글꼴 두께를 올바르게 처리하지 못합니다.
결론: 대다수의 개인 블로그 운영자는 글자 굵기의 9가지 속성을 굳이 안 써도 무방합니다. 700=bold라고 이해하면 쉽습니다. (끝)
