웹 글꼴: 이메일에서 완벽하게 작동하도록 하는 방법

내 매우 과학적인 연구(지난 1년 동안 보고서를 쓰기 시작하는 딸아이를 관찰했습니다)를 통해 사람들이 가장 먼저 가지고 놀기 시작하는 디자인의 측면 중 하나가 타이포그래피라는 것을 배웠습니다. 보고서 작성을 처음 시작할 때 가장 적합한 글꼴을 찾기 위해 몇 시간을 보냅니다. 좋아, 몇 시간은 아니지만 대부분의 사람들은 그것에 약간의 시간을 할애합니다. 큰 브랜드가 알듯이 타이포그래피가 중요하기 때문입니다. 그리고 그것은 이메일에서 중요합니다.

그러나 접근성도 중요합니다. 따라서 이미지에 메시지를 가두지 말고 웹 안전 글꼴 및 웹 글꼴이 포함된 라이브 텍스트를 대신 사용하십시오. 결국, 이미지에 의존하지 않고 더 많은 청중이 읽을 수 있는 텍스트는 훌륭한 구독자 경험으로 이어집니다. 그리고 최고의 고객인 이메일은 1달러를 투자할 때마다 36달러를 반환하므로 전반적인 마케팅 전략에 매우 좋습니다.

이 블로그 게시물에서는 다음과 같이 분류합니다.

• 웹 글꼴 대 웹 안전 글꼴
• 웹폰트의 장점
• 이메일 클라이언트 지원 및 라이선스
• 웹 글꼴을 찾을 수 있는 곳
• 이메일로 코딩하기
• 이메일에 있는 웹 글꼴의 좋은 예

웹 글꼴 대 웹 안전 글꼴

라이브 텍스트를 수행할 수 있는 두 가지 방법이 있습니다: 웹 안전 글꼴 및 웹 글꼴. 같은 소리를 내더라도 분명한 차이점이 있습니다. 이러한 차이점을 이해하기 위해 이메일에서 글꼴이 작동하는 방식을 살펴보겠습니다.

이메일이 코딩될 때 글꼴은 font-family라는 CSS 속성을 사용하여 선언됩니다. 이 font-family 속성은 하나의 글꼴 이름 또는 여러 글꼴 이름(종종 글꼴 스택이라고 함)을 가질 수 있습니다. 여러 글꼴 이름을 포함하면 하나의 글꼴이 작동하지 않는 경우 선택한 대체 또는 백업 글꼴이 있습니다. 여러 글꼴 이름을 나열하지 않고 이메일 클라이언트는 백업 글꼴을 결정합니다. 구독자가 이메일을 열면 브라우저는 font-family 속성을 읽고 사용할 글꼴을 가져옵니다.

웹에 안전한 글꼴

웹 안전 글꼴을 사용하면 브라우저가 로컬 글꼴 디렉토리에서 글꼴을 가져옵니다. 즉, 컴퓨터에 이미 설치된 글꼴입니다. 모든 컴퓨터에는 사전 설치된 글꼴이 함께 제공되며 이러한 글꼴은 웹에 안전한 것으로 간주됩니다. 가입자도 이미 가지고 있을 가능성이 매우 높기 때문에 사용하기에 안전합니다.

단점은 웹 글꼴에 비해 웹 안전 글꼴의 수가 제한되어 있다는 것입니다. 그리고 그것들은 꽤 자주 사용되므로 눈에 띄지 않을 것입니다(당신이 목표로 하는 것이라면).

명백한 웹 안전 글꼴은 다음과 같습니다.

• 아리알
• 헬베티카
• 베르다나
• 그루지야
• 타임즈 뉴 로만

그러나 어느 정도 확신을 가지고 사용할 수 있는 몇 가지 다른 것들이 있습니다. 따라서 표준 Arial 또는 Helvetica 글꼴 루프에서 벗어나 귀하의 브랜드에 적합한 웹 안전 글꼴을 찾으십시오.

웹 안전 글꼴에 대해 찾은 최고의 리소스는 CSS 글꼴입니다. 각 글꼴에 대한 PC 및 Mac의 사용 비율이 포함되어 있어 대략 얼마나 많은 구독자가 원하는 글꼴을 볼 수 있고 얼마나 많은 구독자가 대체를 볼 수 있는지 알 수 있어 좋습니다.

웹 글꼴

웹 글꼴은 서버에서 가져옵니다. 사용자가 직접 호스팅하거나 외부 글꼴(예: Google 또는 Adobe)에서 가져옵니다. 이 때문에 사용할 수 있는 글꼴의 종류가 훨씬 더 많고 브라우저나 이메일 클라이언트가 글꼴을 가져올 수만 있다면 모든 컴퓨터에서 사용할 수 있습니다. 어떤 경우에는 가입자에게 이미 웹이 있을 수 있습니다. 글꼴을 다운로드하여 컴퓨터에 설치하므로 이러한 글꼴은 웹 글꼴을 지원하지 않는 이메일 클라이언트에서도 작동합니다!

