입문

인터넷 글꼴도 무료여서 쉽게 사용할 수 있는 환경이다.그중에 구글 Fonts를 사용하는 사람도 많죠.저도 자주 씁니다.
올해는 인코딩을 했지만 디자인에 비해 bold의 굵기가 다르기 때문에 웹 글꼴을 사용할 때의 주의점 중 하나를 남기고 싶습니다.
다음은 Google Fonts의 M PLUS 1p 구상을 이용한 예를 열거하여 설명한다.(캡처는 Mac의 Chrome78.0.3904.108(Official Build)(64비트)에 표시됨)

import 시 단일 font-family 사용 시 문제

참조구글 Fonts 페이지, 이용M PLUS 1p 선택 시

@import 'https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap&subset=japanese';

이런 URL 알려주세요.
그러나 지정bold하려면 다음과 같이 표시됩니다.
font-weight은600 이후의 수치이며, bold일 때 기분이 거칠어지는 것을 알아차릴까.
이 굵기이긴 하지만 400 보다 조금 굵지만 500 보다 가늘기 때문에 브라우저에서 bold 굵기가 이렇게 굵어진 것 같다고 잘 설명했어요. 굵어진 것 같아요.
이렇게 하면 문제가 없었으면 좋겠지만 브라우저에 의존하는 형식이기 때문에 브라우저의 버전 업그레이드 등으로 굵기가 바뀔 수 있다.

import 시 font-family에서 사이즈를 지정하여 굵은 글자를 잘 표시합니다

예상 굵기bold를 달성하기 위해서는 웹 글꼴의 import에서도 bold에 해당하는 font-family 을 지정해야 합니다.font-weight 중의 bold 은 숫자에서 700 에 해당한다.
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight
또한 통상적인 글꼴 크기는 regular 이지만 수치는 400 에 해당한다.
각 웹 글꼴400과 700의 굵기를 확보하고 이 두 개font-family를 포함하도록 import합니다.
구글 Fonts의 상황은 다음과 같다.

@import 'https://fonts.googleapis.com/css?family=M+PLUS+1p:400,700&display=swap&subset=japanese';

위에서 말한 바와 같이import를 진행할 때, bold 의 값은 지정되지 않은 값보다 굵다.

참고로 Chrome에 600 이상의 값을 입력하면 700 이 표시됩니다.

bold의 두께를 700이 아니라 700으로 설정하려면

아까 font-weight 의 bold 는 수치상 700 과 같지만 디자인상의 이유로 "이 프로젝트에서 bold 의 글씨체를 좀 더 가늘게/굵게 하는 것이 좋다"는 경우도 있다.
이런 상황에서 CSS의 사용자 정의 속성(변수)과 SCSS의 변수 등에서 정의bold의 값을 사용하면 매번 고민하지 않는다.

@import 'https://fonts.googleapis.com/css?family=M+PLUS+1p:400,900&display=swap&subset=japanese';

:root {
  --this-site-bold: 900;
}

.element {
  font-weight: var(--this-site-bold);
}

잡담

전체font-family를 사용할 수 있는 상황에서 이런 느낌이다.

확인 가능bold은700.

마지막

웹 글꼴은 다운로드가 필요하기 때문에 페이지의 표시 속도에 영향을 줄 수 있습니다.weight의font-family는 거의 존재하지 않지만 일반regular과 굵은체bold를 대표로 400,700(또는 글꼴 지정regular,bold의 수치를 import하는 것이 좋다.
또 디자이너는 다른 상황에서 의도적인 굵기가 아닌지 확인하는 것이 좋다.디테일이지만 전체적인 인상이 걸려있기 때문에 중요한 일이라고 생각합니다.