[구글폰트] 전세계 다양한 언어들의 무료 폰트를 다운받을 수 있는 곳

상업적 사용이 가능한 한글은 [눈누]에서 해결할 수 있지만 영어, 일본어, 중국어를 원할 때는 [구글 폰트]이다. 가장 유용하게 사용할 수 있는 사이트이다. 

 

구글 폰트 접속하기

fonts.google.com/

Google Fonts

 

구글 폰트 사이트 구조

구글 폰트의 가장 좋은 점은 다양한 무료 폰트들을 검색할 수 있는 점이고, 또 사이트 안에서 바로 폰트를 다운로드할 수 있다는 점이다. 마음에 드는 폰트를 클릭하면 바로 상세 페이지에서 폰트에 대한 정보를 얻을 수 있고 다운로드 버튼만 누르면 바로 폰트 파일이 다운로드된다. [눈누]가 다운로드를 할 수 있는 페이지로 링크를 보내는 것과 다른 점이고 가장 큰 장점이 될 수 있다. 물론 라이선스가 폰트마다 달라서 꼭 확인을 해야 한다. 

구글폰트 Main

처음 접속하면 보이는 화면이다. 영어로 되어 있어 당황스럽겠지만 하나하나 살펴보면 어렵지 않다. 구글의 가장 큰 장점은 사용성에 대해 굉장히 민감하고 사용자에게 편한 디자인을 늘 고민한다. 그래서 조금만 알면 쉽게 익숙해질 것이라 장담한다. 내가 그랬듯. 

① 메뉴 영역 

    - Browse fonts: 폰트를 탐색할 수 있는 메뉴이다. 다양한 검색 필터를 사용하여 디테일하게 폰트를 검색하고 탐색할 수 있다.  

    - Featured: 특집 테마별로 폰트를 소개하고, 다양한 폰트 모음을 통해 다운로드할 수 있게 해주는 페이지이다. 현재는 운영이 되고 있지 않은 듯 하다. 

    - Articles: 구글 디자인 사이트에서 Type & Typography 사이트로 갈 수 있는 링크 메뉴이다. 

    - About: 구글 폰트 소개 페이지이다. 직관적이고 강력한 오픈소스 폰트를 심플한 프로세스로 제공한다는 내용과 전세계 타이포그래피를 공유하고 통합한다는 자신감을 드러내고 있다. 역시 구글. 

    - Selected familes: 맨 오른쪽 아이콘 메뉴는 이 사이트의 좋은 점 중 하나인데 마음에 드는 폰트를 selected해 두고 나중에 한 번에 폰트를 받을 수 있다. 크게 필요 없을지 모르지만 폰트 검색과 폰트 다운로드에 집중하여 나올 수 있는 메뉴 같아 마음에 들었다. 

 

② 검색 영역 

    - 폰트를 검색할 수 있는 영역이다. 텍스트를 입력하면 바로 하단 리스트가 변해서 편하게 사용할 수 있는 검색이다. 

 

③ 샘플 문장 영역 

    - 샘플 문장을 입력하면 하단 이미지가 모두 바뀐다. 크기 또한 바꿀 수 있다. 

 

④ 검색 필터 영역 

    - 필터 영역은 하나하나 설명을 하는 것이 좋을 것 같아 하단에 다시 자세하게 설명할 예정이다. 

    - Categories: 폰트의 형태에 따라 검색할 수 있게 해주는 필터로 Serif, Sans serif, Display, Handwriting, Monospace 등으로 구성되어 있다. 

    - Language: 다양한 언어의 폰트들을 검색할 수 있다. 

    - Font properies: 폰트의 속성에 따른 검색을 할 수 있다. 필터로는 Number of styles, Thickness, Slant, Width 등으로 구성되어 있다. 

⑤ 폰트 리스트 영역 

    - 폰트의 이름과 폰트 제작, 그리고 몇개의 폰트 패밀리를 가지고 있는지를 나타내고 샘플 문장을 통해 폰트의 형태를 확인하며 탐색할 수 있게 제공한다. 

 

Main 검색 필터: Categories

클릭하면 폰트의 형태에 따라 검색을 할 수 있게 해주는 필터 항목이 나온다. 