따라서 웹 글꼴은 훨씬 더 다양하고 창의적인 자유를 제공하지만 제한된 이메일 클라이언트 지원(자세한 내용은 아래에서 자세히 설명하겠습니다)이라는 대가를 치르게 됩니다.

왜 웹 글꼴인가?

웹 글꼴을 사용하는 이유가 무엇인지 궁금할 것입니다. 마케터이자 디자이너는 색상, 디자인, 타이포그래피를 통해 이메일에서 브랜드를 유지해야 한다는 압박감을 알고 있습니다. 웹 글꼴을 사용하면 텍스트의 이미지에 의존하지 않고 브랜드를 과시할 수 있습니다.

이미지에 중요한 사본을 잠그는 것은 브랜드를 유지하고 창의적이 되는 방법으로 이메일 디자인의 표준 관행이었습니다. 그러나 이미지의 텍스트를 "숨기기"하면 스크린 리더가 이미지의 텍스트를 읽을 수 없기 때문에 이메일의 접근성이 제한됩니다.

또한 이미지에 텍스트가 있으면 기본적으로 이미지가 꺼져 있는 경우 구독자 경험이 저하됩니다. 이것은 구독자의 큰 부분이 아닐 수 있지만 누군가가 자신의 이미지를 끄고 귀하의 이메일을 여는지를 알 수 있는 방법은 없습니다. 그렇다면 최대한 많은 청중에게 최고의 경험을 제공하지 않는 이유는 무엇입니까?

웹 글꼴은 타이포그래피에서 창의성의 새로운 길을 열어 이메일 디자이너가 창의적이고 접근 가능하며 브랜드의 모양과 느낌을 고수할 수 있도록 합니다.

이메일에서 웹 글꼴을 사용할 수 있습니까?

아직 추측하지 않았다면 대답은 예입니다! 그러나 모든 이메일과 마찬가지로 주의 사항이 있습니다.

이메일 클라이언트 지원

웹 글꼴은 일부 이메일 클라이언트에서만 작동하며 지원되지 않는 경우 글꼴이 정상적으로 대체되도록 주의해야 합니다.

*이메일 임베딩 방법에 따라 약간 이상한 결과가 있습니다. 나중에 설명합니다.

웹 글꼴을 지원하는 이메일 클라이언트에서 얼마나 많은 사람들이 귀하의 이메일을 보고 있는지 알아보려면 구독자 기반을 살펴보는 것이 좋습니다. 구독자가 충분하다면 이메일에 추가 기능을 제공하는 훌륭한 방법입니다.

대다수가 그렇지 않은 경우, 특히 유료 웹 글꼴 사용을 고려하는 경우 시간과 노력의 가치가 없습니다.

당신의 가입자는 어떤 이메일 클라이언트를 사용합니까? Litmus Email Analytics를 사용하여 구독자가 귀하의 이메일을 여는 위치와 참여 방법을 알아보십시오. 이메일 및 그 이상을 최적화하는 데 필요한 통찰력을 얻으십시오. 더 알아보기 →

라이선스

웹 글꼴은 원래 웹 사이트에서만 사용하도록 설계되었으므로 해당 라이선스는 일반적으로 웹 사이트 및 모바일 응용 프로그램에서만 사용하기 위한 것입니다. 많은 웹 글꼴 서비스가 이메일에서 사용을 허용하지 않는 이유는 많은 서비스의 최종 사용자 사용권 계약(EULA)에 위배되는 글꼴을 배포하는 것으로 간주되기 때문입니다.

우리가 연락한 모든 웹 글꼴 제공업체는 이메일에서 해당 글꼴을 사용하여 지원했습니다. 공급자마다 필요한 라이선스가 다르기 때문에 이메일에서 글꼴 라이선스를 받는 표준 방식은 없습니다. 글꼴을 사용하려는 경우 회사에 연락하여 글꼴 라이선스를 정확히 받는 방법을 알아보세요.

웹 글꼴을 찾을 수 있는 곳

그래서 당신은 모든 것을 생각했고 웹 글꼴을 사용하기로 결정했습니다. 끝이 없어 보이는 옵션으로 브랜드에 맞는 옵션을 찾을 수 있습니다. 그러나 접근성을 염두에 두는 것도 중요합니다.

일부 글꼴은 다른 글꼴보다 읽기 쉽습니다.

디스플레이 또는 필기체 글꼴과 같이 화려하거나 장식적인 글꼴은 시각 장애가 있는 사람이나 난독증이 있는 사람이 글자 모양의 차이를 구별하기 어렵게 만들 수 있습니다. Sans-serif 글꼴(Arial, Calibri, Century Gothic 또는 Helvetica와 같이 글자에 확장된 기능이나 말림이 없는 글꼴) 및 slab 글꼴(Museo Slab 및 Rockwell과 같이 더 두꺼운 선이 있는 글꼴)이 더 접근하기 쉬운 것으로 간주됩니다.

