말 그 이상: 많은 양의 이메일 타이포그래피를 사용하는 방법

Serif 및 sans-serif는 특히 본문 복사에 가장 일반적으로 사용되는 서체입니다. 가장 읽기 쉽고 접근이 용이하기 때문입니다. 축소하고 더 ​​낮은 가중치에서 잘 렌더링됩니다.

스크립트 및 디스플레이 서체는 종종 본문에 너무 복잡합니다. 즉, 읽기 어렵고 스캔하기가 더 어려울 수 있습니다. 따라서 일반적으로 헤드라인용으로 예약되어 있습니다.

고정 폭 서체도 본문 사본으로 덜 일반적으로 사용됩니다. 대신 코드를 자연어와 구별하기 위해 프로그래밍 언어에 대한 기술 리소스에서 선호됩니다.

웹 서체

이메일에서 서체를 사용하려면 웹 글꼴이어야 합니다.

이것은 코드에 호출할 수 있는 디지털 서체입니다. 무료 웹 글꼴과 구입할 수 있는 글꼴이 많이 있습니다. 하지만 먼저 이메일에 호출할 수 있는 두 가지 유형의 디지털 글꼴인 웹 안전 글꼴과 웹 글꼴을 살펴보겠습니다.

웹에 안전한 글꼴

이들은 대부분의 운영 체제에 설치되는 서체입니다. 즉, 이러한 글꼴을 이메일 코드에 호출하면 이메일 클라이언트, 장치 및 운영 체제에서 일관되게 렌더링됩니다.

다음은 Windows 및 Mac 장치에서 가장 잘 지원되는 웹 안전 글꼴입니다.

웹 글꼴

일부 운영 체제 에서는 사용할 수 없는 서체입니다.

따라서 이메일에 사용하려면 몇 가지 추가 코드를 추가해야 합니다. 또한 모든 이메일 클라이언트가 웹 글꼴을 렌더링하는 것은 아니므로 글꼴 스택에 대체 웹 안전 글꼴이 있는지 확인해야 합니다.

무료 리소스인 Google Fonts와 구독이 필요한 Adobe Fonts와 같이 웹 글꼴을 찾을 수 있는 곳은 다양합니다.

웹 글꼴에 대한 포괄적인 가이드는 웹 글꼴에 대한 궁극적인 가이드를 확인하십시오.

이상적으로 는 한 번에 두 개 이상의 글꼴 스타일을 사용해서는 안 됩니다 . 부분적으로 너무 많이 적용하면 시끄럽고 혼란스러워질 수 있지만 여러 웹 글꼴로 호출하는 경우 이메일 로드 시간이 늘어날 수도 있기 때문입니다.

글꼴 스타일

이메일 내의 단어와 문장에 주의를 끌기 위해 디자인하고 코딩할 수 있는 추가 글꼴 스타일이 있습니다. 그러나 이메일의 가독성과 접근성에 영향을 줄 수 있으므로 언제 어떻게 사용하는지가 중요합니다.

이메일 접근성에 대한 궁극적인 가이드 능력에 상관없이 누구나 즐길 수 있는 이메일을 작성, 디자인 및 코딩하는 데 필요한 통찰력과 단계별 조언을 확인하십시오. 가이드 받기

용감한

굵게 표시된 텍스트를 이메일의 나머지 사본 중에서 눈에 띄고 싶은 몇 단어로 제한하십시오. 이렇게 하면 주의를 끌기 위해 다투는 여러 키워드를 사용하지 않아도 됩니다.

굵은 텍스트는 시력 가입자가 주요 정보를 식별하는 데 도움이 될 수 있지만 스크린 리더가 차이점을 파악하는 것은 의미론적 코딩을 통해서만 가능합니다.

<b> 굵게 표시된 태그는 의미가 없으며 선택한 단어를 스크린 리더 사용자에게 강조하지 않습니다. 따라서 시력을 가진 사용자가 얻는 경험을 반영하려면 항상 <strong> 태그를 사용하십시오.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

이탤릭체

볼드체와 유사하게 이탤릭체로 된 단어는 비록 그 정도는 적지만 강조를 더합니다.