1. Serif 

세리프 서체는 글자 획의 끝부분에 삐침이 있는 서체를 의미한다. 세리프 항목만 체크하면 하단 리스트가 모두 Serif 서체로 변경된다. 한글 폰트인 경우에는 명조체가 함께 리스트에 노출된다. 비교적 나라별 폰트의 개념을 잘 이해하고 있는 듯하다. 

 

2. Sans Serif 

산세리프 서체만을 보고 싶을 때는 이 항목에만 체크한다. 산세리프체에 체크하면 마찬가지로 하단 리스트가 모두 산세리프체로 변경된다. 한글 폰트도 적용된다. 

 

3. Display 

디스플레이 서체는 개성이 강한 서체들을 보여준다. 서체의 모양이 독특한 폰트들이 많다. 이벤트나 독특한 느낌을 살리고 싶을 때 사용하면 좋을 폰트들이 많다. 한글 폰트도 함께 필터링된다. 

 

4. Handwriting 

핸드라이팅 서체, 손으로 쓴 듯한 폰트들을 보여주는 필터이다. 필기체 스타일도 여기에 포함되어 있다. 직접 손으로 쓴 느낌을 더 살린 폰트라 따뜻하고 정감있는 스타일들이 많다. 한글 폰트도 함께 필터링되어 보여준다. 

 

5. Monospace

모노스페이스 서체는 하나의 글자가 동일한 글자의 폭을 가지고 있는 폰트들을 말한다. 폰트의 스타일을 보면 느껴지겠지만 타자기로 친 듯한 느낌의 폰트들이 많다. 한글 폰트로는 많이 쓰이는 스타일이 아니고 무료로는 흔하지 않은 폰트이다. 유료로는 구할 수 있다. 폰트의 느낌에서 알 수 있듯 할리우드에서 Screenplay 작성 시 사용하는 폰트로 지정한 폰트인 Courier도 이 유형에 속해 있다. 

 

Main 검색 필터: Language

이 검색 필터는 다른 검색 필터들과 함께 사용하면 좋다. 아래 이미지처럼 Handwriting과 Korean을 함께 선택하면 손글씨 스타일의 한글 폰트만 볼 수 있다. 한글 폰트가 많지 않아 찾기 힘들기 때문에 Language필터를 고정하고 사용하는 것도 방법이 될 것이다. 

Main 검색 필터: Font properties 

이 검색필터는 폰트의 속성에 맞는 폰트를 검색할 때 유용하게 사용할 수 있다. 여기에 나온 폰트의 속성은 폰트 용어에서 다시 설명하려 한다. 

1. Number of styles

하나의 폰트가 포함하고 있는 스타일의 개수를 말하는데, 폰트 패밀리라고도 불리는데, 폰트 패밀리도 용어 설명에서 다룰 예정이다. 간략하게 말하자면 같은 형태지만, 두께나 가로사이즈 등의 디테일한 스타일이 다른 것을 말하는데, 흔히 bold, light, regular 등으로 표현하는 폰트의 weight를 의미한다. 여기에 wide(폰트가 가로로 긴 스타일), round(폰트의 획 끝이 둥근 스타일) 등 다양한 형태를 모두 포함한 것을 말한다. 그래서 스타일의 개수가 몇 개냐를 따지면 하나의 폰트로 얼마나 많은 활용이 가능한지를 예상할 수 있다. 스타일이 많을수록 같은 폰트를 가지고 두껍게 강조하고 얇게 스타일리시하게 만드는 등의 시도가 가능한 것이다. 

 

Number of styles를 먼저 체크하고 슬라이더를 왼쪽으로 움직여 개수를 3+로 하면 3개 이상의 스타일을 가진 모든 폰트가 리스트업되고 18+로 하면 스타일을 18개 이상 가진 폰트만 정렬이 된다.

여기에서 Variable이라고 나오는 폰트는 디자이너가 폰트의 속성을 CSS등으로 수정하여 사용할 수 있는 폰트를 말하고 이와 관련한 사이트를 보는 것이 이해가 더 쉬울 것이다. 

www.axis-praxis.org/specimens/ibmplex

Axis-Praxis: Variable Fonts in the browser