다음은 검색을 시작하기에 좋은 몇 가지 장소입니다.

구글 폰트

많은 웹 글꼴 서비스를 사용할 수 있지만 Google 글꼴이 가장 좋습니다. 이 서비스는 완전히 무료이며 Adobe Photoshop, Sketch 또는 다른 디자인 소프트웨어에서 디자인을 조롱하는 경우 웹 글꼴을 컴퓨터에 다운로드할 수 있습니다.

어도비 글꼴

Typekit은 2018년 10월부터 Adobe Fonts가 되었습니다. 이제 글꼴을 웹 글꼴로 사용하기 위한 <link> 및 @import 메서드를 모두 지원합니다(자세한 내용은 다음에 설명). 이 서비스는 완전히 무료는 아니지만 이미 Creative Cloud 구독이 있는 경우 포함되어 있습니다.

웹 글꼴 서비스

유료로 사용할 수 있는 몇 가지 다른 웹 글꼴 서비스가 있습니다. 이메일에서 사용하려면 올바른 라이선스를 받았는지 확인해야 합니다.

• 유형 네트워크(웹 라이선스)
• 프로세스 유형 파운드리(웹 라이선스)
• Optimo(디지털 광고 라이선스)
• Fontspring(사용자 정의 이메일 라이선스)
• 타이포테크(웹 라이선스)
• 제작 유형(온라인 광고 라이선스)
• MyFonts(웹 라이선스)
• 상업용(웹 라이선스)

웹 라이선스를 사용하면 글꼴을 직접 호스팅하거나 공급자가 글꼴을 호스팅하도록 선택할 수 있습니다. 일부 웹 라이선스에서는 페이지 보기로 계산되는 글꼴을 로드하는 각 이메일과 함께 일정량의 페이지 보기에 대해 비용을 지불하므로 라이선스를 구입할 때 이를 고려하십시오.

이메일에 웹 글꼴을 포함하는 방법

웹 글꼴은 일반적으로 누군가의 로컬 장치에서 찾을 수 없고 대신 다른 곳에서 호스팅되기 때문에 실제로 사용하려면 먼저 웹 글꼴을 이메일에 "포함"하거나 가져와야 합니다.

1. 글꼴 파일의 URL 가져오기

이메일로 호출하려면 웹 글꼴의 URL이 필요합니다. 웹 글꼴 서비스에는 이 URL이 있어야 합니다. 그러나 글꼴 파일을 직접 호스팅하는 경우 서버에서 웹 글꼴이 있는 위치에서 URL을 가져옵니다. 공개 URL이고 로컬 서버에서 오는 것이 아닌지 확인하십시오. 그렇지 않으면 구독자가 웹 글꼴에 액세스할 수 없으며 대신 대체 글꼴이 표시됩니다.

Google 글꼴을 사용하는 경우 URL을 찾는 것이 약간 까다롭지만 그렇게 어렵지는 않습니다. @font-face 삽입 방법에 대한 다음 단계에서 방법을 알아보십시오.

2. 세 가지 방법 중 하나를 사용하여 웹 글꼴 가져오기

이메일에 웹 글꼴을 포함하는 세 가지 방법이 있습니다(사용할 수 있는 방법을 제한할 수 있는 주의 사항). 글꼴을 포함하는 세 가지 방법은 다음과 같습니다.

• <링크>
• @수입
• @글꼴얼굴

그렇다면 다른 방법보다 한 방법을 선택하는 이유는 무엇입니까?

@import 메서드는 포함된 HTML이 완전히 로드될 때까지 가져오는 웹 글꼴의 로드를 연기합니다. 이로 인해 나머지 이메일이 로드되는 동안 웹 글꼴이 이메일에 표시되는 데 시간이 조금 더 걸릴 수 있습니다. 반대로 <link> 메서드는 HTML 파일의 코드를 읽을 때 리소스를 인라인으로 로드하므로(위에서 아래로) 웹 글꼴 파일이 특히 큰 경우 이메일 로드가 지연될 수 있습니다.

사용할 방법을 선택할 때 명심해야 할 또 다른 사항은 ESP가 지원하는 것입니다.

하루 종일 리트머스에서 작동하는 아름다운 코드를 만들 수 있지만 ESP가 코드를 변경하면 대부분의 작업이 하는 것처럼 아무 것도 하지 않아도 됩니다. ESP가 글꼴 작동을 멈추게 하는 방식으로 코드를 변경하지 않는지 확인하십시오. Litmus에서 ESP는 스타일 요소 주위에 MSO 조건을 포함하는 것을 허용하지 않습니다. 따라서 <link> 및 @import 메서드는 Outlook에서 제대로 지원되지 않으므로 작동하지 않습니다. 이에 대해서는 아래에서 자세히 설명합니다.

<링크> 사용

<link> 방법을 사용하는 것은 이메일에 글꼴을 포함하는 비교적 간단한 방법입니다. 다음 코드 줄을 이메일의 상단 근처에 있는 <head>에 배치합니다.