굵게 표시와 마찬가지로 기울임꼴 텍스트를 코딩하는 방법에는 여러 가지가 있습니다. 그러나 <em> 태그는 WCAG와 호환되며(<i> 태그가 아님) 화면 판독기에 어떤 내용을 이해해야 하는지 표시할 수 있습니다.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

취소선

이 스타일링을 적용하면 가격 인하나 정보 업데이트에 주의를 기울일 수 있다.

그러나 이메일 클라이언트에서 일관되게 렌더링되지는 않습니다.

<strike> HTML 태그는 Hey에서 지원되지 않으며 Gmail 앱에서는 부분적으로만 지원됩니다. 또한 CSS line-through로 이 스타일을 처리하는 것은 일부 이메일 클라이언트에서 지원이 제한되어 선이 너무 가늘어서 보기가 매우 어렵습니다.

스크린 리더가 취소선이 있는 단어를 강조하지 않기 때문에 이 스타일에는 접근성 문제가 있다는 점도 주목할 가치가 있습니다. 각 금액 앞에 '이전' 및 '지금'과 같은 컨텍스트를 추가하면 모두에게 소중한 경험이 될 것입니다.

취소선을 코딩하는 가장 좋은 방법은 다음과 같이 HTML <strike> 태그를 사용하는 것입니다.

<p>Was<br /><span> <strike> $200 </strike> </span></p>

대문자

대문자를 사용하면 키워드에 주목하고 계층 구조를 표시할 수 있습니다. 다만, 소리치는 것으로도 볼 수 있으므로 아껴서 사용하는 것이 좋다.

대문자를 쉽게 사용하는 또 다른 이유는 가독성에 영향을 미치기 때문입니다. 우리는 모양으로 단어를 식별하는 데 익숙합니다. 대문자 텍스트의 균일한 직사각형 모양은 속도를 늦추고 가독성을 떨어뜨립니다.

또한 대문자로 작성하면 스크린 리더에 부정적인 영향을 줄 수 있으므로 CSS 스타일을 사용하여 대문자 텍스트의 스타일을 지정하는 것이 좋습니다. 경우에 따라 스크린 리더는 대문자를 만나면 볼륨이 커지거나 두문자어를 식별할 때 단어를 한 글자씩 읽을 수 있습니다.

CSS 스타일은 화면 판독기로 식별되지 않으므로 CSS를 사용하여 스타일이 지정된 대문자 텍스트를 일반 텍스트와 동일한 방식으로 처리합니다.

<p>We need to shout about this <br /><span>big win</span></p>

문자 간격

문자 간격을 추가하면 글꼴에 약간의 추가 문자와 정체성을 부여할 수 있으며 일부 글꼴 스타일을 더 읽기 쉽게 만들 수도 있습니다.

예를 들어, 텍스트에 대문자 스타일을 적용해야 하는 경우 약간의 문자 간격도 추가하면 가독성을 높일 수 있습니다. 그러나 글자 간격이 너무 많으면 가독성이 떨어지므로 균형이 잘 맞습니다.

글자 간격에 대한 주의 사항과 하지 말아야 할 일에 대한 자세한 내용은 이 유용한 게시물을 확인하세요.

부분 지원을 제공하는 Outlook과 함께 이메일 클라이언트 전반에 걸쳐 지원이 좋습니다. 일부 문자 간격을 추가하려면 CSS를 사용하여 스타일을 지정합니다.

<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>

텍스트 정렬

텍스트 정렬이 있는 몇 가지 금지 사항이 있습니다.

우선, 정렬된 스타일 지정: 텍스트를 컨테이너의 왼쪽과 오른쪽에 고정합니다. 이를 위해 단어 사이에 균일하지 않은 간격을 추가하여 가독성에 큰 영향을 줍니다.

오른쪽 정렬된 본문 텍스트는 오른쪽에서 왼쪽으로 읽는 언어에만 사용해야 합니다. 오른쪽 정렬 시 왼쪽에서 오른쪽으로 읽는 언어가 매우 부자연스럽고 가독성에도 부정적인 영향을 미칩니다.

가운데 정렬된 텍스트는 헤드라인이나 3줄 이하의 짧은 단락을 위해 예약해야 합니다.