위 사이트에 들어가 마음에 드는 폰트를 하나 클릭하고 오른쪽에 있는 속성을 수정하면 바로 폰트의 크기와 정렬, 그리고 폰트의 굵기와 가로사이즈까지 다양하게 설정이 가능하고 그 설정된 폰트를 직접 CSS로 가져갈 수 있다. 폰트의 속성을 디테일하게 작업자가 정해서 사용할 수 있는 폰트를 말한다. 오른쪽 슬라이더들을 조절하여 폰트가 변하는 모습을 보면 이해가 될 것이다. 

오른쪽 이미지는 선택된 상태로 기본이고 왼쪽 이미지는 Font Variation에서 Weight를 줄인 후이다. 상단 폰트의 차이를 확실히 알 수 있다.

 

2. Thickness

폰트의 두께에 대한 속성을 원하는 속성으로 필터링 가능하다. 슬라이더를 왼쪽으로 옮길수록 폰트의 두께가 얇은 서체가 필터링되고 오른쪽으로 옮길수록 두꺼운 서체가 필터링된다. 폰트의 스타일이 많으면 서체 안에 폰트의 두께가 다양한 스타일들이 포함되어 있다. 폰트의 두께가 얇을수록 가볍고 모던한 명료한 느낌이 들고 두꺼울수록 강력함을 느끼게 된다. 안타깝게 한글 폰트는 이 필터로는 구분이 되지 않는다. 

 

3. Slant

Slant는 경사 기울기를 의미한다. 서체가 얼마나 기울어져 있는지에 대한 정도를 필터링할 수 있다. 아래 이미지를 보면 알겠지만 기울기가 기울어질 수록 손글씨나 필기체에 가깝게 된다. 우리가 흔하게 들어온 이탤릭도 이런 스타일로 구분이 가능하다. 이 필터 역시도 안타깝게 한글 폰트는 해당 사항이 없다.

 

4. Width 

폰트의 가로 사이즈에 따른 필터링이 가능하다. 슬라이더를 왼쪽으로 옮길 수록 가로 사이즈가 짧고 오른쪽으로 옮길수록 폰트의 가로 사이즈가 길어진다. Thickness와 헷갈리면 안 되는 점은 이 스타일은 가로사이즈만을 뜻하므로 가로사이즈가 짧고 두께는 굵은 폰트들도 있다. 가로 사이즈가 길어질수록 강한 힘을 느끼게 한다. 역시나 한글 폰트는 필터링되지 않는다. 

 

 

Main 샘플문장

메인에서 샘플 문장을 통해 내가 원하는 문장에 폰트를 미리 적용해 보면서 폰트를 탐색할 수 있는데, 한글을 사용하면 한글을 지원하지 않는 폰트들은 저렇게 깨져 나온다. 구글 폰트의 가장 아쉬운 점은 한글 폰트가 많이 없다는 것이다. 

 

Sub: 폰트 상세 페이지

폰트 리스트에서 클릭하면 나오는 페이지이다. 폰트에 대한 기본 정보를 제공하고 있다. 폰트 패밀리와 폰트의 형태, 그리고 폰트에 대한 간략한 소개와 함께 제작한 곳에 피드백을 줄 수 있는 링크도 제공한다. 또, 라이선스와 함께 선택한 폰트와 연관 있는 인기 폰트도 추천해 준다. 군더더기 없이 깔끔하고 원하는 정보가 축약되어 있다는 느낌을 받을 만큼 좋은 구성이다. 그래서 정보별로 하나하나 설명하려 한다. 

 

먼저 상세 페이지에 들어가면 서체 이름과 함께 오른쪽에 다운로드할 수 있는 버튼을 제공한다. 버튼의 이름이 Download family인 점은 그 서체가 가진 모든 스타일을 한 번에 다운로드한다는 의미이고 폰트 패밀리는 서체가 가진 모든 스타일들의 모음을 이르는 말이다. 

 

폰트는 스타일과 

 

Styles

