우리가 매일 열람하는 웹 사이트이지만 다양한 글꼴이 사용됩니다.
사이트에 따라 "웹 글꼴'가 사용되었을 수 있습니다.
열람할 때는 별로 의식하지 않는 부분이지만, 사이트 제작에 관계되는 사람에게 있어서는 「웹 폰트」의 이용은 다양한 이점이 있습니다.
거기서, Web 폰트의 기본적인 구조나 메리트, 한 걸음 앞의 사용법 등, Web 폰트의 이로하를 소개하겠습니다!
웹 글꼴의 작동 방식
◆ 웹 글꼴 개요
웹 폰트는 서버로부터 지정된 폰트를 전달해, 웹 사이트에서 표시하는 구조입니다.
예를 들면 모리사와의 「UD신고」를 Web 사이트내에서 지정했을 경우, 통상은 열람자의 PC나 스마트폰에 「UD신고」가 들어가 있지 않으면 표시할 수 없습니다만,웹 글꼴을 사용하면 뷰어 기기에 글꼴이 없어도 문제없이 표시할 수 있습니다.
원래 웹 사이트의 글꼴이 어떻게 표시되는지 알고 계십니까?
문자가 문제 없게 읽으면 별로 문자나 폰트라고 하는 것은 의식하지 않는 부분이므로, 생각한 적도 없다고 하는 분이 많을지도 모릅니다.
일반 웹 사이트에서는 사이트를 보는 쪽의 PC나 스마트폰 등의 단말에 들어 있는 글꼴로 문자가 표시됩니다.
사이트 제작자가 특별히 글꼴을 지정하지 않으면 브라우저의 기본 글꼴로 표시됩니다. 예를 들어 Google 크롬을 사용한 경우 Windows에서는 메리리오, Mac OS이면 히라기노 각고 ProN W3로 표시됩니다.
같은 사이트를 보더라도 사람이 표시하는 글꼴이 다를 수 있습니다.그렇군요.
사이트 제작측이 특정의 폰트를 지정할 수는 있습니다만, 열람자가 사용하고 있는 단말의 OS나 버젼에 의해 인스톨 되고 있는 폰트가 다르기 때문에, 열람자의 단말에 그 폰트가 들어 있지 않은 경우, 다른 폰트에 옮겨놓아 표시되게 됩니다.
반면,웹 폰트라면 열람측의 환경에 좌우되는 일 없이, 지정한 폰트로 표시를 할 수 있다그렇습니다.
◆웹폰트의 장점
웹 폰트의 구조는 알 수 있었습니까?
그럼 다음에 웹 폰트를 사용하면 무엇이 좋은지, 그 이점을 소개합니다.
1. 미디어를 넘어 이미지를 통일할 수 있다
예를 들어 한 잡지에 관해서, 종이 매체의 것과 웹사이트에서 다른 폰트를 사용해 버리면, 이미지에 어긋남이 생길 가능성이 있습니다.
웹 글꼴을 사용하면인쇄물에서 사용한 것과 동일한 글꼴을 쉽게 웹 사이트에서 사용수 있으며 미디어를 넘어 이미지를 통합할 수 있습니다.
2. 문자를 이미지로 작성한 경우의 문제점을 해결할 수 있다
지금까지는 사용하고 싶은 폰트를 웹상에서 표시하려면 화상화 밖에 없었습니다.
하지만 웹 글꼴을 사용하면 이미지 없이 사용할 글꼴을 표시할 수 있습니다.
이미지가 아닌 텍스트 기반으로 사이트를 만들면 다음과 같은 이점이 있습니다!
・문자 수정이 간단
화상화한 폰트를 수정하려면 화상 그 자체를 수정할 필요가 있어서 힘들었습니다만, Web 폰트라면 문자를 바꿔 넣을 뿐이므로, Web 사이트의 작성·수정을 효율화할 수 있습니다.
· 확대해도 선명한 표시
화상화한 폰트는 스마트폰등으로 화면을 확대하면 표시가 거칠어져, 문자가 읽기 어려워져 버리는 일이 있습니다. 웹 폰트라면 확대 축소해도 클리어에 표시할 수 있습니다.
・검색성도 유지
이미징된 글꼴에는 문자로 정보가 없으므로 그대로 검색에 걸리지 않습니다. 문자 정보를 alt 속성으로 태그에 기록할 수는 있지만 번거로울 수 있습니다. Web 폰트라면 당연히 문자 정보를 가지고 있으므로, 그대로 검색에 히트시킬 수 있어 SEO 대책이 됩니다.
※SEO 대책이란: 웹사이트를 검색 결과로 보다 많이 노출하기 위해 실시하는 일련의 대처를 가리킵니다.
・자동 번역이나 음성 읽기 기능 등도 활용 가능
화상화한 폰트는 문자로서의 정보가 없기 때문에, 자동 번역이나 음성 독해 기능을 사용할 수 없습니다. 읽기 기능에 대해서는 문자 정보를 alt 속성으로서 태그에 기술하는 것으로 대응 가능합니다만, 전술한 바와 같이 수고가 걸립니다. 웹 폰트라면 이러한 기능도 문제없이 활용할 수 있습니다.
문자 표현에 한 가지 궁리. 웹 글꼴 사용 팁
Web 폰트의 기본을 이해한 다음, 한 걸음 더 밟은 “유익한 요령”을 소개한 3개의 기사를 안내합니다.
아무도 실제 제작 현장에서 바로 도움이 되는 TIPS뿐입니다.
사람명, 지명도 이것으로 확실 Web 폰트로 이체자를 사용하자!
같은 문자로도 미묘하게 모양이 다른 「이체자」. 사람명이나 지명등으로 올바르게 표기하고 싶을 때에 도움이 되는, Web에서의 이체자 대응의 포인트를 소개하고 있습니다.
반응형 디자인에 적합한 폰트란? 콘덴스 서체를 잘 활용하자!
스마트폰이나 PC 등, 화면폭에 따라 문자의 보이는 방법이 바뀔 때 편리한 것이 「콘덴스 서체」. 좁은 공간에서도 가독성을 유지하는 궁리가 막혀 있습니다.
「화유럽 혼식」 「유럽문 합자(리가챠)」 「스와시자형」으로 유럽문서체를 활용하자!
일본어와 영어를 자연스럽게 조합하고 싶을 때나, 유럽문서체로 조금 세련된 악센트를 더하고 싶을 때에 추천. 합자(리가챠)나 스와시등의 사용법을 부드럽게 해설하고 있습니다.
Web 폰트의 구조를 알고, 약간의 궁리를 더하는 것만으로, 문자의 표현은 훨씬 퍼집니다.
꼭 이러한 기사를 참고로 디자인에 "글꼴의 힘"을 도입해보십시오.
모리사와 웹 글꼴
모리사와에서도 웹 글꼴을 제공합니다.
모리사와의 웹 폰트 서비스Morisawa Fonts 웹 글꼴"는 고품질의 다양한 글꼴을 제공하고 있으며, 고급 타이포그래피를 실현하는 기능도 풍부하게 갖추고 있습니다.
이용 규모에 맞춘 플랜과 월계약/연간계약의 계약방식을 준비하고 있으며, 웹사이트 제작·운영을 폭넓게 서포트하고 있습니다.
| 웹 글꼴 Lite | 웹 글꼴 | |||
| 계약 기간 | 1개월 | 1년 | 1개월 | 1년 |
| 기본 PV 수 / 가격 | 25만PV 2,750엔 | 300만PV 33,000엔 | 100만PV~ 5,500엔～ ※100만PV 단위로 400만PV까지 | 1,200만PV~ 66,000엔～ ※1,200만PV 단위로 4,800만PV까지 |
| 프로젝트 수 | 1 | 무제한 | ||
| 이용 서체 수 | 5 서체까지 | 프로젝트당 10개 서체까지 ※프로젝트 수 무제한 | ||
| 등록 도메인 수 | 최대 4개 도메인 | 프로젝트당 최대 10개 도메인 ※프로젝트 수 무제한 | ||
▼모리사와의 웹 폰트에 관한 자세한 것은 이하를 참조해 주세요
이벤트 아카이브 안내
모리사와에서는 디자인과 브랜딩을 테마로 한 무료 온라인 이벤트를 실시하고 있습니다.
과거에 개최된 가운데, 웹 사이트의 제작이나 Web 폰트를 주제로 한 이벤트를 소개합니다. 꼭 아카이브 동영상을 보시고, 웹 사이트의 설계나 제작에 도움을 주세요!
그렇다, 웹 폰트로 가자. 캐릭터를 의식한 폰트 선택과 문자조
Web의 세계에서는 조금 허들의 높은, 문자와 문자를 늘어놓는(조판) 표현 방법.
본 세미나에서는, NEWTOWN 대표 이누카이씨가 실제로 제작한 Web 사이트를 실례로, 지면의 디자인으로 사용되어 온 테크닉이나 폰트의 사용법을 전해 주셨습니다.
아카이브 시청 신청은여기
웹 디자이너 1년에 듣고 싶었던 명명에서 도움이 되는 문자 표현의 에센스
Web디자인의 최첨단에서 활약되고 있는 쿠와하라 쇼씨를 초대해, 「자신 자신이 Web디자이너 1년째 무렵에 알아 두고 싶었던, 폰트에 얽힌 저것 이것」을 테마로, Web에서의 문자 표현을 총괄합니다.
아카이브 시청 신청은여기
브랜드를 훼손하지 않는 웹 접근성
– 공수로 균형있게 실현하는 브랜드 가치 –
「Good Design, Good Experience」를 내걸어 Web제작이나 Web마케팅을 다루는 주식회사 백화점님을 초대해, 유저가 사이트를 통해 얻을 수 있는 정보나 체험, 또, 기회 손실이나 이미지 다운 등으로 브랜드를 훼손하지 않는 노력・준비의 중요성에 대해 이야기해 주셨습니다.
아카이브 시청 신청은여기
문의
주식회사 모리사와 이벤트 사무국
【E-mail】 public-biz@morisawa.co.jp
주식회사 모리사와가 운영하고 있는 사이트입니다.
모리사와에 대해서는여기