반응형
웹사이트에 표시할 텍스트의 글씨체를 결정하는 글꼴이 있습니다.
하지만 일률적으로 글꼴이라고 해도 크게 두 종류가 있는데,
디바이스 폰트
WEB 글꼴
의 두 가지가 존재합니다.
대부분의 사이트에서는 디바이스 폰트라고 불리는 폰트가 사용되고 있으며, 일본 사이트에서는 ′Arial·sansserif·메이리오·Roboto′ 등의 폰트가 자주 채택되고 있습니다.
예를 들어 구글 검색 페이지에서는 Arial과 sans-serif가 사용되고 있고, 영어 숫자는 arial·일본어 등 전각 문자는 sans-serif가 사용되고 있습니다.
야후 톱 페이지라면 「메이리오」에서 통일이라고 하는 것처럼, WEB 글꼴이 사용되고 있는 예는 거의 없습니다.
이번 시간에는 디바이스 글꼴이 구체적으로 어떤 글꼴인지 디바이스 글꼴을 이용하는 장단점을 소개하겠습니다.
디바이스 폰트란?
디바이스 폰트란 간단히 말해서 브라우저를 동작시키고 있는 디바이스(Windows 등)에 처음부터 설치되어 있는 폰트를 말합니다.
사용하는 디바이스에 따라 표준 글꼴이 달라 Windows 단말기에서는 ′메이리오′가 표준 글꼴로 되어 있습니다.Mac에서는 히라기노각 고딕이 표준 글꼴로 설정되어 있습니다.
웹사이트 측에서 지정하는 폰트를 지원하지 못할 경우 자동으로 표준 설정되어 있는 디바이스 폰트가 사용되게 되어 있습니다.
WEB 글꼴이란?
웹폰트란 기기에 아예 설치되지 않은 폰트로 이용하려면 수시로 다운받아야 합니다.
디바이스 글꼴과 비교하여 독특한 글꼴이 많아 개성 있는 표현이 가능합니다.
다만, 반드시 웹 폰트 데이터의 다운로드가 필요하기 때문에 통신량이 증가하는 것 외에 웹 페이지의 읽기 속도도 느려지는 단점이 존재하기 때문에 사이트 디자인을 생각할 때는 웹 폰트에 드는 비용도 고려할 필요가 있습니다.
디바이스 폰트의 장단점
디바이스 글꼴은 웹 글꼴에는 없는 장점이나 단점이 존재합니다.
다음은 그 장점·단점에 대해 알아보겠습니다.
메리트
단말기별 호환성에 신경쓰지 않고 웹사이트를 제작할 수 있다
브라우저는 장치에 설치된 장치 글꼴을 사용하여 텍스트를 표시하기 때문에 일부러 사이트 운영자가 글꼴 파일을 준비할 필요가 없습니다.
글꼴 선택을 디바이스에 맡기도록 하면 콘텐츠 제작에만 주력할 수 있습니다.
웹 폰트 읽기에 실패해도 텍스트를 표시할 수 있다
어떤 이유로 웹 폰트 다운로드가 실패할 수도 있을 것입니다.
그런 경우 자동으로 디바이스 폰트가 사용되기 때문에 글자가 깨지거나 텍스트 부분이 하얗게 변하는 일은 없습니다.
텍스트 표시에 사용되는 글꼴이야말로 의도하지 않은 것이었다고 해도 문장이 전혀 보이지 않게 되는 일은 없기 때문에 안심입니다.
WEB 페이지의 고속 표시가 가능하다
WEB 글꼴은 하나당 몇 MB인 것이 일반적이며 페이지 읽기 속도에도 영향을 미칩니다.
하지만 디바이스 폰트라면 그 폰트 파일의 다운로드가 일절 발생하지 않고, 웹 폰트를 사용했을 때와 비교해 페이지의 빠른 읽기가 가능합니다.
특히 일본어 대응 WEB 글꼴이라면 상당히 용량이 크고 수십 MB 있는 경우도 자주 있습니다.
속도 제한에 걸린 사용자라면 웹 폰트 다운로드 때문에 페이지 읽기에 장시간 걸리는 경우도 적지 않습니다.
그러니 사용자를 생각한다면 웹 폰트가 아닌 디바이스 폰트 쪽을 사용하도록 합시다.
Page Speed Insight에서 점수가 떨어지지 않음
WEB 폰트를 사용하는 경우, 읽기의 비동기화등을 실시하지 않으면 Page Speed Insight의 스코어가 급격히 저하됩니다.
Page Speed Insight가 낮으면 페이지 읽기 속도도 느려지는 경향이 있기 때문에 궁금하신 분들은 디바이스 폰트를 사용하도록 하겠습니다.
디메리트
장치에 따라 장치 글꼴이 다르다
디바이스 글꼴은 모든 디바이스에서 통일되어 있지 않을까 생각하실 수도 있지만, 그런 것은 아닙니다.
예를 들면 Windows라면 표준의 디바이스 폰트가 「메이리오」이고 Mac의 경우는 「히라기노각 고딕」입니다.
큰 차이는 없지만, 약간 텍스트 표시에 차이가 있으므로, 완벽하게 통일하고 싶은 경우는 Windows·Mac 어느 쪽에서도 사용할 수 있는 「유고딕」을 CSS로 지정하도록 합시다.
일본어 대응 글꼴이 적다
디바이스 폰트의 대부분은 일본어 지원되지 않습니다.
매우 자주 사용되는 ′sans-serif′ 등 일본어에 대응한 디바이스 사실은 그다지 많지 않습니다.
일본어에 대응한 디바이스 폰트는, Windows 의 경우라면 이하의 것이 일반적입니다.
메이리오
MS UI Gothic
Meiryo UI
유고딕
Roboto
하지만 웹 폰트라면 매우 많은 일본어 지원 폰트가 있기 때문에 다른 사이트와 차별화하고 싶은 경우에는 웹 폰트를 사용해야 할 것입니다.
독특한 글꼴이 적다
디바이스 폰트는 읽기 쉽고 어디서나 사용할 수 있는 일반적인 폰트에 한정되어 있기 때문에 독특한 폰트가 거의 없고, 일본어 대응 폰트에 이르러서는 하나도 없습니다.
하지만 웹 폰트라면 손글씨풍 폰트나 칼집무늬 폰트 등 실로 독특한 폰트가 많이 갖추어져 있습니다.
出典: http://www2s.biglobe.ne.jp/~fub/font/kirieji.html
또한 WEB 글꼴의 경우 Font Awesome이나 Icomoon 등을 사용하여 Twitter 아이콘 등 아이콘 글꼴도 사용할 수 있습니다.
디바이스 폰트만으로는 역부족인 상황에서 웹 폰트를 사용하도록 합시다.
디바이스 폰트 사용법
WEB 페이지 측에서 사용할 디바이스 글꼴을 지정할 경우 ′fant-family′ 속성을 사용합니다.
글꼴을 지정할 때는 글꼴을 변경하고자 하는 요소에 대해 id·class 나름을 지정하여 CSS로 디자인을 가공하십시오.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
기본적으로는 이렇게 지정합니다.기타 글꼴 크기나 굵은 글씨 등의 문자 장식은 별도로 지정하도록 합니다.
복수 폰트 지정하고 싶다
작성 폰트 지정을 원하는 경우는 반각의 쉼표 「,」로 구분합니다.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
맨 처음에 기재한 글꼴부터 우선적으로 사용되므로 가장 이용하고 싶은 글꼴을 맨 먼저 지정하도록 합니다.
예를 들면 상기 샘플이라면 「메이리오」를 사용할 수 있는지 검증되어, 사용할 수 있으면 메이리오로 텍스트 표시. 할 수 없는 경우는 다음의 「히라기노 각 고딕」을 사용할 수 있는지 체크하도록 되어 있습니다.
반각 공간을 포함하는 글꼴 이름을 지정하는 방법
글꼴 안에는 ′Yu Gothic′ 등 반각 공간을 포함한 이름의 글꼴이 존재합니다.
이 경우 더블 쿼테이션 ′′ 또는 싱글 쿼테이션 ′′으로 글꼴 이름을 에워싸요.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
반각 공간 없이도 자동으로 대응해 주는 경우도 있지만 기본적인 쿼테이션으로 글꼴 이름을 둘러싸는 것이 규칙이므로 지키도록 합시다.
마지막으로 ′sans-serif′를 설정할 필요는 없다.
font-family 속성을 설정할 때는 마지막에 sans-serif를 지정한다는 통설이 있는데, 이것은 필수가 아닙니다.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
최신 브라우저는 웹사이트 측에서 지정하는 디바이스 폰트 중 어느 것도 지원하지 않을 경우 자동으로 사용할 수 있는 폰트로 대체되므로 굳이 지정할 필요가 없습니다.
절대 지정할 필요가 없다는 것은 아니지만, 절대 지정해야 할 이유도 없기 때문에 기억해 둡시다.
장치 글꼴 목록
다음은 Windows·Mac·스마트폰에 탑재되어 있는 일반적인 디바이스 폰트에 대해 소개하겠습니다.
윈도우, 맥, 스마트폰에 따라 디바이스 폰트가 다르므로 font-family 속성에서 디바이스 폰트를 지정할 때 참고해 보세요.Windows
디바이스 폰트
결과
1
2
3
4
5
6
7
8
9
10
11
하지만 일률적으로 글꼴이라고 해도 크게 두 종류가 있는데,
디바이스 폰트
WEB 글꼴
의 두 가지가 존재합니다.
대부분의 사이트에서는 디바이스 폰트라고 불리는 폰트가 사용되고 있으며, 일본 사이트에서는 ′Arial·sansserif·메이리오·Roboto′ 등의 폰트가 자주 채택되고 있습니다.
예를 들어 구글 검색 페이지에서는 Arial과 sans-serif가 사용되고 있고, 영어 숫자는 arial·일본어 등 전각 문자는 sans-serif가 사용되고 있습니다.
야후 톱 페이지라면 「메이리오」에서 통일이라고 하는 것처럼, WEB 글꼴이 사용되고 있는 예는 거의 없습니다.
이번 시간에는 디바이스 글꼴이 구체적으로 어떤 글꼴인지 디바이스 글꼴을 이용하는 장단점을 소개하겠습니다.
디바이스 폰트란?
디바이스 폰트란 간단히 말해서 브라우저를 동작시키고 있는 디바이스(Windows 등)에 처음부터 설치되어 있는 폰트를 말합니다.
사용하는 디바이스에 따라 표준 글꼴이 달라 Windows 단말기에서는 ′메이리오′가 표준 글꼴로 되어 있습니다.Mac에서는 히라기노각 고딕이 표준 글꼴로 설정되어 있습니다.
웹사이트 측에서 지정하는 폰트를 지원하지 못할 경우 자동으로 표준 설정되어 있는 디바이스 폰트가 사용되게 되어 있습니다.
WEB 글꼴이란?
웹폰트란 기기에 아예 설치되지 않은 폰트로 이용하려면 수시로 다운받아야 합니다.
디바이스 글꼴과 비교하여 독특한 글꼴이 많아 개성 있는 표현이 가능합니다.
다만, 반드시 웹 폰트 데이터의 다운로드가 필요하기 때문에 통신량이 증가하는 것 외에 웹 페이지의 읽기 속도도 느려지는 단점이 존재하기 때문에 사이트 디자인을 생각할 때는 웹 폰트에 드는 비용도 고려할 필요가 있습니다.
디바이스 폰트의 장단점
디바이스 글꼴은 웹 글꼴에는 없는 장점이나 단점이 존재합니다.
다음은 그 장점·단점에 대해 알아보겠습니다.
메리트
단말기별 호환성에 신경쓰지 않고 웹사이트를 제작할 수 있다
브라우저는 장치에 설치된 장치 글꼴을 사용하여 텍스트를 표시하기 때문에 일부러 사이트 운영자가 글꼴 파일을 준비할 필요가 없습니다.
글꼴 선택을 디바이스에 맡기도록 하면 콘텐츠 제작에만 주력할 수 있습니다.
웹 폰트 읽기에 실패해도 텍스트를 표시할 수 있다
어떤 이유로 웹 폰트 다운로드가 실패할 수도 있을 것입니다.
그런 경우 자동으로 디바이스 폰트가 사용되기 때문에 글자가 깨지거나 텍스트 부분이 하얗게 변하는 일은 없습니다.
텍스트 표시에 사용되는 글꼴이야말로 의도하지 않은 것이었다고 해도 문장이 전혀 보이지 않게 되는 일은 없기 때문에 안심입니다.
WEB 페이지의 고속 표시가 가능하다
WEB 글꼴은 하나당 몇 MB인 것이 일반적이며 페이지 읽기 속도에도 영향을 미칩니다.
하지만 디바이스 폰트라면 그 폰트 파일의 다운로드가 일절 발생하지 않고, 웹 폰트를 사용했을 때와 비교해 페이지의 빠른 읽기가 가능합니다.
특히 일본어 대응 WEB 글꼴이라면 상당히 용량이 크고 수십 MB 있는 경우도 자주 있습니다.
속도 제한에 걸린 사용자라면 웹 폰트 다운로드 때문에 페이지 읽기에 장시간 걸리는 경우도 적지 않습니다.
그러니 사용자를 생각한다면 웹 폰트가 아닌 디바이스 폰트 쪽을 사용하도록 합시다.
Page Speed Insight에서 점수가 떨어지지 않음
WEB 폰트를 사용하는 경우, 읽기의 비동기화등을 실시하지 않으면 Page Speed Insight의 스코어가 급격히 저하됩니다.
Page Speed Insight가 낮으면 페이지 읽기 속도도 느려지는 경향이 있기 때문에 궁금하신 분들은 디바이스 폰트를 사용하도록 하겠습니다.
디메리트
장치에 따라 장치 글꼴이 다르다
디바이스 글꼴은 모든 디바이스에서 통일되어 있지 않을까 생각하실 수도 있지만, 그런 것은 아닙니다.
예를 들면 Windows라면 표준의 디바이스 폰트가 「메이리오」이고 Mac의 경우는 「히라기노각 고딕」입니다.
큰 차이는 없지만, 약간 텍스트 표시에 차이가 있으므로, 완벽하게 통일하고 싶은 경우는 Windows·Mac 어느 쪽에서도 사용할 수 있는 「유고딕」을 CSS로 지정하도록 합시다.
일본어 대응 글꼴이 적다
디바이스 폰트의 대부분은 일본어 지원되지 않습니다.
매우 자주 사용되는 ′sans-serif′ 등 일본어에 대응한 디바이스 사실은 그다지 많지 않습니다.
일본어에 대응한 디바이스 폰트는, Windows 의 경우라면 이하의 것이 일반적입니다.
메이리오
MS UI Gothic
Meiryo UI
유고딕
Roboto
하지만 웹 폰트라면 매우 많은 일본어 지원 폰트가 있기 때문에 다른 사이트와 차별화하고 싶은 경우에는 웹 폰트를 사용해야 할 것입니다.
독특한 글꼴이 적다
디바이스 폰트는 읽기 쉽고 어디서나 사용할 수 있는 일반적인 폰트에 한정되어 있기 때문에 독특한 폰트가 거의 없고, 일본어 대응 폰트에 이르러서는 하나도 없습니다.
하지만 웹 폰트라면 손글씨풍 폰트나 칼집무늬 폰트 등 실로 독특한 폰트가 많이 갖추어져 있습니다.
出典: http://www2s.biglobe.ne.jp/~fub/font/kirieji.html
또한 WEB 글꼴의 경우 Font Awesome이나 Icomoon 등을 사용하여 Twitter 아이콘 등 아이콘 글꼴도 사용할 수 있습니다.
디바이스 폰트만으로는 역부족인 상황에서 웹 폰트를 사용하도록 합시다.
디바이스 폰트 사용법
WEB 페이지 측에서 사용할 디바이스 글꼴을 지정할 경우 ′fant-family′ 속성을 사용합니다.
글꼴을 지정할 때는 글꼴을 변경하고자 하는 요소에 대해 id·class 나름을 지정하여 CSS로 디자인을 가공하십시오.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
Hello World!
기본적으로는 이렇게 지정합니다.기타 글꼴 크기나 굵은 글씨 등의 문자 장식은 별도로 지정하도록 합니다.
복수 폰트 지정하고 싶다
작성 폰트 지정을 원하는 경우는 반각의 쉼표 「,」로 구분합니다.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
Hello World!
맨 처음에 기재한 글꼴부터 우선적으로 사용되므로 가장 이용하고 싶은 글꼴을 맨 먼저 지정하도록 합니다.
예를 들면 상기 샘플이라면 「메이리오」를 사용할 수 있는지 검증되어, 사용할 수 있으면 메이리오로 텍스트 표시. 할 수 없는 경우는 다음의 「히라기노 각 고딕」을 사용할 수 있는지 체크하도록 되어 있습니다.
반각 공간을 포함하는 글꼴 이름을 지정하는 방법
글꼴 안에는 ′Yu Gothic′ 등 반각 공간을 포함한 이름의 글꼴이 존재합니다.
이 경우 더블 쿼테이션 ′′ 또는 싱글 쿼테이션 ′′으로 글꼴 이름을 에워싸요.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
Hello World!
반각 공간 없이도 자동으로 대응해 주는 경우도 있지만 기본적인 쿼테이션으로 글꼴 이름을 둘러싸는 것이 규칙이므로 지키도록 합시다.
마지막으로 ′sans-serif′를 설정할 필요는 없다.
font-family 속성을 설정할 때는 마지막에 sans-serif를 지정한다는 통설이 있는데, 이것은 필수가 아닙니다.
표본 코드
결과
1
2
3
4
5
6
7
8
9
10
Hello World!
최신 브라우저는 웹사이트 측에서 지정하는 디바이스 폰트 중 어느 것도 지원하지 않을 경우 자동으로 사용할 수 있는 폰트로 대체되므로 굳이 지정할 필요가 없습니다.
절대 지정할 필요가 없다는 것은 아니지만, 절대 지정해야 할 이유도 없기 때문에 기억해 둡시다.
장치 글꼴 목록
다음은 Windows·Mac·스마트폰에 탑재되어 있는 일반적인 디바이스 폰트에 대해 소개하겠습니다.
윈도우, 맥, 스마트폰에 따라 디바이스 폰트가 다르므로 font-family 속성에서 디바이스 폰트를 지정할 때 참고해 보세요.Windows
디바이스 폰트
결과
1
2
3
4
5
6
7
8
9
10
11
메이리오
Meiryo UI
유고딕
Yu Gothic UI
MS 고딕
MSP 고시
Arial
Calibri
Consolas
Script
Segoe UI Emoji
등등 50가지 이상
Mac
디바이스 폰트
결과
1
2
3
4
5
6
등등 50가지 이상
Mac
디바이스 폰트
결과
1
2
3
4
5
6
히라기노 뿔고
히라기노 ProN
히라기노 ProN
클레이
유고딕
Hannotate TC등등 80가지 이상
iPhone
디바이스 폰트
결과
1
2
3
4
5
6
iPhone
디바이스 폰트
결과
1
2
3
4
5
6
히라기노 뿔고
AcademyEngravedLetPlain
등등 40가지 이상
Android
안드로이드는 기종에 따라 디바이스 폰트가 다릅니다.
그렇기 때문에 일률적으로 OOO 대응이라고는 모르기 때문에, 신경이 쓰이는 분은 각 Android 별로 선택할 수 있도록 합시다.
Windows·Mac·iPhone 공통 디바이스 글꼴
모든 주요 단말기에서 지정하는 장치 글꼴을 통일하려면 아래 장치 글꼴을 사용하십시오.
공통 장치 글꼴
결과
1
2
3
4
5
6
7
Arial
Didot
Futura
Marion
등등 40가지 이상
Android
안드로이드는 기종에 따라 디바이스 폰트가 다릅니다.
그렇기 때문에 일률적으로 OOO 대응이라고는 모르기 때문에, 신경이 쓰이는 분은 각 Android 별로 선택할 수 있도록 합시다.
Windows·Mac·iPhone 공통 디바이스 글꼴
모든 주요 단말기에서 지정하는 장치 글꼴을 통일하려면 아래 장치 글꼴을 사용하십시오.
공통 장치 글꼴
결과
1
2
3
4
5
6
7
Verdana
Arial
Georgia
Times New Roman
Trebuchet MS
히라기노 뿔고
웹페이지에서 글꼴을 확인하는 방법
마지막으로 웹페이지에서 간단하게 글꼴 확인을 하는 방법을 소개합니다.
완전히 자력으로 확인하려면 브라우저마다 탑재되어 있는 개발자 도구를 사용하여 CSS 속성을 해석해야 하는데, ′WhatFont′라는 크롬 확장 기능을 사용하면 쉽게 글꼴 확인이 가능합니다.
먼저 chrome 웹스토어에서 WhatFont를 설치해 보세요.
WhatFont - Chrome Web Store
설치가 끝나면 글꼴을 알아보고 싶은 페이지에서 WhatFont 아이콘을 클릭합니다.
클릭하면 [Exit What Font] 버튼이 나타납니다.
이 상태에서 글꼴을 알아보고 싶은 텍스트에 커서를 맞춰보세요.
커서를 맞추는 것만으로, 폰트의 확인을 실시할 수 있습니다.
크롬 확장이 있으면 어느 사이트나 쉽게 체크할 수 있기 때문에 다른 사이트 분석에서 글꼴 확인도 하고 싶다면 설치해 두는 것이 좋습니다.
정리
메이리오나 Arial 같은 디바이스 폰트에 대해 소개했습니다.
웹페이지를 열람하는 측 입장에서는 그다지 의식할 필요가 없는 문제이지만 웹사이트를 운영하는 측 입장에서는 신경이 쓰이는 부분입니다.
만약 글꼴 관련으로 고민하고 싶지 않다면 웹 글꼴이 아닌 디바이스 글꼴을 주체로 사용하도록 합시다.
그 때, Windows·Mac 양쪽 대응의 유고딕이나 Arial등을 사용하면 디바이스간의 표시 차이도 없어집니다.
font-family 속성을 사용하면 표준 글꼴이 아닌 내일 아침체 글꼴도 WEB에서 사용할 수 있으니 꼭 기억하시기 바랍니다.
웹페이지에서 글꼴을 확인하는 방법
마지막으로 웹페이지에서 간단하게 글꼴 확인을 하는 방법을 소개합니다.
완전히 자력으로 확인하려면 브라우저마다 탑재되어 있는 개발자 도구를 사용하여 CSS 속성을 해석해야 하는데, ′WhatFont′라는 크롬 확장 기능을 사용하면 쉽게 글꼴 확인이 가능합니다.
먼저 chrome 웹스토어에서 WhatFont를 설치해 보세요.
WhatFont - Chrome Web Store
설치가 끝나면 글꼴을 알아보고 싶은 페이지에서 WhatFont 아이콘을 클릭합니다.
클릭하면 [Exit What Font] 버튼이 나타납니다.
이 상태에서 글꼴을 알아보고 싶은 텍스트에 커서를 맞춰보세요.
커서를 맞추는 것만으로, 폰트의 확인을 실시할 수 있습니다.
크롬 확장이 있으면 어느 사이트나 쉽게 체크할 수 있기 때문에 다른 사이트 분석에서 글꼴 확인도 하고 싶다면 설치해 두는 것이 좋습니다.
정리
메이리오나 Arial 같은 디바이스 폰트에 대해 소개했습니다.
웹페이지를 열람하는 측 입장에서는 그다지 의식할 필요가 없는 문제이지만 웹사이트를 운영하는 측 입장에서는 신경이 쓰이는 부분입니다.
만약 글꼴 관련으로 고민하고 싶지 않다면 웹 글꼴이 아닌 디바이스 글꼴을 주체로 사용하도록 합시다.
그 때, Windows·Mac 양쪽 대응의 유고딕이나 Arial등을 사용하면 디바이스간의 표시 차이도 없어집니다.
font-family 속성을 사용하면 표준 글꼴이 아닌 내일 아침체 글꼴도 WEB에서 사용할 수 있으니 꼭 기억하시기 바랍니다.
반응형