당신은 주제를 찾고 있습니까 “웹 폰트 추천 – 디자이너 추천하는 상업적, 저작권 무료 폰트 완벽 모음! // 존코바 // 디자인 // 유튜버“? 다음 카테고리의 웹사이트 ppa.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.maxfit.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 JohnKOBA Design 이(가) 작성한 기사에는 조회수 737,833회 및 좋아요 37,206개 개의 좋아요가 있습니다.
- Noto Sans. 아시다시피 노토산스(본고딕)는 구글에서 만든 폰트입니다. …
- Spoqa Han Sans. 스포카 한 산스는 노토산스와 라토 폰트를 기반으로 커스텀한 글꼴입니다. …
- Gothic A1. …
- Arita Dotum. …
- 나눔 스퀘어
웹 폰트 추천 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 디자이너 추천하는 상업적, 저작권 무료 폰트 완벽 모음! // 존코바 // 디자인 // 유튜버 – 웹 폰트 추천 주제에 대한 세부정보를 참조하세요
안녕하세요, 존코바입니다.
제가 현재 유튜브 하면서 계속 사용하고
크리에이터, 유튜버에게 필수인
상업적, 저작권 무료 폰트 소개입니다!
1.검은고딕 https://github.com/zesstype/Black-Han-Sans
2.에스코어드림 http://www.s-core.co.kr/who-we-are/font/
3.몬소리체 https://brunch.co.kr/@creative/32
4.Noto Sans https://fonts.google.com/specimen/Noto+Sans+KR
5.잉크립퀴드체 http://www.thefaceshop.com/event/lipquid/main.jsp#FontDownload
6.tvn 즐거운 이야기체 http://tvn10festival.tving.com/playground/tvn10font
7.스웨거체 http://www.swagger.kr/font.html
8.주아체 http://font.woowahan.com/
☞ 눈누 https://noonnu.cc/
☞ 구글폰트 https://fonts.google.com/
▶ Similar Tutorials
Typography Tip Tutorials → http://bit.ly/2YhBltr
– Photoshop CC 2017
– Wacom Tablet Intuos 3
▶ 영상 사용 및 비지니스 문의 : [email protected]
——————————————————————————————–
COPYRIGHT ⓒ 2015 JOHNKOBA ALL RIGHTS RESERVED.
본 영상의 저작권은 존코바에게 있습니다.
——————————————————————————————–
강의를 보고 만든 이미지나 영상에 대한 출처는
처음 사용하실 때만 밝혀주시면 됩니다.
——————————————————————————————–
#무료폰트 #폰트 #폰트추천
웹 폰트 추천 주제에 대한 자세한 내용은 여기를 참조하세요.
좋은 웹 폰트 찾기 – 브런치
가장 추천하는 방법은 유려한 디자인이 잘 구현된 웹사이트를 찾아서 어떤 서체를 어떻게 적용했는지 파헤치는 것이다. 사실 모든 디자인 레퍼런스를 이런 …
Source: brunch.co.kr
Date Published: 7/20/2021
View: 313
2020년 기준 현직 디자이너가 추천하는 상업적 무료 폰트 (한글 …
예를 들면 프리랜서로 일하는 디자이너가 수주 받은 웹디자인 작업을 할 때 해당 폰트를 활용한다든가, 회사차원에서 만든 디자인을 인쇄하여 다른 회사에 …
Source: yeowubyeol.tistory.com
Date Published: 10/27/2022
View: 6043
2021년 디자이너가 실무에서 사용하는 상업용 무료 폰트 (한글 …
2021년 실무에서 자주 사용하는 상업용 무료폰트 추천! … 상세페이지 제작, 인스타 홍보) 등을 제작하고 있는 현직 웹디자이너인데요!
Source: sseungtudio.tistory.com
Date Published: 4/18/2021
View: 1253
고딕체 3종 (Noto Sans, 프리텐다드, 에스코어 드림) – 순상생활
[폰트 추천] 2021년 디자이너가 추천하는 상업용 무료 폰트 – 고딕체 3종 … 임베딩, 웹사이트 및 프로그램 서버 내 폰트 탑재, E-book 제작, ○.Source: soonart.tistory.com
Date Published: 10/25/2022
View: 5380
눈누
상업용 무료한글폰트 사이트. … 눈누가 직접 제안하는 용도별 추천 폰트들을 만나 보세요. 눈누의 모든 폰트 보러가기 →. 후원사 광고 후원사 배너 이미지.
Source: noonnu.cc
Date Published: 1/13/2021
View: 8329
디자이너가 추천하는 퀄리티 업 무료한글폰트 총정리
1.검은고딕. 첫 번째는 검은고딕체 입니다. 검은고딕이 좋은 이유는 문자 획의 굵기가 거의 균등하기 때문에 시인성이 높고 안정감 있는 인상을 주고 있어요. · 2.에스코어 …
Source: earnnomad.com
Date Published: 6/26/2022
View: 3222
초보자를 위한 무료 폰트 추천 – Tistory
초보자를 위한 무료 폰트 추천 요즘엔 디자인툴을 다루지 못하는 초보자들도 망고보드나 미리캔버스 등의 사이트에서 썸네일, 웹자보, 상세페이지, …
Source: wannabeceleb.tistory.com
Date Published: 2/12/2021
View: 4211
[Github 블로그] 웹 폰트 설정하기 (+폰트 추천) – 평생 공부 블로그
1️⃣ 무료 웹 폰트 사이트에서 사용할 폰트를 골라보자. 🔥 첫 번째 추천 사이트 : 눈누; 🔥 두 번째 추천 사이트 : 구글 폰트. 2️⃣ 임포트 하기.
Source: ansohxxn.github.io
Date Published: 11/18/2021
View: 6098
좋은 웹폰트를 찾기 위한 디자이너의 4가지 팁
강력하게 추천하는 방법은 유려한 디자인이 잘 구현된 웹사이트를 찾아서 어떤 서체를 어떻게 적용했는지 파헤치는 것이다. 사실 모든 디자인 레퍼런스를 …
Source: ditoday.com
Date Published: 8/15/2022
View: 2346
주제와 관련된 이미지 웹 폰트 추천
주제와 관련된 더 많은 사진을 참조하십시오 디자이너 추천하는 상업적, 저작권 무료 폰트 완벽 모음! // 존코바 // 디자인 // 유튜버. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 웹 폰트 추천
- Author: JohnKOBA Design
- Views: 조회수 737,833회
- Likes: 좋아요 37,206개
- Date Published: 2019. 5. 19.
- Video Url link: https://www.youtube.com/watch?v=7gOiGK83X-o
웹에 사용하기 좋은 국문 무료폰트 추천!
안녕하세요! 강대리입니다.
오늘은 웹에 사용하기 딱 좋은 무료 폰트를 소개해드리려고 합니다.
실제로 제가 시안 작업 시 사용하고 있는 폰트이기 때문에
디자인적 요소와 더불어, UI/UX 측면에서 가장 좋았던 폰트들만 모아모아 추천 드립니다 😀
저작권 걱정 없는 무료 오픈 라이센스(OFL)로서, 웹폰트로도 사용이 가능하답니다.
단, 폰트 제작 업체에 따라 글꼴을 표기해야할 수 있으니 자세한 라이센스는 첨부해드린 링크로 확인 부탁드립니다!
그럼 저와 함께 웹에 사용하기 좋은 무료 폰트 국문편 확인하러 가실까요~?
좋은 웹 폰트 찾기
웹사이트를 큐레이션한 웹사이트 둘러보기
정말 자주 방문했다. 타이포그래피를 특히 신경 쓴 사이트들을 큐레이션 하여 보여주고, 폰트 페어링, 무료 폰트, 타이포그래피 팁 등 유용한 정보가 가득하다. 웹 타이포그래피 안목을 기르는데 더없이 좋은 사이트다. 뉴스레터로도 받아볼 수도 있다.
웹디자인을 하다보면 필연적으로 웹 타이포그래피 레퍼런스를 자주 찾게 된다. 보통은 비핸스나 핀터레스트 등을 통해서 디자인 레퍼런스를 찾아볼 수 있겠지만 웹 타이포그래피는 실제 적용된 사례를 보는 것이 가장 좋기 때문에 기존 방법으로는 참고하기 어렵다. 그래서 내가 어떻게 웹 폰트를 리서치 해왔는지 공유해보려한다.
1. 좋아보이는 것들 파헤치기
가장 추천하는 방법은 유려한 디자인이 잘 구현된 웹사이트를 찾아서 어떤 서체를 어떻게 적용했는지 파헤치는 것이다. 사실 모든 디자인 레퍼런스를 이런 식으로 찾긴 하지만 웹은 더 구체적으로 정확하게 파헤질 수 있다. 예를 들어 메일침프의 서체와 그 활용 방식이 좋아보인다면 메일침프의 코드를 뜯어보는 것이다.
Chrome inspector(사이트 검사도구)는 기본 중의 기본, 정석 중의 정석이다. 알고 싶은 부분에 커서를 두고 오른쪽 클릭하면 “검사”라는 항목이 있다.
메일침프 웹사이트의 경우 line-height 1에 font-size 3.375rem, font-family: Cooper를 사용했다는 것을 알 수 있다. 크롬 인스펙터는 폰트 뿐 아니라 HTML, CSS를 포함해 어떤 식으로 코드가 짜였는지 확인하고 변형해볼 수 있는 훌륭한 도구다. 서체를 고르는 것도 중요하지만 디지털 환경에서 잘 조판하는 것이 더 중요하기 때문에 어떤 자간과 행간, 크기를 사용하는 게 좋을지 자주 보게 되더라. 5년 전 처음 퍼블리싱 작업을 할 때 모든 요소를 노가다로 파악한 후 복붙해봤다. 시간은 진짜 오래 걸리지만 직접 해보면 잊어버릴 수 없는 좋은 공부법이다. 종종 디자이너들은 내 디자인과 개발 결과가 왜 똑같지 않은지에 대해 의문을 갖는데, 이것만 할 줄 알아도 프론트엔드 개발자와 소통이 편해지고, 최대한 디자인 작업물에 근접한 결과물에 도달할 수 있다.
코드 보는 게 어렵다면 크롬 플러그인 중 하나인 WhatFont를 사용해도 된다. 검사도구에 나오는 왠만한 정보는 다 불러와서 편리하다. 특히 서체 이름만 빨리 확인하고 싶을 때 유용하다.
플러그인을 켜고 이렇게 갖다 대기만 하면 서체 이름이 뜬다.
보통 디지털 프로덕트, 혹은 디지털 서비스를 소개하는 웹사이트들은 웹디자인이 잘 되어 있다. 당연히 온라인 비지니스를 하니까 웹사이트를 잘 만들어야 할 것이다. 메일침프 외에도 Intercom, Stripe, Kickstarter와 같은 온라인 비지니스의 홈페이지를 참고해보거나, Figma, Framer, Protopie 등 디자이너들이 사용하는 툴들의 홈페이지를 참고해보거나 디자인 에이전시의 사이트를 둘러보면 큰 도움이 된다. 업 자체가 ‘디자인’이기 때문에 본인들의 포트폴리오 사이트에 그들만의 아이덴티티를 녹일 수 있는 서체들을 적용해놓기 때문이다.
Mother Design에 적용된 서체 : NBInternational
Redantler에 적용된 서체 : Work Sans
Pentagram에 적용된 서체 : Neue Haas Grotesk
위 사례들을 보며, 내가 만들 웹사이트와 가장 유사한 분야의 사이트들도 많이 참고해보자.
2. 함께 어울릴 폰트 찾아보기
몇 가지 좋아보이는 폰트를 발견했다면 함께 어울릴만한 폰트를 찾는 것도 좋은 방법이다. 이를 테면 타이틀 서체로 그로테스크 계열 산세리프 서체를 사용했다면 본문으로 가독성 높은 세리프 폰트를 찾고 싶어지는 게 디자이너의 마음… 폰트 하나로 기깔나게 해도 좋지만 나는 폰트 구경하는 걸 너무 좋아해서 그런지 어울릴 만한 다른 폰트를 찾아보고 페어링해본다.
Jeremiah shoaf가 운영하는 웹폰트 아카이브 사이트로, 정말 자주 방문했다. 타이포그래피를 특히 신경 쓴 사이트들을 큐레이션 하여 보여주고, 폰트 페어링, 무료 폰트, 타이포그래피 팁 등 유용한 정보가 가득하다. 웹 타이포그래피 안목을 기르는데 더없이 좋은 사이트다. 뉴스레터로도 받아볼 수도 있다.
가장 많이 쓰이고 있는, 트렌디한 폰트를 모아서 차트로 보여주는데 이게 꼭 웹폰트 트렌드와 100% 일치하는 건 아니지만 꽤나 잘 맞는다. 해당 서체를 누르면 그 서체가 사용된 웹사이트 리스트가 뜨기 때문에 폰트 조합들을 비교하기에도 용이하다. (내가 생각하기에 가장 좋은 부분) 나도 한글 폰트로 이런 아카이브 사이트를 만들어보고 싶다.
Font Reach는 수 백만개의 웹사이트를 크롤링해 서체 정보를 모아 검색해볼 수 있게한 사이트다. 예를 들어 Poppins라는 폰트가 좋아보여서 이 폰트를 사용한 다른 웹사이트를 찾아보고 싶다면 여기에 검색해볼 수 있다. 그러면 Poppins 폰트를 어떻게 써야 예쁜지 알아볼 수 있다. 이쯤되면 눈치챘겠지만 대부분 시간을 아주 많이 들이면 예쁜 것을 찾을 수 있다. 예쁜 거 찾아보고 어울릴 만한 거 찾아보고, 다시 그 폰트들을 예쁘게 쓴 다른 사례를 찾아보고. 무한반복하다보면 ‘뭐가 예쁜지’를 판단하는 기준이 생긴다. 무조건 예쁜 걸 많이 보면 좋은 결과물에 도달할 수 있다.
3. 실제로 사용해보기
사용할 서체를 골랐다면 실제로 구매해보거나 데모 버전을 사용해본다. 직접 해보는 것보다 좋은 방법은 없다. 구글 폰트는 각종 웹사이트 플러그인으로도 많이 나와있기 때문에 코드 작성할 줄 모르는 사람들도 쉽게 쓸 수 있다. 예를 들면 워드프레스에 구글 폰트를 불러오는 플러그인이 굉장히 많아서 어떤 폰트 고를지만 생각해두면 바로바로 불러다 쓸 수 있다. 요새는 한글 폰트도 조금 들어와있어서 더욱 활용도가 높다.
구글 폰트 https://fonts.google.com/
카테고리별로, 두께, 가로폭, 언어별로 검색해볼 수 있어서 좋고 컬러와 사이즈 등을 자유롭게 테스트해볼 수 있다. 나는 자족구성이 많은 서체, 타이틀용 서체, 스크립트 서체 등을 검색해보곤 하는데, 워낙 사이트 구축이 미려하게 잘 되어 있어서 들어가는 것만으로도 기분이 좋아진다.
마이폰트는 학부 시절부터 봤던 사이트로 폰트 양 자체가 많아서 리서치하기에 좋다. 대부분의 폰트 회사들이 입점해있어서 여러 사이트를 비교하지 않아도 되는 장점이 있다. 서체는 그 서체를 만든 사람이 가장 잘 안다. 서체 디자이너는 자신이 만든 서체를 언제 어떻게 써야 가장 예쁜지 잘 알고 있기에 사용하기 전에 Presentation 이미지를 살펴보고 어떤 weight 조합이 적합할지 확인해보자.
사실 어도비의 Typekit도 양이 많긴한데, 아무래도 ‘폰트가 가장 많이 모여있는 곳’이라는 인식이 퍼져있어서 그런지 계속 마이폰트를 쓰게 된다. 마이폰트 내에서도 Monotype과 같은 대형 폰트 제작사의 경우 멤버십을 제공하고 있다.
4. 웹사이트를 큐레이션한 웹사이트 둘러보기
좋은 웹 폰트를 찾으려면 좋은 웹사이트를 정말 많이 봐야한다. 이미 위에서 다 언급한 내용이지만, 차별화된 웹사이트를 둘러보는 것이 웹 폰트 트렌드를 익히기에 가장 좋다. httpster나 sitesee처럼 웹사이트를 큐레이션하여 소개해주는 곳들을 종종 들어가보면서 지금 너무 안전한 방향으로만 디자인하고 있지는 않은지, 너무 정제된 서체만 사용하고 있진 않은지 생각해보자.
이 글은 2018.8.6에 작성되었고, 2020.08.30에 수정되었습니다.
2020년 기준 현직 디자이너가 추천하는 상업적 무료 폰트 (한글 폰트) 모음
안녕하세요 여우별입니다 ^_^ 드디어 티스토리 블로그에 첫 글을 쓰게 되어 넘모나 기쁩니다! 야호! XD
첫 글은 어떤 주제로 써볼까 고민하다가 디자인을 하는 사람이라면 각별히 주의해야 하는 ‘저작권’에 관하여,
그리고 저작권에 가장 많은 영향을 받는 것 중에 하나인 ‘상업적 무료 폰트’에 대해 써보려 합니다.
폰트 저작권에 대해 먼저 설명하고 상업적 무료 폰트를 추천해드릴 예정이기 때문에
‘나는 관련된 지식이 어느정도 있다!’ 생각하시는 분은 조~금 뒤로 넘어가셔서 바로 본론을 보시면 될 것 같습니다.
폰트 저작권에 대해 잘 모르시는 분은 여기서부터 천천히 설명을 보시고 추천 폰트를 확인하시면 도움이 될 것이라 생각됩니다 ^.^~!!
오늘날 참 많은 사람들이 블로그, 인스타그램, 페이스북 등 각종 SNS를 비롯하여 온라인 스토어, 유튜브에 이르기까지 아주 다양한 매체에서 수많은 컨텐츠를 제작하고 있는데요.
단 하나의 컨텐츠를 만들더라도 굉장히 방대한 자료와 이미지, 동영상, 글씨체 등을 이용하여 만들게 됩니다.
그 중에서 글자는 정보를 전달하는 가장 기본이 되는 요소로 수많은 폰트(글씨체)가 있지만, 각 폰트마다 고유의 저작권이 있습니다.
인터넷에서 본 예쁜 폰트의 라이선스를 자세히 살펴보지 않고 사용했다가 적게는 몇 십만 원, 크게는 몇 백만 원대의 막대한 벌금을 내야할 수도 있습니다 ㅠ.ㅠ
요즘에는 저작권 의식이 많이 높아져서 폰트 저작권에 대하여 어느정도 개념은 가지고 있지만, 정작 어떤 부분을 확인해야 하는지는 모르는 경우가 많은 것 같습니다.
폰트를 사용하고자 할 때 가장 중요하게 봐야 하는 것은 ‘상업적 무료 허용’의 여부입니다!
우리는 인터넷에서 많은 무료 폰트를 접하게 되는데요, 무료라고 쓰여있지만 우리가 생각하는 그 무료가 아닌 경우가 굉장히 많습니다.
상업적 무료가 명시되지 않은 무료 폰트는 대부분 개인용 무료 폰트라고 생각하시면 돼요!
(보험 안내문에 써 있는 수많은 깨알 약관처럼 폰트에도 각각의 약관이 살아있다고 생각하시면 이해하기 편하실 것 같습니다.)
똑같은 무료라도 개인용 무료 폰트와 상업적 무료 폰트는 개념이 아예 다르답니다.
개인용 무료 폰트는 개인이 비상업적 용도로 사용하는 것을 뜻합니다.
예를 들면 수익 창출이 없는 개인적인 문서 작성이나 소장 자료, 개인적으로 가질 이미지 제작, 개인적인 용도로 사용할 인쇄물 제작 등을 말합니다.
이런 폰트로 수익이 창출되는 블로그나 유튜브 등에 이용하시면 저작권 침해 고소장을 받게 될 위험이 매우 매우 큽니다.
그렇다면 상업적 무료 폰트라는 건 무엇일까요?
상업적 무료 폰트는 말 그대로 일반 회사, 관공서 등 수익 창출을 목적으로 하는 대상에게도 무료로 이용할 수 있게 허락해주는 폰트입니다! 세상 감사한 일이죠
상업적 무료가 명시된 폰트는 대부분 웹디자인, 브로슈어, 포스터, 책 등의 출판 인쇄, 영상, CI&BI 제작, 패키지 디자인 등 전반적인 작업에 폰트 이용을 허락합니다.
예를 들면 프리랜서로 일하는 디자이너가 수주 받은 웹디자인 작업을 할 때 해당 폰트를 활용한다든가, 회사차원에서 만든 디자인을 인쇄하여 다른 회사에 판매할 목적으로 만들 때, 수익창출을 걸어 둔 유튜브 영상을 만들 때, 회사의 로고를 만들 때 등 아주 여러 상황에서 활용할 수 있게 되는 것이죠.
상업적 무료 폰트라도 회사마다 제시하는 허용 범위가 조금씩 다르기 때문에 일일이 꼼꼼하게 확인하는 것이 제일 좋습니다.
더불어 뭔가 애매하다 싶은 라이선스는 해당 폰트 회사에 직접 문의하시는 게 가장 빠른 방법이고요 ^^;
자세히는 아니더라도 어느 정도는 이해가 되셨으리라 생각됩니다. 그럼 바로 추천 폰트로 넘어가 볼까요?!
지금부터 2020년 3월 기준으로 현직 디자이너가 추천하는 상업적 무료 한글 폰트를 소개해드릴게요-!!!
아, 글 시작 전에 짧은 안내를 드립니다.
*추천 폰트 선정 기준은 제목과 본문 내용에 두루두루 활용하기 좋은지, 어떠한 유료 폰트를 대체할 무료 폰트로 괜찮은지, 최근에 배포된 폰트인지를 염두에 두고 작성해드림을 미리 밝힙니다.
(실제로 새로 배포된 폰트의 내용이 많습니다. 천천히 확인해보세요~!)
*추천드리는 모든 폰트는 각 폰트마다 라이선스 범위가 다릅니다.
제가 본문에 써드리는 것은 단순 참고용이므로 본인이 쓰고자 하는 범위가 포함되는지 반드시 확인해주세요! (특히 임베딩, OFL 부분)
*현존하는 모든 폰트(글꼴 자체)를 유료로 판매하는 것은 불법입니다. 절대 판매하시면 안 됩니다!
구글 본고딕 (Noto Sans)
https://fonts.google.com/specimen/Noto+Sans+KR
본고딕 혹은 Noto Sans (노토산스)라고 불리는 이 폰트는 구글과 Adobe사가 함께 만든 폰트인데요!
아주 기본적인 고딕 폰트로 본문 내용으로 쓰기 정말 좋은 폰트예요.
폰트 두께도 아주 가늘고 얇은 Thin부터 Light, DemiLight, Regular, Medium, Bold, 가장 두꺼운 Black까지 7개나 있어 활용도가 매우 높은 편입니다.
온갖 외계어(?)까지 쓸 수 있어 글자로 재미있는 말장난 타이포 디자인을 좋아하시는 분들에게도 도움이 되는 것 같습니다(?) 아마도….?
아무튼! 개인적으로 윤고딕 대용 폰트를 찾으신다면 이만한 무료 폰트가 없을 것으로 생각됩니다^_^
지금 읽고 계시는 티스토리 글도 본고딕이 적용되어 있으니 확인하시기 쉬울 거예요~
실제 현업에서도 많이 사용하고, 디자이너의 많은 사랑을 받은 폰트입니다.
저는 자간 -30 ~ -50, 장평 95~98% 정도로 사용하는 것을 좋아합니다. 😊 (TMI 대방출)
에스코어드림 (S-Core Dream)
http://www.s-core.co.kr/who-we-are/font/
에스코어 주식회사에서 만든 에스코어드림 폰트입니다.
디자인 업계에서 큰 사랑을 받고 있는 유료폰트 HG꼬딕씨와 옴니고딕의 대체제로 아주 잘 어울리는 무료폰트라고 생각합니다.
아래 이미지를 한 번 보시겠어요?
큰 차이가 느껴지시나요? ^_^
왼쪽이 에스코어드림 (무료서체), 그리고 오른쪽이 꼬딕씨 (유료서체) 입니다.
만약 비슷하게 느껴진다면 장평과 자간 조절을 잘 해서 사용하시면 될 것 같습니다.
에스코어드림 서체는 기본적으로는 고딕 폰트인데 가로획의 끝이 약간 올라가 있어 부드러운 인상을 주는 고딕 폰트입니다^_^!
무료 서체인데도 불구하고 앞서 소개해드린 본고딕보다 더 많은 두께를 가지고 있습니다 ㅇ0ㅇ 완전 혜자
Thin, Extra Light, Light, Regular, Medium, Bold, Extra Bold, Heavy, Black 총 9가지 두께입니다.
제작물의 퀄리티를 높이는데 폰트 두께를 적절히 사용하는 것이 아주 중요한 역할을 하는데,
이러한 관점에서 에스코어드림 폰트는 혜자 오브 혜자라고 할 수 있겠습니다!
잘난체 (위드이노베이션)
https://www.goodchoice.kr/font
여기어때 폰트로 유명한 잘난체입니다.
정말 많은 분야에서 이 폰트를 사용하고 있어 폰트가 익숙하시리라 생각됩니다^.^
제목으로 쓰기 정말 좋은 폰트여서 현업에서도 많이 이용하고 있습니다.
요즘에는 특히 유튜브 썸네일 이미지로도 많이 활용하고 있는 것 같아요!
네모꼴의 꽉 찬 모듈과 둥글게 시작해서 샤프하게 끝나는 폰트라
가독성도 좋고 집중도도 높은 편이기 때문에 강조할 일이 있을 때 쓰면 참 좋은 폰트입니다.
검은고딕 (Black Han Sans, ZESSTYPE)
https://fonts.google.com/specimen/Black+Han+Sans
산돌폰트의 유료폰트인 격동고딕 서체를 좋아하시나요? 그렇다면 여기 훌륭한 대체제가 있습니다.
바로 ZESSTYPE님께서 만든 검은고딕인데요, 이미 이 폰트를 알고 계신 분이라도 꼭! 다시 확인해봐야 할 좋은 소식이 생겼으니 잠시 읽어보세요!
검은고딕은 격동고딕에 견줄 만한 폰트로 디자이너의 사랑을 듬뿍 받고 있습니다.
제일 굵은 블랙(Balck) 서체인데도 아주 깔끔하고 가독성도 좋은 폰트예요!
제목으로 활용하기 좋은 건 말할 것도 없고, 썸네일에 활용할 때 특히 눈에 잘 읽히고 좋습니다.
기존의 검은고딕 서체는 영어는 안 써지고 오직 한글만 쓸 수 있었고, 외계어(?)도 잘 쓸 수 없는 아쉬움이 있었는데
이번에 리뉴얼이 되어 기존의 한글에서 더 많은 글자를 쓸 수 있고, 영문도 추가되고, 간단한 특수문자도 추가되었답니다!!!
디자이너님 정말 감사합니다… the love…>..< https://yeowubyeol.tistory.com/20 +++ 추가 +++ 안녕하세요 여러분🧡💛 본문용 기본서체 외에 팬시용 펜글씨, 붓글씨, 캘리그라피를 아우르는 상업적 무료 손글씨 한글 폰트 추천 글을 새로 올렸어요! 귀엽고 깜찍한 손글씨나 감성적인 펜글씨를 찾고 계신다면 이 글도 한 번 확인해보세용! 감사합니다🥰 https://yeowubyeol.tistory.com/38
2021년 디자이너가 실무에서 사용하는 상업용 무료 폰트 (한글 폰트편) + 배너,상세페이지 폰트 추천
반응형
2021년 실무에서 자주 사용하는 상업용 무료폰트 추천! (한글폰트편)
안녕하세요! 저는 현재 주 업무 (메인 배너, 상세페이지 제작, 인스타 홍보) 등을
제작하고 있는 현직 웹디자이너인데요!
오늘은 디자이너에게 정말 중요하고 꼭 필요한 상업용 무료폰트 에 관해서 이야기해보려고합니다
디자인을 아무리 잘해도 폰트나 이미지에서 저작권을 위반하게되면
그 디자인작업물은 사용할 수 조차없게되는데요!
네이버 블로그에서 또는 개인에게 폰트를 공유받아서 쓰다가 저작권에 걸려서
법적으로 문제가 되는 경우도 많이 있어요!
또, 분명 처음에 사용할때는 무료폰트여서 사용하다가도 모르는사이에 유료로 전환이되며
저작권심해처럼 되는 사례도 종종있는데요!!
이를 예방하기위해서는 의심가는 저작권 폰트는 피하고
상업용무료폰트를 잘알아보고 사용하는것이 중요해요!!
웹디자이너로 일하면서 사용하는 상업용 무료폰트중에서 2021년 기준
자주 사용하는 폰트들을 추천해보겠습니다~!
1.에스코어드림
첫번째로 추천드릴폰트는 에스코어드림폰트에요
에스코어드림폰트는 제가 상세페이지나 배너를 디자인할때에도 자주사용하는 폰트인데요
에스코어 드림은 ‘Dream(꿈)’과 ‘드리다’라는 두 가지 뜻을 가지고 있어요!
꽉 찬 직사각형 구조의 제목용 글꼴로써 복고적인 형태에
현대적인 감성을 담은 에스코어드림폰트를 저작권 걱정없이 사용해보세요!!
https://www.s-core.co.kr/company/font/
2.여기어때잘난체
두번째로 추천드릴폰트는여기어때잘난체폰트에요
여기어때잘난체폰트는 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공되며
자유롭게 사용할 수 있어요!!
여기어때잘난체폰트로 귀여운 느낌의 메인배너를 만들거나 제목 등
강조하고 싶은 부분에 자주 사용한답니다~!
https://www.goodchoice.kr/font#is-fifth
3.지마켓산스(Gmarket Sans)
세번째로 추천드릴폰트는 지마켓산스폰트에요
지마켓산스폰트 또한 누구나 제약없이 사용가능하고 재배포가능하답니다~!
굵직하고 깔끔한폰트가 제목이나 강조할 부분 또는 메인배너나 상세페이지에 사용하기에도 좋아요 🙂
http://company.gmarket.co.kr/company/about/company/company–font.asp
4.나눔글꼴
네번째로 추천드릴폰트는 나눔글꼴폰트에요
네이버에서 만들어서 무료로 배포하는폰트로 개인과 기업 모두 사용가능하답니다!
네이버는 매넌 새로운 글꼴을 만들면서 무료로 배포하고 있습니다
나눔글꼴 폰트들 중에서 디자인에 따라 어울리는 폰트들을 찾아보세요 : )
저는 이중에서도 깔끔한 나눔스퀘어폰트를 자주사용하고있어요 ㅎㅎ
https://hangeul.naver.com/font
5.티몬 몬소리체
다섯번째로 추천드릴폰트는 티몬 몬소리체폰트에요
티몬몬소리체의 폰트는 티몬에게 지적 재산권이 있으며 티몬체 또한
오픈 라이선스로 무료로 사용하실 수 있어요
https://noonnu.cc/font_page/72
폰트사용범위는 서체 제작업체의 규정에 따라 달라질 수 있는점 참고부탁드릴게요!
반응형
[폰트 추천] 2021년 디자이너가 추천하는 상업용 무료 폰트 – 고딕체 3종 (Noto Sans, 프리텐다드, 에스코어 드림)
728×90
반응형
안녕하세요~
오늘 제가 소개해드릴 폰트는 고딕체입니다.
기본 중의 기본인 폰트, 고딕체
폰트를 소개해드리기 전에 고딕에 대해서 간단하게 알아보겠습니다.
영어권에서는 ‘산세리프(Sans-serif)’라고 불리는 서체로 ‘세리프(장식용 삐침)’이 없다(Sans)라는 뜻입니다.
이름대로 획의 끝에 장식이 없고, 획의 굵기가 변하지 않으며 가로획과 세로획이 거의 일정하다는 특징이 있습니다.
Black: Noto Sans / White Line: Noto Serif
한국에서는 일본을 통해 ‘ゴシック(고식)’이라는 용어가 들어온 후 ‘고딕’이라는 용어가 정착되었습니다.
1991년 문화체육부에서는 ‘고딕'(Sans-Serif)이라고 불리는 서체를 ‘돋움’이라고 지정했습니다.
마찬가지로 ‘명조'(Serif) 또한 ‘바탕’으로 지정했습니다.
돋움은 ‘본문보다 로고 타입이나 제목 용도로 도드라져 보이는 글자에 적합하다’는 의미로,
바탕은 ‘상대적으로 각 글자의 판독성이 좋아 본문에 사용하기 적합하다’는 의미로 정한 것입니다.
그러나, 당시 디스플레이 환경에서는 세리프(장식용 삐침)가 들어간 서체 ‘바탕’체는
글자 크기가 작은 본문에 사용할 경우 글자가 뭉개지고, 모양이 어색해지는 경우가 발생하여
대신 깔끔한 돋움체를 본문용으로 사용하였고, 제목용으로 바탕체를 사용하게 되었습니다.
결국, 문체부에서 지정한 의미가 애매 해진 것입니다.
‘고딕’ 명칭을 사용하는 폰트들 ‘돋움’ 명칭을 사용하는 폰트들
많은 분들이 ‘고딕’이라는 용어를 사용하기 때문에
돋움이라는 용어를 사용하는 폰트도 있지만, 대체적으로 고딕이라는 용어를 사용하고 있습니다.
G마켓 산스 처럼 ‘산스 세리프’에서 산스를 가져와 사용하는 경우도 있습니다.
이제는
‘고딕은 뭐고 돋움은 뭐지? 산스는 또 뭐야!?’
하지 마시고
‘고딕=돋움=산스(산스 세리프)’, ‘명조=바탕=(세리프)
라고 폰트를 구분하시면 됩니다!
이제 제목은 물론 본문에도 사용하기 좋은 고딕 폰트를 몇 가지 소개해드리겠습니다.
1. Noto Sans KR
노토 산스는 아시는 분들 많으실 거라 생각합니다.
[Thin / Light / Regular / Medium / Bold / Black]6가지 굵기를 제공하는 산스 세리프체입니다.
각 문자 별로 폰트가 있기 때문에
한글을 사용하는 우리는 Noto Sans ‘KR’을 받으시면 됩니다.
한/중/일 각각 문자를 지원하는 Noto Sans ‘CJK’도 받으시면 유용하겠죠?
Noto Sans KR 각 굵기별 모습
굵기가 다양하기 때문에
얇은 굵기는 본문에, 두꺼운 굵기는 제목에 쓰기 좋습니다.
또 굵기를 통해 문장 중에 강조하고 싶은 내용을 강조하기 좋습니다.
Noto Sans를 활용한 작업물 Noto Sans를 활용한 작업물
카테고리 사용 범위 허용여부 인쇄 브로슈어, 포스터, 책, 잡지 및 출판용 인쇄물 등 ○ 웹사이트 웹페이지, 광고 배너, 메일, E-브로슈어 등 ○ 영상 영상물 자막, 영화 오프닝/엔딩 크레딧, UCC 등 ○ 포장지 판매용 상품의 패키지 ○ 임베딩 웹사이트 및 프로그램 서버 내 폰트 탑재, E-book 제작 ○ BI/CI 회사명, 브랜드명, 상품명, 로고, 마크, 슬로건, 캐치프라이즈 ○ OFL 폰트 파일의 수정/ 복제/ 배포 가능. 단, 폰트 파일의 유료 판매는 금지 ○
2. 프리텐다드
‘프리텐다드’ 폰트는 저도 최근에 사용하게 된 폰트입니다.
나온 지 얼마 안 된 따끈따끈한 폰트!
프리텐다드 폰트는 무려 9가지 굵기
[Thin / ExtraLight / Light / Regular / Medium / SemiBold / Bold / ExtraBold / Black]를 지원합니다.
프리텐다드 각 굵기별 모습
프리텐다드를 활용한 작업물
카테고리 사용 범위 허용여부 인쇄 브로슈어, 포스터, 책, 잡지 및 출판용 인쇄물 등 ○ 웹사이트 웹페이지, 광고 배너, 메일, E-브로슈어 등 ○ 영상 영상물 자막, 영화 오프닝/엔딩 크레딧, UCC 등 ○ 포장지 판매용 상품의 패키지 ○ 임베딩 웹사이트 및 프로그램 서버 내 폰트 탑재, E-book 제작 ○ BI/CI 회사명, 브랜드명, 상품명, 로고, 마크, 슬로건, 캐치프라이즈 ○ OFL 폰트 파일의 수정/ 복제/ 배포 가능. 단, 폰트 파일의 유료 판매는 금지 ○
3. 에스코어 드림
‘에스코어 드림’은 (주)에스코어에서 제작한 폰트로
9가지 굵기를 제공합니다.
[Thin / ExtraLight / Light / Regular / Medium / Bold / ExtraBold / Heavy / Black]에스코어 드림 각 굵기 별 모습 에스코어 드림을 활용한 작업물
카테고리 사용 범위 허용여부 인쇄 브로슈어, 포스터, 책, 잡지 및 출판용 인쇄물 등 ○ 웹사이트 웹페이지, 광고 배너, 메일, E-브로슈어 등 ○ 영상 영상물 자막, 영화 오프닝/엔딩 크레딧, UCC 등 ○ 포장지 판매용 상품의 패키지 ○ 임베딩 웹사이트 및 프로그램 서버 내 폰트 탑재, E-book 제작 ○ BI/CI 회사명, 브랜드명, 상품명, 로고, 마크, 슬로건, 캐치프라이즈 ○ OFL 폰트 파일의 수정/ 복제/ 배포 가능. 단, 폰트 파일의 유료 판매는 금지 X
오늘은 굵기 종류가 다양한 고딕체 3가지를 소개해드렸습니다.
굵기가 다양한 만큼 폰트의 종류는 줄이면서 다양한 내용을 표현하기 좋은 폰트들입니다.
예시로 올린 작업물은 모두 해당 폰트 한 가지 만을 활용한 작업물인데요
깔끔함에 포인트도 주고 싶으시다면 다른 폰트도 함께 활용하면 좋습니다.
하지만 여러 색이 들어가면 눈이 어지러운 것처럼
폰트 종류 또한 너무 여러 가지 폰트를 넣지 않도록! 주의하시기 바랍니다.
감사합니다!
728×90
반응형
초보자를 위한 무료 폰트 추천
반응형
초보자를 위한 무료 폰트 추천
요즘엔 디자인툴을 다루지 못하는 초보자들도 망고보드나 미리캔버스 등의 사이트에서 썸네일, 웹자보, 상세페이지, 전단지 등을 만들기 쉬워졌다. 홍보물을 하나 둘 만들다 보면 더 잘 만들고 싶은 욕구가 솟구치기 마련인데, 그런 시기에 참고하면 좋을 사이트를 추천한다. 무료 폰트 추천 사이트 눈누!
눈누 https://noonnu.cc/
상업용 한글 무료 폰트 페이지. 추천, 무료 폰트, 소개, 공지 제공
메인페이지는 ‘추천 폰트’이다. 추천 폰트는 그야말로 눈누의 추천 폰트.
주기는 정확히 모르겠지만, 그때 그때 인기 있는 폰트들로 바뀌는 것 같다.
네모박스 상단은 폰트이름, 하단에는 다양한 문구로 폰트 예시를 보여준다.
튀긴음식만 먹어도 건강했으면, 열정이 밥먹여주나 모르겠다ㅎㅎㅎ 문구보는 재미도 쏠쏠 ~
문구를 직접 넣어 폰트 별로 확인할 수도 있다. 개인적으로 같은 문구로 폰트를 비교했을 때 훨씬 더 눈에 잘 들어와서, 문구를 직접 넣어보는 것을 추천한다. 작업물에 들어가는 문구를 사용하면 더 좋다.
‘추천 폰트’에서 마음에 드는 폰트를 찾지 못했다면, ‘모든 폰트’로 이동.
폰트명을 직접 검색할 수도 있으나 초보자는 폰트명이 익숙하지 않을테니 패스하고,
허용 범위, 폰트 형태, 폰트 크기를 미리 지정할 수 있다.
개인적으로 깔끔한 고딕체를 선호해서 폰트 형태만 고딕으로 설정했다.
인기순, 조회순, 최신순으로 정렬 가능
마음에 드는 폰트를 찾았다면 폰트명을 클릭한다.
다운로드 전에 라이선스 한번 더 확인하고
다운로드를 클릭하면 폰트를 다운받을 수 있는 사이트로 이동해서 다운받으면 끝!
나알아의 무료 폰트 추천
프리텐다드
Gmarket Sans
Rix열정도체
여기어때 잘난체
티몬 몬소리체
에스코어드림
나눔스퀘어
디자인은 취향에 따라 각양각색이어서 추천이 크게 의미가 없지만, 누군가에게 도움이 될 수도 있지 않을까 싶은 마음에 추천해 본다.
추가1) 요즘엔 어떤 폰트들이 있나 한눈에 보고 싶을 땐 ‘디스커버리’
추가2) 다른 홍보물에서 마음에 드는 폰트를 발견했는데, 무슨 폰트인지 모르겠을 때는 ‘무슨 폰트?’
초보자를 위한 무료 폰트 추천
반응형
[Github 블로그] 웹 폰트 설정하기 (+폰트 추천)
1️⃣ 무료 웹 폰트 사이트에서 사용할 폰트를 골라보자
눈누 https://noonnu.cc/index 구글 폰트 https://fonts.google.com/
내가 아는건 이렇게 두 사이트다. 이 두 사이트에서 예쁜 폰트를 골라보자!
🔥 첫 번째 추천 사이트 : 눈누
눈누에서 원하는 폰트를 클릭하면 웹 폰트로 사용 이라는 부분이 있다. 임포트 해야할 코드이니 복사하도록 하자!
@font-face { font-family : ‘Cafe24Oneprettynight’ ; src : url(‘https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Oneprettynight.woff’) format ( ‘woff’ ); font-weight : normal ; font-style : normal ; }
@import url(‘https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css’) ;
여담으로 내가 현재 눈누로부터 임포트하여 블로그에 적용시킨 폰트는 아래 2가지이다. 나중에 폰트를 또 바꿀지도 모르지만..!
이롭게 바탕체 https://noonnu.cc/font_page/4 카페24 고운밤 https://noonnu.cc/font_page/342
🔥 두 번째 추천 사이트 : 구글 폰트
구글 폰트에서 Language 에서 한국어르 설정하면 한국어를 지원하는 폰트 목록을 볼 수 있다. 구글 폰트에서 원하는 폰트를 찾았다면 위와 같이 오른쪽에 “Select this Style” 을 클릭하자.
폰트를 선택하고 상단에 있는, 사진 속 체크된 곳을 클릭하면 임포트 코드를 복사할 수 있는 창이 오른쪽에 뜨게 된다.
CSS 에서 Import 할 것이라면 👉 @Import 코드로 복사
코드로 복사 HTML 에서 Import 할 것이라면 👉 코드로 복사
아래에서 위의 2 가지 방법을 다 살펴볼 것이다. 그러나 성능 면에서 좀 더 나은 방법은
태그 안에 를 사용하여 웹 폰트를 임포트 하는 것이라고 들었다! 웹 지식이 얕은 탓에 왜 그런지에 대한 이유는 잘 모르겠다..😅 아무튼 나는 후자를 선택했다.@import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap’) ;
여담으로 내가 구글 폰트로부터 임포트하여 블로그에 적용시킨 폰트는 아래 2가지이다. 나중에 폰트를 또 바꿀지도 모르지만..!
2️⃣ 임포트 하기
1) CSS 에 Import 하는 방법
📜main.scss
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap’) ;
웹코드를 복사해서 임포트하면, 굳이 폰트 파일을 다운 받아 로컬 환경에 저장할 필요가 없다. 이 코드를 복사하여 “📜main.scss” 파일에 붙여 넣도록 하자. 나는 minimal-mistake 테마를 사용하고 있고 이 테마의 메인 css 파일은 📜main.scss 파일이기 때문에 이 곳에 코드를 붙여넣어 임포트 하였지만, Import 문을 모아둔 css 파일이라면 어디든 상관없을 것이다. 그대로 붙여넣기 해주면 된다.
2) HTML 에 Import 하는 방법
📜default.html
내가 쓰고 있는 minimal-mistake 는 📜default.html 에
태그를 가지고 있다. 그래서 여기에 넣어주었다.
역시 “웹알못” 이지만.. 태그를 앞에 써주면 성능상 더 빠르다고 하더라! (구글 PageSpeed Insight 를 참고하였다.)
3️⃣ css 에서 폰트 적용하기 👉 font-family : “폰트 이름”
font-family : “Nanum Gothic”
이런식으로 폰트를 적용하고자 하는 CSS 영역에 위와 같은 코드 font-family : “폰트 이름” 을 넣어주면 된다.
🔥 폰트 이름 확인 하는 방법
구글 폰트
구글 폰트의 임포트 코드 복사하는 곳에서 폰트 이름을 확인할 수 있다. 위 사진 속 폰트의 이름은 “Roboto”인 것이다.
눈누
@font-face { font-family : ‘Cafe24Oneprettynight’ ; src : url(‘https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Oneprettynight.woff’) format ( ‘woff’ ); font-weight : normal ; font-style : normal ; }
이 폰트의 이름은 “Cafe24Oneprettynight” 인 것이다. 이런 형태의 코드는 font-family 를 확인하면 된다.
@import url(‘https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css’) ;
근데 이런 형태의 코드는 폰트 이름이 불분명했다. 폰트마다 다르겠지만 위 링크의 경우엔 폰트 이름이 “font-iropke-batang” 이 아니였다..! 즉, 링크만으로 폰트 이름을 알 수가 없었다.
그래서 이롭게 바탕체를 만든 회사의 사이트에 찾아가보니 이렇게 친절하게 “Iropke Batang” 이라고 알려주었다..! 링크만으로 폰트 코드명을 확인할 수 없다면 이렇게 해당 폰트를 제작한 사이트의 튜토리얼을 참고해보자. (마찬가지로, ‘눈누’에서는 @import 코드만 제공하고 있는데 이롭게 바탕체 공식 사이트에 들어가니 코드도 알려주고 있었다.)
🔥 내가 적용한 방법
📜_variable.scss
$serif : “Coming Soon” , Georgia , Times , serif ! default ; $sans-serif : “Iropke Batang” , – apple-system , BlinkMacSystemFont , “Roboto” , “Segoe UI” , “Helvetica Neue” , “Lucida Grande” , Arial , sans-serif ! default ; $monospace : “Nanum Gothic Coding” , Monaco , Consolas , “Lucida Console” , monospace ! default ; $cute : “Cafe24Oneprettynight” ! default ;
내가 사용하고 있는 minimal-mistake 테마는 📜_variable.scss 파일에 전체적인 css 파일들이 사용할 “전역 변수”를 한데 모아 선언하고 있다. $serif , $sans-serif , $monospace 는 minimal-mistake 자체에서 원래 있던 변수이고 $cute 는 내가 만든 변수이다.( 대충 지었다.. ) 이 변수에 위에서 알아낸 “폰트 이름”들을 맨 왼쪽 에 적어준다. 왼쪽에 적힌 폰트일 수록 우선순위를 높게 설정해주는 것이기 때문에 폰트가 블로그에 반영되기 위해선 가장 왼쪽에 써주어야 한다.
내가 설정한 변수로 예를 들자면
font-family : $ serif ;
이 CSS 영역의 폰트는 “Coming Soon” 폰트가 될 것이고
font-family : $ monospace ;
이 CSS 영역의 폰트는 “Nanum Gothic Coding” 폰트가 될 것이고
font-family : $ cute ;
이 CSS 영역의 폰트는 “Cafe24Oneprettynight” 폰트가 될 것이다!
이렇게 변수로 대입하지 않고 직접 font-family: “Roboto”; 이런식으로 해줘도 상관없다!
4️⃣ 마무리
반영된 css 파일들을 저장하고 커밋-푸쉬 하면 적용 완료!
🤔 TMI
블로그 커스텀에 대한 포스팅을 9 개월만에 하게 되었다. 여유 생길 때마다 하나씩 올려봐야겠어..🔥
폰트 바꾸니까 블로그가 더 기요워졌다.. 희희 진작 바꿀걸!
🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄
맨 위로 이동하기
좋은 웹폰트를 찾기 위한 디자이너의 4가지 팁
웹디자인을 하다 보면 필연적으로 웹 타이포그래피 레퍼런스를 자주 찾게 된다. 보통은 비핸스(Behance)나 핀터레스트(Pinterest) 등을 통해 디자인 레퍼런스를 찾을 수 있겠지만 웹 타이포그래피는 실제 적용 사례를 보는 게 가장 좋다. 그래서 몇 가지 리서치 팁을 공유해본다.
1. 좋아 보이는 폰트 파헤치기
강력하게 추천하는 방법은 유려한 디자인이 잘 구현된 웹사이트를 찾아서 어떤 서체를 어떻게 적용했는지 파헤치는 것이다. 사실 모든 디자인 레퍼런스를 이렇게 찾긴 하지만 웹은 더 깊이 파헤칠 수 있다. 만약 ‘메일침프’의 서체와 그 활용 방식이 좋아 보인다면 메일침프의 코드를 뜯어보는 식이다.
‘Chrome inspector(사이트 검사 도구)’는 기본 중의 기본, 정석 중의 정석이다. 알고 싶은 부분에 커서를 두고 오른쪽 클릭하면 ‘검사’라는 항목이 있다.
메일침프 웹사이트의 경우 (하늘색 형광펜 부분 참고) line-height 1에 font-size 3.375rem, font-family는 Cooper를 사용했다. 크롬 인스펙터는 폰트뿐 아니라 HTML, CSS를 포함해 어떤 코드로 짰는지 확인하고 이를 변형할 수 있는 훌륭한 도구다. 서체를 고르는 것도 중요하지만 디지털 환경에서 조판하는 것이 중요하기 때문에 자간과 행간, 크기를 얼마나 사용하는 게 좋을지 자주 확인하게 된다.
5년 전, 처음 퍼블리싱 작업을 할 때 모든 요소를 닥치는 대로 파악한 후 복사–붙여넣기 해봤다. 시간은 오래 걸리지만 직접 해보면 잊을 수 없는 좋은 공부법이다. 종종 디자이너는 자신이 만든 디자인과 개발 결과가 똑같지 않은 것에 대한 의문을 갖는데, 이것만 할 줄 알아도 프론트엔드 개발자와 소통이 편해지고, 디자인 작업물에 근접한 결과물을 얻을 수 있다.
코드 확인이 어렵다면 크롬 플러그인 중 하나인 ‘WhatFont’를 사용해도 좋다. 검사 도구에 나오는 정보는 모두 불러오기 때문에 편리하다. 특히 서체 이름만 빠르게 확인하고 싶을 때 유용하다.
그리고 디자인 에이전시의 웹사이트를 둘러보는 것도 도움된다. 자사의 포트폴리오 사이트에 아이덴티티를 녹일 수 있는 서체들을 적용했기 때문이다.
Mother Design에 적용된 서체: NBInternational
Redantler에 적용된 서체: Work Sans
Pentagram에 적용된 서체: Neue Haas Grotesk
2. 함께 어울릴 폰트 찾아보기
좋아 보이는 몇 가지 폰트를 발견했다면 함께 어울릴만한 폰트를 찾는 것도 좋은 방법이다. 타이틀 서체로 그로테스크 계열 산세리프 서체를 사용했다면, 본문에 어울릴 세리프 폰트를 찾고 싶어지는 게 디자이너의 마음. 하나의 폰트를 전체적으로 적용해도 좋지만 폰트 구경하는 걸 좋아해서 그런지 어울릴 만한 다른 폰트를 찾아보고 페어링해본다.
https://www.typewolf.com/
‘Jeremiah shoaf’가 운영하는 웹폰트 아카이브 웹사이트로 자주 방문했던 곳이다. 타이포그래피를 특히 신경 쓴 사이트들을 큐레이션해 보여주며 폰트 페어링, 무료 폰트, 타이포그래피 팁 등 유용한 정보가 가득하다. 웹 타이포그래피 안목을 기르는 데 좋다. 뉴스레터도 받아볼 수 있다.
https://www.jeremiahshoaf.com/
가장 많이 쓰이고 있는, 트렌디한 폰트를 모아서 차트로 보여주는데 꼭 웹폰트 트렌드와 100% 일치하는 건 아니지만 생각 이상으로 잘 맞는다. 해당 서체를 누르면 그 서체를 사용한 웹사이트 리스트가 뜨기 때문에 폰트 조합 비교에도 용이하다.
‘Font Reach’는 수백만 개의 웹사이트를 크롤링해 서체 정보를 모아 검색할 수 있는 웹사이트다. 예를 들어 ‘Poppins’라는 폰트가 좋아 보여서 이 폰트를 사용한 다른 웹사이트를 찾아보고 싶다면 여기서 검색할 수 있다. 그러면 Poppins 폰트를 어떻게 써야 예쁜지 알 수 있다. 대부분 시간을 많이 들인 만큼 예쁜 것을 찾을 수 있다. 예쁜 폰트를 찾아보고 어울릴 만한 폰트를 찾아보고, 다시 그 폰트들을 예쁘게 쓴 다른 사례를 찾아보고. 무한 반복하다 보면 ‘어떤 폰트가 예쁜지’를 판단하는 기준이 생긴다. 무조건 예쁜 폰트를 많이 보면 좋은 결과물에 도달할 수 있다.
3. 실제로 사용해보기
사용할 서체를 골랐다면 실제로 구매해보거나 데모 버전을 사용한다. 직접 해보는 것보다 좋은 방법은 없다. 구글 폰트는 각종 웹사이트 플러그인으로도 많이 나와있기 때문에 코드 작성할 줄 모르는 사람도 쉽게 쓸 수 있다. 예를 들면 워드프레스에 구글 폰트를 불러오는 플러그인이 굉장히 많아서 어떤 폰트를 고를지만 생각해두면 바로 불러다 쓸 수 있다. 요즘은 한글 폰트도 조금 구성돼있어서 활용도가 높다.
https://fonts.google.com/
https://www.myfonts.com/
‘마이폰트’는 학부 시절부터 봤던 사이트로 폰트 양 자체가 많아서 리서치하기에 좋다. 대부분의 폰트 회사가 입점해있어 여러 사이트를 비교하지 않아도 되는 장점이 있다. 서체는 그 서체를 만든 사람이 잘 안다. 서체 디자이너는 자신이 만든 서체를 언제 어떻게 써야 가장 예쁜지 알고 있기에 사용하기 전에 ‘Presentation’ 이미지를 살펴보고 어떤 weight 조합이 적합할지 확인해보자.
사실 어도비의 ‘Typekit’도 양이 많긴 하지만 ‘폰트가 가장 많이 모여있는 곳’이라는 인식이 퍼져있어 그런지 계속 ‘마이폰트’를 쓰게 된다. 마이폰트 내에서도 ‘Monotype’과 같은 대형 폰트 제작사의 경우 멤버십을 제공하고 있다.
4. 웹사이트를 큐레이션 한 웹사이트 둘러보기
마지막으로 좋은 웹 폰트를 찾으려면 좋은 웹사이트를 봐야 한다. 이미 위에서 다 언급한 내용이지만, 차별화된 웹사이트를 둘러보는 것이 웹 폰트 트렌드를 익히기에 가장 좋다. ‘httpster’나 ‘sitesee’처럼 웹사이트를 큐레이션해 소개해주는 곳들을 종종 들어가 보면서 너무 안전한 방향으로만 디자인하고 있지는 않은지, 지나치게 정제된 서체만 사용하고 있진 않은지 생각해보자.
https://httpster.net/2020/aug/
https://sitesee.co/
Favorite
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지 뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.
Tags
키워드에 대한 정보 웹 폰트 추천
다음은 Bing에서 웹 폰트 추천 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 디자이너 추천하는 상업적, 저작권 무료 폰트 완벽 모음! // 존코바 // 디자인 // 유튜버
- 무료폰트
- 폰트추천
- 저작권무료
- 폰트저작권
- 폰트무료
- font
- 유튜버
- 크리에이터
- 폰트다운
- 디자인
- 디자이너
디자이너 #추천하는 #상업적, #저작권 #무료 #폰트 #완벽 #모음! #// #존코바 #// #디자인 #// #유튜버
YouTube에서 웹 폰트 추천 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 디자이너 추천하는 상업적, 저작권 무료 폰트 완벽 모음! // 존코바 // 디자인 // 유튜버 | 웹 폰트 추천, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.