최적의 정렬은 왼쪽 에서 오른쪽으로 쓰는 언어의 경우 왼쪽 정렬 입니다. 이것은 한 줄을 읽을 때마다 돌아갈 기준점을 생성하며 접근 가능한 읽기 경험을 위한 핵심 고려 사항입니다.

텍스트 정렬을 코딩하려면 HTML align 속성을 사용할 수 있습니다. 그러나 이렇게 하면 셀 내에 있는 다른 요소도 정렬됩니다. 머리글이나 단락과 같은 시맨틱 태그에 CSS를 사용하는 것이 사본을 정렬하는 가장 효과적인 방법입니다.

<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>

색상

색상으로 기억해야 할 것은 대비입니다.

텍스트 색상을 선택할 때 배경색이나 배경 이미지와 대비하여 눈에 잘 띄는지 확인해야 합니다. 이렇게 하면 다양한 시각 장애가 있는 구독자가 콘텐츠를 읽을 수 있습니다. 대비 비율이 좋은지 확인하는 가장 좋은 방법은 WebAim 대비 검사기에서 색상을 테스트하는 것입니다.

이메일에 액세스할 수 있는 콘텐츠를 만들고, 디자인하고, 코딩하는 방법에 대해 자세히 알아보려면 Salesforce의 소프트웨어 엔지니어인 Mark Robbins와 함께 녹음한 Salesforce Trailhead 세션을 확인하십시오.

크기

텍스트의 스타일을 지정하는 데에는 실제로 상한선이 없습니다. 그러나 읽을 수 있고 이메일을 손상시키지 않도록 단어를 한 줄에 유지하려고 합니다.

작은 텍스트는 어떻게해야에 제한이 있지만,있다. 14px 미만은 많은 사람들이 읽기 어려워지며 iOS Apple Mail의 자동 텍스트 조정 기능이 시작되어 텍스트를 확대합니다.

리트머스에서는 18px 미만으로 이탈하는 경우가 거의 없습니다. 그럴 경우 주의 사항, 각주 및 바닥글 내용과 같은 3차 정보로 제한합니다. 이를 통해 주요 콘텐츠가 지배적입니다.

줄 높이

좋은 가독성은 또한 각 텍스트 줄 사이의 적절한 공간에 의존합니다. 너무 적으면 다른 줄로 눈을 돌리지 않고 한 줄의 텍스트를 따라가기가 어려울 수 있습니다. 너무 많고 각 줄이 다음 줄과 독립적으로 느껴질 수 있으므로 읽기와 스캔이 어렵습니다.

이를 위해 줄 높이는 텍스트 크기의 1.5배에서 2배 사이여야 합니다. 예를 들어, 20px의 글꼴 크기는 30-40px의 줄 높이를 가져야 합니다.

이메일 디자인에서 타이포그래피를 사용하기 위한 팁

작성된 콘텐츠의 스타일을 지정하면 많은 것을 얻을 수 있습니다. 이메일에 타이포그래피를 효과적으로 사용하여 독자에게 영향을 미치고 안내할 수 있는 네 가지 방법을 설명하겠습니다.

구독자가 귀하의 브랜드를 식별할 수 있도록 도와주세요.

우선, 구독자가 이메일을 열 때 브랜드를 식별할 수 있도록 브랜드 글꼴을 적용할 수 있습니다. 일부 글꼴은 문맥과 상관없이 매우 독특합니다. 월트 디즈니와 코카콜라를 생각해 보십시오.

통신 유형 구분

다양한 글꼴 스타일을 사용하여 거래 이메일 및 뉴스레터와 같은 다양한 유형의 커뮤니케이션에 스타일을 지정할 수 있습니다. 이를 통해 청중은 수신한 커뮤니케이션 유형을 빠르게 식별할 수 있습니다.

브랜드 개성을 높여라

핵심 메시지를 불러일으키는 영웅 영역의 디스플레이 글꼴 사용과 같은 창의적인 타이포그래피로 브랜드 개성을 높일 수도 있습니다.

메시지가 제대로 전달되고 있습니까? 실수를 방지하고 이메일이 영향을 미치도록 하십시오. 100개 이상의 앱 및 장치에서 미리보기, 링크 및 이미지 검증, 접근성 테스트 등 실수 하지마

계층 만들기