서체가 가진 모든 폰트 스타일을 보여준다. Noto Sans KR의 경우 Thin 100, Light 300, Regular 400, Medium 500, Bold 700, Black 900 등 여섯 가지의 폰트 스타일을 가지고 있고 Download family를 클릭하면 이 여섯 가지 스타일을 한 번에 다운로드할 수 있고 각 스타일마다 오른쪽에 select this style 버튼을 가지고 있어 이 버튼을 누르면 스타일만 다운로드 할 수 있다. 

 

Glyphs 

서체가 가진 각 폰트의 모양인 타입 페이스를 보여준다. 영어, 한글, 숫자 및 기호까지 그 서체로 구현 가능한 타입들을 하나하나 보여준다. 숫자의 모양이 예쁜 폰트, 느낌표가 예쁜 폰트 등을 찾을 때 유용하다. 

 

About ~

서체에 대한 간략한 설명과 함께 이 서체를 제작한 제작자도 함께 보여준다. 폰트에 대한 피드백 링크도 있어 서체에 대한 문의사항이 있는 경우 이용할 수 있다. 

 

License 

서체의 라이선스를 표기한다. 라이선스는 서체마다 다르므로 확인하는 것이 좋다. 자세한 라이선스를 확인할 수 있는 링크를 제공하고 있으니 링크를 통해 자세히 알아보는 것이 좋다. 

 

Popular pairings with ~ 

구글 폰트에서는 폰트 상세 페이지의 마지막에 선택한 서체와 연관 있는, 같이 사용해도 좋을 서체를 추천해 준다. 보면 알겠지만 추천해준 서체를 본문이나 타이틀로 사용하면 어떤 느낌인지 미리 볼 수 있게 해 주고 추천한 서체의 패밀리도 모두 확인할 수 있게 해 준다. 아래 이미지의 경우 Roboto를 추천해주고 Noto를 타이틀로 쓰고 Roboto를 본문에 썼을 때를 비교할 수 있도록 오른쪽에 보여준다. 한글 폰트보다는 영어 폰트인 경우에 더 유용할 것 같기는 하다. 

 

Etc: Selected families

마지막으로 아까 메인에서 설명했던 selected familise 메뉴이다. 메인 상단 메뉴 영역에서 오른쪽에 있던 아이콘 메뉴이다. 폰트 스타일 오른쪽에 있는 select this style을 클릭하면 Selected families 팝업이 왼쪽에 열리고 선택된 모든 서체를 보여준다. 그리고 하단에 있는 Download families 버튼을 클릭하면 내가 선택한 모든 폰트들을 압축파일로 다운로드할 수 있게 해준다. 다양한 서체를 다운로드할 때 유용하게 사용할 수 있는 기능이다. 

폰트 스타일을 여러가지 추가하여 오른쪽 팝업이 열린 상태

 

글을 마치며

이번에는 구글 폰트 사이트에 대해 알아보았다. 구글은 알고 있겠지만 현재 UI/UX에서 독보적인 존재이다. 그리고 이 구글폰트 사이트는 구글에서 만든 오픈 소스 폰트를 검색하여 다운로드할 수 있는 기능에 집중한 사이트이다. 폰트를 찾고자 하는 사용자들의 Needs에 가장 부합하게 만든 사이트인 것이다. 

 

물론 폰트를 다운로드하고 닫아버려도 되는 사이트이다. 하지만 디자인을 한다거나, 사이트를 운영한다거나, 혹은 쇼핑몰을 한다 해도 이 사이트에서 얻을 수 있는 인사이트가 많다. 이런 좋은 사이트들을 보며 이런 부분들을 내 사이트에, 쇼핑몰에 적용하며 써보아야겠다고 고민하면 아마 더 좋은 사용성을 가진 서비스를 만들 수 있지 않을까 한다. 그냥 폰트만 편하게 다운로드하여도 문제는 없다. 그러라고 최적화해 만든 사이트니까. 

 

구글 폰트로 영문이나 일문, 중문에 맞는 폰트를 다운로드해 글로벌한 디자인을 하는 것도 좋다. 구글 폰트는 일정 수준 이상의 폰트 퀄리티를 가지고 있어, 잘 모르는 언어를 사용할 때 참고하기에도 좋다.

 

저작권 걱정 없이 구글폰트를 사용하여 상업적으로도 개인적으로도 안심하고 작업해보자.