ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 폰트 크기가 작아도 선명한 한글 웹폰트 고딕 BEST
      WebDesign/UI 2024. 9. 26. 15:07

      쇼핑몰 사이트를 구성하다보면 헤더나 푸터 상품리스팅 등 작은 폰트들이 들어가는 위치들이 있다.
      하지만 예쁜 폰트에만 초점을 맞추면 사용자들이 불편함을 느끼기 마련이다. 
      웹폰트 14px 기준에서 가독성 좋은 예쁜 폰트는 어떤게 있을까.

      자, 여기서 14px는 무슨 기준일까? 
      한글은 'ㄹ', 'ㅎ'이 들어가는 글자의 경우 글씨가 작아지면서 인식이 어려워 지는 단점이 있다. 
      기본적으로 Regular 폰트를 사용하면서 가독성이 좋아지길 바란다면 14px이상으로 세팅해보자.
      그러면 사용자의 시력을 지켜주는 좋은 디자이너가 될 것이다. 

       

      1. Noto Sans Korean

      말모~말모~ 기본중의 기본 Noto.
      딱히 폰트를 뭐 선택해야 할지 모르겠다 싶을 때는 그냥 Noto Sans를 쓰면 된다.
      구글에서 만들었으니 평타는 친다는 이야기다.
      고딕 중에 가장 베이직 하고 다국어 지원이 가능하다는 장점이 있다.
      다국어지원이 되는 만큼 언어별로 표현되는 디자인이 일관적이기 때문에 폰트에 대한 기준이 딱히 없다면 어떤 디자인에 얹어도 잘 어울린다.  고로 글꼴이 표현되지 않을 일은 없다는 이야기다.
      언어에 따라 최대 9가지 굵기를 지원하고 폭도 다양하다.

      웹폰트 사용시 <head>에 아래 내용을 삽입하면 된다.

      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

      CSS 클래스는?

      // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-kr-<uniquifier> {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

      https://fonts.google.com/noto/specimen/Noto+Sans+KR

       

      Noto Sans Korean - Google Fonts

      Noto is a global font collection for writing in all modern and ancient languages. Noto Sans KR is an unmodulated (“sans serif”) design for the Korean language u

      fonts.google.com

       

      2. IBM Plex Sans Kr

      IBM Plex Sans는 자연스러운 글자와 엔지니어링된 글자가 균형을 이루게 만들었다고 한다.
      헬베티카에서 영감을 받아 그런지 폰트형태는 헬베티카의 형태를 띄지만 적당한 엣지를 가미하여 독특하기도 하고 미래지향적이라 해야하나?  아날로그와 디지털 중간정도의 느낌으로 봐도 될 것 같고, 우선 폰트크기가 작을 때 가독성이 너무 좋아서 자주 쓸 것 같다.



      웹폰트 사용시 <head>에 아래 내용을 삽입하면 된다. 

      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">

      CSS 클래스는?

      .ibm-plex-sans-kr-thin {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-kr-extralight {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-kr-light {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-kr-regular {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-kr-medium {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-kr-semibold {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-kr-bold {
  font-family: "IBM Plex Sans KR", sans-serif;
  font-weight: 700;
  font-style: normal;
}

      https://www.ibm.com/plex/

       

      IBM Plex

      IBM Plex® is our new typeface. It’s global, it’s versatile, and it’s distinctly IBM.

      www.ibm.com

       

      3. Nanum Gothic

      현대적이고 깔끔한 느낌을 주는 나눔고딕은 산돌에서 만든 기업전용 폰트이다.
      산돌이 만들어낸 폰트들은 깔끔하고 세련된 느낌을 많이 주는 것 같다. (그래서 더 유명하겠지?)
      2008년부터 시작된 네이버의 한글캠페인으로 시작된 나눔글꼴 배포를 시작으로 점점 다듬어져 계속 업데이트되고 있는 것으로 안다. 
      두께도 깔끔하게 3가지로 구성이 되어 있어 사이트 구성하는데 선택폭이 딱 정해진 것도 나름 괜찮다.
      맑은고딕 느낌보다 모서리가 좀 부드러운 느낌이라 해야하나? 

      웹폰트 사용시 <head>에 아래 내용을 삽입하면 된다.

      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

      CSS 클래스는?

      .nanum-gothic-regular {
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.nanum-gothic-bold {
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nanum-gothic-extrabold {
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 800;
  font-style: normal;
}

      https://hangeul.naver.com/

       

      네이버 한글한글 아름답게

      매년 한글의 우수성과 아름다움을 알리기 위해 노력합니다.

      hangeul.naver.com

       

       

      4. Gothic A1

      폰트회사중에 한양도 참 오래되고 이름있는 회사인데 어느순간 좀 올드한 느낌이 있었다.
      오래전부터 디자인을 했던 사람이라면 볼드체로 헤드라인 폰트를 참 많이 썼지 싶다.(추억의 헤드라인...)
      그리곤 잊혀지나 싶은 찰나에 눈에 띈 A1.
      B1, C1도 있지만 글자폭이 좀 더 일률적으로 정교하게 맞들어진 A1이 개인적으로 마음에 든다.
      99단계의 웨이트를 갖고 있다는데 골라쓰기엔 좋다.
      하지만 위에 3개의 폰트와는 다르게 자음크기가 단어마다 다르게 나타나서 조금 아쉬움이 있다.
      어느 순간부터 한양체를 쓰지 않게 된 이유이기도....
      그래도 추억의 폰트회사라 리스트 하나 남겨봤다.

      웹폰트 사용시 <head>에 아래 내용을 삽입하면 된다.

      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

      CSS 클래스는?

      .gothic-a1-thin {
  font-family: "Gothic A1", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.gothic-a1-extralight {
  font-family: "Gothic A1", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.gothic-a1-light {
  font-family: "Gothic A1", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.gothic-a1-regular {
  font-family: "Gothic A1", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.gothic-a1-medium {
  font-family: "Gothic A1", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.gothic-a1-semibold {
  font-family: "Gothic A1", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.gothic-a1-bold {
  font-family: "Gothic A1", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.gothic-a1-extrabold {
  font-family: "Gothic A1", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.gothic-a1-black {
  font-family: "Gothic A1", sans-serif;
  font-weight: 900;
  font-style: normal;
}

      https://www.hanyang.co.kr/hygothic/

       

      HY Gothic A1

      "프로페셔널 디자이너를 위한""프로페셔널 디자이너를 위한""프로페셔널 디자이너를 위한""프로페셔널 디자이너를 위한""프로페셔널 디자이너를 위한""프로페셔널 디자이너를 위한""프로페셔널

      www.hanyang.co.kr

       

      저작자표시 비영리 변경금지

      'WebDesign > UI' 카테고리의 다른 글

      저작권 표기  (0) 2016.12.22

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바