타이포그래피로 할 수 있는 가장 유용한 것 중 하나는 계층을 만들어 독자에게 이메일을 안내하는 데 도움이 되는 것입니다. 그래서 여기서 시간을 좀 더 보내겠습니다.

오늘날 대부분의 구독자가 수신하는 이메일의 양은 상당합니다. 수신된 모든 메시지를 처리하고 소화하는 것은 불가능합니다. 따라서 독자가 값을 이해하기 위해 이메일 내의 앵커 포인트를 검색할 때 열린 이메일을 스캔하는 경우가 많습니다.

글꼴 스타일, 크기, 두께 및 색상에 기대어 이메일에서 가장 중요한 부분을 표시할 수 있습니다. 나는 '폴드'를 믿지는 않지만 구독자에게 이메일의 목적을 이해하고 많은 사본을 읽지 않고도 조치를 취할 수 있는 기회를 제공하는 것이 중요하다고 생각합니다.

이 예를 들어 설명하겠습니다.

영웅 영역에 크고 대담한 타이포그래피를 사용하여 이메일의 가치나 목적을 요약하는 헤드라인에 주의를 집중시킵니다.

클릭과 전환이 캠페인의 목표인 경우 후속 조치를 취하면 독자가 전체 이메일을 소비하지 않고도 조치를 취하는 데 도움이 될 수 있습니다.

그런 다음 독자가 모든 단어를 읽는 데 전념할 수 없는 경우 이 콘텐츠를 쉽게 스캔할 수 있도록 본문을 분해하는 덜 지배적인 헤드라인을 추가합니다.

이메일 타이포그래피로 창의력을 발휘하는 브랜드

이제 이메일 디자인에 타이포그래피를 잘 사용하는 브랜드의 몇 가지 예를 살펴보겠습니다. 무엇이 그들을 돋보이게 하고 독자를 끌어들이는가?

습기

내추럴 와인을 만들고 판매하는 데 중점을 둔 와인 제조업체와 소매업체를 강조하는 뉴스레터인 DAMP는 콘텐츠 계층 구조를 배치하기 위해 세리프 및 산세리프 글꼴을 사용하여 타이포그래피에 크게 의존합니다.

글꼴 사용 : 돋움 노이에을 굴림 대체하고, 리프 시스템 글꼴 타임즈 새로운 로마와 함께.

영웅 영역은 이 긴 형식의 뉴스레터에서 유일한 이미지를 표시하며, 볼드체로 이메일을 열었을 때의 분위기를 설정합니다. 대담한 타이포그래피의 이 이메일 디자인 트렌드는 성명을 발표합니다. 많은 브랜드가 이 스타일을 채택한 것은 놀라운 일이 아닙니다.

이 이메일에서 정말 흥미로운 점은 웹 글꼴이 아닌 시스템 글꼴을 사용하여 이 현대적이고 깔끔한 스타일을 구현한다는 것입니다. 즉, 글꼴이 모든 이메일 클라이언트에서 비슷하게 렌더링됩니다.

레디 매그

브라우저 내 그래픽 편집기인 Ready Mag도 시스템 글꼴을 사용하여 Mac 시스템 글꼴을 시작으로 Helveticas 배열이 뒤따릅니다. 이것은 아마도 이메일의 글꼴 스택에 필요한 것 이상일 것입니다.

사용된 글꼴 : Apple 시스템 글꼴, Helvetica 및 Arial로 대체.

이 이메일이 마음에 드는 점은 대담한 타이포그래피가 콘텐츠를 구분하는 방식입니다. 이메일을 쉽게 스캔할 수 있습니다. 그리고 최소한의 본문 카피로 서두른 독자가 각 섹션의 가치를 파악하고 신속하게 조치를 취할 수 있습니다.

추천 광고

자체 출판 플랫폼인 Blurb는 웹 글꼴을 사용하여 브랜드 아이덴티티를 이메일에 가져오고, 가볍고 굵은 두께와 대문자를 사용하여 계층 구조 및 작업 영역을 설명합니다.

사용된 글꼴 : Futura 및 Proxima Nova(웹 글꼴), Helvetica 및 Arial로 대체.

이미지가 아닌 실제 텍스트를 사용하여 스타일이 지정된 단계를 구성하는 숫자를 보는 것이 좋습니다. 이는 스크린 리더에 의존하는 구독자에게 훨씬 더 부드러운 경험을 제공하며 이미지가 로드되지 않을 때 렌더링된다는 의미이기도 합니다.

