orioncactus/pretendard

가변글꼴 버젼과 일반 글꼴 두께 차이

the-jb opened this issue · 10 comments

the-jb commented

css에서 같은 300, 400, 500 등의 weight를 비교하는데 일반 "Pretendard" 글꼴이 가변글꼴 버젼("Pretendard Variable")보다 한 단계 높은 weight정도의 두께를 갖네요.

이 것이 의도하신 두께 조절이 맞나요?

개인적으로 다른 여러 글꼴들, 특히 Apple SD Gothic Neo 와 비교했을 때, 가변글꼴 두께가 딱 맞고
일반 Pretendard 글꼴은 weight에 비해 너무 두꺼워서, 가변글꼴 두께정도로 일반글꼴 두께가 맞춰졌으면 합니다.

안그래도 개인적으로도 Noto Sans KR과 Inter 글꼴을 좋아해서 같이 사용하면서, 사이즈 조정이 아쉬웠는데 이런 글꼴작업에 너무 감사합니다.

orioncactus commented

안녕하세요!

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

이렇게 'Pretendard'와 'Pretendard Variable'을 불러온 다음, 하나는 'Pretendard', 그 다음은 'Pretendard Variable'을 100부터 900까지 불러오게 했는데요, 서로 비교해보았으나 아래 이미지와 같이 굵기 차이를 찾지 못했습니다. 혹시 테스트하신 환경이 정확히 어떻게 되는지 알 수 있을까요?

참고하시라고 테스트 페이지도 공유해드립니다. 비밀번호는 pretendard 입니다.

덧+
다 적고 모바일로 이미지를 확인해보니 조금 차이가 있는 것도 같네요. 이건 가변 글꼴과 일반 글꼴의 렌더링 차이때문이 아닌가도 싶습니다. 차이가 있다면 아래 css 코드를 body에 추가하시고, 그럼에도 문제가 있다면 알려주세요!:

body {
 -webkit-font-smoothing: antialiased;
}
the-jb commented

윈도우 10 과 크롬 브라우저 환경입니다.

공유주신 테스트 페이지 확인 결과 아래 스크린샷처럼 표시가 되네요.

antialiased 적용, 미적용시에도 동일한 결과였습니다.

혹시나 해서 테스트하는데 데스크톱과 노트북 모두 마찬가지 차이가 발생합니다. (둘다 윈도우 10)

err

orioncactus commented

확인해주셔서 감사합니다! 글자 길이를 보면 Outline 상으로는 서로 동일한 두께인 것은 맞는데, static과 variable이 서로 다른 확장자로 구성되어 있어 이로 인해 생기는 글꼴 렌더링 이슈가 아닐까 싶네요. Static도 마찬가지로 TrueType로 테스트해보고, 문제가 해결되는지 확인해보겠습니다.

the-jb commented

감사합니다.

Pretendard static 폰트를 사용하면 기존 노토나 다른 폰트들을 사용할 때보다 글씨가 두꺼워 지는 것으로 보아, static 폰트에 렌더링 문제가 있는 것 같습니다.
예를 들어서 300 기준으로 노토에서 Pretendard Variable로 변경하면 거의 동일한 느낌이 드는데, 그냥 Pretendard 폰트는 200으로 설정해야 기존 300 노토와 비슷한 느낌입니다.
크롬 뿐만 아니라 폰트를 직접 설치해서 워드같은 오피스에 적용해도 마찬가지 현상이네요.

추가적으로, 자세히 확인은 못했지만 폰트를 테스트하다보니, 가변폰트도 글씨 크기를 키우면 두께가 좀 더 두꺼워지는 느낌이 드네요. (크기에 따른 두께 이상으로)

orioncactus commented

추가적으로 알려주셔서 감사합니다! Windows 웹에서 Pretendard Variable을 사용하고, 글씨 크기가 대략 64px 이상일 때 다른 본문 글꼴과 비교해 더 두껍게 표시된다는 말이 맞을까요?

the-jb commented

아래 코드에 대해 크롬 확인 결과입니다.

<p style="font-family:'Noto Sans KR Light';font-size:64px;font-weight:300;">Noto Sans KR Light: 가나다라마바사아자차카타파하</p>
<p style="font-family:'Pretendard Variable Light';font-size:64px;font-weight:300;">Pretendard Variable Light: 가나다라마바사아자차카타파하</p>


<p style="font-family:'Noto Sans KR Light';font-size:18px;font-weight:300;">Noto Sans KR Light: 가나다라마바사아자차카타파하</p>
<p style="font-family:'Pretendard Variable Light';font-size:18px;font-weight:300;">Pretendard Variable Light: 가나다라마바사아자차카타파하</p>

image

  • 👀1
orioncactus commented

말씀하신 글씨 크기가 클 때의 두께 문제는 렌더링 문제가 아닌 글꼴 형태의 차이로 확인되었습니다. Pretendard의 굵기 구성은 본고딕보다는 San Francisco, 그리고 Apple SD 산돌고딕 Neo(산돌고딕Neo1)과 조금 더 가깝습니다.

알려주신 Windows에서의 글꼴 렌더링 문제는 TrueType 포맷으로 내보내니 해결되었고, 다음 릴리즈에 적용될 예정입니다. 이 이슈는 다음 릴리즈를 배포하면서 닫아두겠습니다. 이렇게 알려주시고 가독성을 개선할 수 있게 도와주셔서 다시 한 번 감사드립니다! 😊 추가적으로 궁금한 부분이 있으시면 언제든 알려주세요!

the-jb commented

네 그 부분은 다행히 의도하신 두께였군요.

이슈가 잘 해결되어 다행입니다. 그동안 노토랑 inter를 맞추느라 css만 계속 건드리고 있었는데 이렇게 가독성 좋게 폰트를 만들어 배포하고 관리해주셔서 감사합니다.

한 가지 궁금한 점은, ttf로 내보내서 해결하셨다고 말씀주셨는데 그러면 이제 윈도우 환경에서 otf파일은 제공되지 않는 것인가요?

  • ❤️1
orioncactus commented

웹에서 글꼴 렌더링 이슈 해결을 위해 웹폰트에서만 아웃라인 포맷을 TrueType 바탕으로 변경하고—확장자가 woff와 woff2임에는 변함이 없으며, 또 Pretendard가 otf와 ttf 둘 다 지원하는 것도 변함이 없습니다. 다만 Windows에서 otf를 사용할 때에는 ClearType 때문에 시스템에서 글꼴 렌더링이 선명하게 보이지 않아서, Adobe 애플리케이션만 쓰거나 MacType를 쓰는 상황이 아니라면 Windows에서는 ttf를 사용하는 것을 추천드립니다.

the-jb commented

otf가 클리어타입과 안맞는 것은 처음 알았네요. 새로 배워갑니다. 답변 감사드립니다.