본문으로 바로가기

Noto Sans(본고딕) 웹폰트

category 웹코딩/CSS 2015.08.14 11:41

Noto Sans를 웹폰트로 만들어 배포되고 있는 것들을 테스트하고 이를 소개하는 내용입니다. 웹폰트 사용을 고려하시는 분들께 도움이 되길 바랍니다.

Noto Sans 웹폰트 소개

Noto Sans 웹폰트는 Noto Sans CJK를 웹폰트로 사용하기 위해 한국어 버전인 Noto Sans CJK KR에서 자주 쓰이는 완성형 한글 2,350자(KS X 1001 표준) 만 추출하여 만들어지고 있다. 이 제작과정은 한글 웹 폰트 경량화해 사용하기에 자세히 설명되어 있으며, 이를 이용해 NotoSansKR-Hestia라는 웹폰트가 공유 되고 있다(이하 Noto Sans Korean 이라고 칭함).

또한, 본고딕(Noto Sans) 웹폰트 사용하기에서도 비슷한 웹폰트를 배포(이하 notokr 이라 칭함)하고 있으며, NotoSansKR-Hestia와 비교해서 약간의 차이를 보이고 있다. 둘 중에 원하는 것을 선택하여 사용하되 아래에서 그 차이를 참고하도록 하자. Noto Sans CJK는 무료로 제공되는 폰트이기에 웹폰트로 사용하는 것에 제약사항은 없다.

Noto Sans의 원본은 Google Noto Fonts에서 다운로드 받을 수 있다.

Noto Sans Korean

Noto Sans Korean의 자세한 정보는 NotoSansKR-Hestia에서 확인할 수 있다.

See the Pen Noto Sans Korean by Douglas Ham (@uzugoer) on CodePen.

  • IE8 (윈도우 XP) : 지원 않함.
  • IE9 (윈도우 7) : 21px 이상부터 글자의 깨짐없이 제대로 표현
  • IE11 (윈도우 7) : 어느 크기든 이상없이 제대로 표현
  • IE11 (윈도우 8.1) : 어느 크기든 이상없이 제대로 표현
  • Chrome : 어느 크기든 이상없이 제대로 표현
  • Firefox : 어느 크기든 이상없이 제대로 표현
  • Opera : 어느 크기든 이상없이 제대로 표현

notokr

notokr의 자세한 정보는 본고딕(Noto Sans) 웹폰트 사용하기에서 확인할 수 있다.

  • IE8 (윈도우 XP) : 힌팅이 적용되지 않아 비추천.
  • IE9 (윈도우 7) : 어느 크기든 이상없이 제대로 표현
  • IE11 (윈도우 7) : 어느 크기든 이상없이 제대로 표현
  • IE11 (윈도우 8.1) : 어느 크기든 이상없이 제대로 표현
  • Chrome : 어느 크기든 이상없이 제대로 표현
  • Firefox : 어느 크기든 이상없이 제대로 표현
  • Opera : 어느 크기든 이상없이 제대로 표현

Noto Sans Korean과 비교했을때 전체적으로 Noto Sans Korean이 좀 더 굵게 표시된다.

Noto Sans 웹폰트의 한계

비단 Noto Sans 웹폰트의 문제라기 보다는, XP에서 웹폰트를 사용하는 것에 대한 문제이기도 하다. 우리가 흔히 힌팅(Hinting)이라고 부르는 기능이 XP에서는 적용되질 않는 것 같다. 이에 대한 자세한 것은 알지 못하지만 XP가 오늘도 걸림돌이 되는 건 변함없는 사실이다. XP... 포기하면 편하다.

Noto Sans Korean은 XP의 IE8에서는 적용되지 않는다. 표면적으로는 이를 지원하는 eot 파일을 포함하고 있으나 Windows 7에서 IE8을 사용하는 사람을 위한 파일이지 XP를 위한 것은 아니라는 것이다. 어짜피 적용되도 힌팅이 적용되지 않는 한 제대로 표현되는 글꼴은 많지 않다.

반면, notokr은 XP의 IE8에서도 적용되나, 앞서 언급했듯이 힌팅이 되질 못한다.

notokr XP IE8


'웹코딩 > CSS' 카테고리의 다른 글

트위터의 fave 애니메이션 - 즐겨찾기 버튼  (3) 2015.09.03
Normalize.css - CSS 초기화  (5) 2015.08.24
Noto Sans(본고딕) 웹폰트  (10) 2015.08.14
CSS3 이면가시성(backface-visibility) 속성  (1) 2015.07.29
CSS3 외형(Appearance) 속성  (0) 2015.07.28
CSS 크기 단위  (0) 2015.06.17

댓글을 달아 주세요

  1. BlogIcon 마마미아 2015.08.18 15:39 신고

    이 블로그에는 어떤 글씨체가 쓰인건가요?

    • BlogIcon 흉내쟁이 2015.08.18 15:47 신고

      본문의 제목부분(h1~h5)들은 'Noto Sans CJK KR', 'Noto Sans Korean' 을 글꼴로 사용하고 있습니다. 첫번째 선언된건 로컬에 설치된 폰트 이름이고, 두번째 선언은 웹폰트 선언입니다.

      본문의 제목부분들을 제외한 내용글들은 '맑은 고딕' 이 기본폰트입니다. 맑은 고딕은 윈도우 비스타 이상의 OS에서 제공됩니다.

  2. 숲길 2015.10.20 14:21 신고

    여쭤볼 게 있어서요.
    보통 무료서체는 책이나 잡지를 발행할 때 본문에만 허용된다고 알고 있습니다.
    그래서 많은 경우, 무료서체를 조금 변형해서 상호로 사용한다고 들었는데요.

    그런데 혹시 '상호'에도 쓸 수 있는 서체를 알고 계시는지요?
    또 본고딕은 상호에 사용할 수 있는지 궁금하네요.

    • BlogIcon 흉내쟁이 2015.10.20 15:17 신고

      본고딕도 아파치 라이선스2.0 이라서 상호로 사용에는 제한될 듯 싶네요. 관련해서 정보를 가지고 있지 않아 도움을 드리기 어렵습니다.

  3. 까꿍이 2016.03.17 15:05 신고

    좋은 정보 감사드립니다~ 정말 많이 도움됐어요!

  4. 말랑 2017.01.18 11:32 신고

    많은 도움이 되었습니다. 감사합니다.

  5. 말랑 2017.01.18 11:37 신고

    노토산스 kr이 너무 굵어 보이는 느낌이 있어서 light를 본문에 적용시키고 싶을때는 어떻게 코딩을 하면 되나요?

  6. 이비비 2017.02.13 18:08 신고

    NotoSansCJKkr-Regular 와

    NotoSansKR-Regular-Hestia 는 뭐가 차이가 있는건가요?

  7. WD 2017.05.14 16:07 신고

    텍스트에 박스(알기 쉽게 컬러)를 입히고 새로고침(브라우저의 새로고침이 아닌 티스토리 메뉴를 통한 새로고침)을 하면 텍스트 제일 우측에 공백이 생성됩니다. inline-block의 공백 생성인줄 알았으나 폰트 문제더군요. 위에서 제시한 2개의 폰트는 이런 문제가 발생하고, 구글이 제공하는 본고딕 얼리액세스는 이런 문제가 없습니다.

    • BlogIcon 흉내쟁이 2017.05.14 16:12 신고

      위의 노토산스 두종류는 기본적으로 사용되는 한글 영문 숫자만을 포함시켜 경랑화한 버전이므로 그외의 것을 입력하고 테스트하먼 공백으로 나올지도 모르겠네요.

티스토리 툴바