트립어드바이저

많은 브랜드와 마찬가지로 여행 플랫폼인 트립어드바이저는 문자 스타일 템플릿을 사용하여 COVID-19 메시지를 보냈습니다. 이것은 이미지의 방해나 마케팅 이메일로 오인될 가능성 없이 중요한 정보를 제공하여 고객과 보다 개인적이고 직접적인 커뮤니케이션 방법입니다.

사용 폰트 : Arial.

크고 대담한 타이포그래피는 이메일의 가장 중요한 메시지를 강조하는 반면, 본문 카피 블록과 대비되는 스타일의 헤드라인은 독자가 섹션의 가치를 이해할 수 있도록 앵커 포인트를 제공하는 콘텐츠를 나눕니다.

스캔 가능성이 높은 이 이메일에는 기본 컨테이너의 왼쪽과 오른쪽에 충분한 여백이 있습니다. 이는 큰 사본 블록이 독자를 압도하는 것을 방지하는 훌륭한 기술입니다.

태틀리

임시 문신 소매업체 Tattly는 이메일 디자인에 대한 매우 창의적인 접근 방식을 사용하며 프로모션 이메일은 종종 흥미로운 디자인 기술과 트렌드를 활용합니다. 그들은 이 이메일의 주인공에 굵은 활자체를 사용하여 이메일에 포함된 새로운 제품에 주의를 집중시킵니다.

사용된 글꼴 : Sans(웹 글꼴)를 열고 Helvetica 및 Arial로 대체합니다.

타이포그래피가 라이브 텍스트가 아닌 이미지 기반인 것은 이와 같이 고도로 설계된 이메일에서 일반적입니다.

텍스트에 이미지를 사용할 때 사본을 반향하는 ALT 텍스트를 적용하고 시각적으로 인해 이메일을 확대해야 하는 사람들을 위해 텍스트가 어떻게 보일지 고려하는 등 여러 가지 접근성 고려 사항이 있습니다. 손상. 텍스트가 픽셀화되어 읽을 수 없게 됩니까? 또한 이메일이 모바일 장치에서 축소될 때 이미지 기반 텍스트는 얼마나 가독성이 좋습니까?

라이브 텍스트가 이메일을 액세스 가능하고 읽을 수 있도록 유지하는 가장 좋은 방법이지만, 영웅 이미지를 H1 태그로 래핑하고 이미지 텍스트를 ALT 태그에 추가하여 더 많은 청중에게 이미지 기반 영웅 영역을 가치 있게 만드는 방법이 있습니다. 이와 같이:

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

이 접근 방식을 사용하면 바로 가기 기능을 사용하여 헤드라인을 탐색할 수 있기 때문에 구독자가 화면 판독기에 의존하여 이메일을 스캔할 수 있습니다.

"H1 태그 내에서 이미지를 래핑하는 것은 유효한 시맨틱 코드이며 스크린 리더 머리글 바로 가기 메뉴에 포함될 것입니다. 그러나 모든 텍스트 읽기 도구에서 ALT 텍스트를 읽을 수 있는 것은 아니라는 점에 유의하는 것이 중요합니다.” – Mark Robbins, 소프트웨어 엔지니어, Salesforce

이메일 타이포그래피는 펀치를 포장합니다.

구독자의 관심을 끌기 위해 경쟁하는 메시지의 수가 급격히 증가함에 따라 눈에 띄면서도 안정적인 경험을 빠르게 제공해야 하는 부담이 점점 더 커지고 있습니다. 타이포그래피는 속도를 늦추지 않으면서 이메일을 아름답고 효과적이고 접근하기 쉽게 만들 수 있는 좋은 방법입니다.

이 가이드를 염두에 두고 이메일에서 타이포그래피를 사용하는 방법을 공유하십시오. 보고 싶어요!

Litmus를 사용하여 브랜드에 오류 없는 이메일 생성 더 이상 깨진 이메일이 없습니다. 모든 받은 편지함에서 훌륭한 구독자 경험을 보장하기 위해 Litmus로 이메일을 작성하고 테스트하십시오. 무료 평가판 시작