블로그의 독자, 댓글, 공유 수를 늘리기 위한 5가지 간단한 글꼴 변경
게시 됨: 2023-09-14이 게스트 게시물은 Information Highwayman의 Bnonn이 작성했습니다.
여러분은 깨닫지 못할 수도 있지만 블로그의 글꼴 설정은 여러분의 콘텐츠를 읽는 사람 수에 큰 영향을 미칠 수 있습니다.
그리고 귀하의 콘텐츠를 읽는 사람의 수는 게시물의 인기 여부에 큰 영향을 미칩니다.
얼마나 거대한가요? 글쎄, 내가 읽은 일부 설명에 따르면 색상에 대한 일반적인 실수 하나만으로 독자층이 5배로 줄어들 수 있습니다. 그리고 만약 당신이 그런 실수를 저지르고 있지 않다면 아마도 다른 네 가지 중 적어도 하나를 저지르고 있을 것입니다. 따라서 이 기사에서는 독자가 이전 뒤로 버튼을 사용하지 않고 콘텐츠에 계속 집중할 수 있도록 텍스트를 표시하는 가장 중요한 다섯 가지 모범 사례를 소개하겠습니다.
글꼴 크기 - 최소 16px
가독성 문제의 맨 위에는 글꼴 크기가 있습니다. 2005년에 Jakob Nielsen은 웹 디자인 문제에 대한 조사에서 잘못된 글꼴이 다음 경쟁자보다 거의 두 배 많은 표를 얻었으며 유권자의 3분의 2가 작은 글꼴 크기에 대해 불평했다고 보고했습니다.
안타깝게도 그 이후로 아무것도 바뀌지 않았습니다. SiteInspire(최고의 디자인 중 최고를 선보이는 웹 디자인 갤러리)의 새로운 블로그 디자인을 무작위로 샘플링한 결과 본문 카피의 평균 글꼴 크기는 12픽셀 입니다. 일부는 10픽셀 만큼 낮습니다. 14픽셀을 넘지 않습니다. 마찬가지로, 인기 있는 Elegant Themes 또는 ThemeForest에서 제공되는 제품을 무작위로 샘플링하면 모든 단일 테마가 게시물 콘텐츠를 12 또는 13픽셀로 설정한다는 것을 알 수 있습니다.
물론 다른 테마 제작자들도 대세의 선례를 따르는 경향이 있습니다.
그러나 Information Architects의 사용성 및 타이포그래피 전문가인 Oliver Reichenstein이 지적했듯이 16픽셀 은 브라우저가 기본적으로 표시 하려는 글꼴 크기이며 그리 크지 않습니다 . 평균 화면의 16픽셀 텍스트는 인쇄된 12포인트 텍스트와 거의 같은 크기로 보입니다. 이는 모든 워드 프로세서뿐만 아니라 대부분의 잡지의 기본 크기입니다. 왜냐하면 사람들이 읽기에 가장 편안하다고 생각하는 크기이기 때문입니다. 많은 사람들, 특히 40세 이상의 사람들은 작은 텍스트를 읽는 데 어려움을 겪습니다. Reichenstein이 관찰한 바와 같이:
너무 많은 정보를 화면에 집어넣을 이유가 없습니다. 이는 화면이 정말 작았던 시절로 거슬러 올라가는 어리석은 집단적 실수일 뿐입니다. 처음에는 기본 텍스트가 얼마나 큰지 놀라게 될 것입니다. 그러나 하루가 지나면 본문의 글꼴 크기가 100%보다 작은 것은 보고 싶지 않을 것입니다. 처음에는 커 보이지만 일단 사용해보면 모든 브라우저 제조업체가 이것을 기본 텍스트 크기로 선택한 이유를 금방 깨닫게 됩니다.
밝은 텍스트에 어두운 색을 사용하세요. 반대로 하면 좋지 않습니다.
다행스럽게도 콘텐츠 작성자가 파란색 텍스트의 자홍색이 멋지다고 생각하던 시절은 거의 지났습니다. 그러나 반전된 유형으로 알려진 검정색 텍스트에 흰색 텍스트 는 여전히 매우 일반적입니다. 다른 어두운 색상의 흰색과 같은 변형도 마찬가지입니다.
역방향 유형은 귀하의 콘텐츠를 읽기 위해 애쓰는 사람들의 수뿐만 아니라 콘텐츠에 대한 이해 도 감소시킵니다. 눈에 부담을 주기 때문이죠. 반전된 텍스트를 오랫동안 쳐다보면 일종의 "눈부심" 효과가 발생하여 글자가 너무 밝아서 볼 수 없는 것처럼 느껴지는 경향이 있습니다. 어떤 연구를 참조하느냐에 따라 어두운 텍스트에 빛이 있으면 독자층이 50%에서 400% 사이로 감소한다는 연구 결과가 있습니다.
왜 그렇게 많은 독자를 잃을 위험이 있습니까? 흰색 바탕에 검은색 또는 매우 어두운 회색이 깔끔하게 보이고 이러한 색상을 사용하는 멋진 테마가 많이 있습니다.
줄 너비 - 45~75자
많은 블로그가 어기는 잘 알려지지 않은 또 다른 규칙이 있습니다. 눈이 한 줄에서 다음 줄로 쉽게 따라갈 수 있도록 하려면 각 줄에 75자 이하여야 합니다. 이를 라인 측정이라고 합니다. 75자를 넘어서면 길을 잃지 않고 한 줄의 끝부터 다음 줄의 시작 부분까지 추적하기가 어렵습니다.
반면에 45자 미만의 문자라면 다음 줄로 넘어가야 할 때 한 줄을 읽기 시작한 지 얼마 되지 않았기 때문에 눈이 빨리 피로해집니다. 쉴 기회가 전혀 없는 것처럼 느껴집니다.
이러한 이유로 이상적인 게시물 콘텐츠 영역에는 약 60자 길이의 텍스트 줄이 있습니다. 물론 미적인 측면도 고려해야 합니다. 많은 블로그에서 "이상적인" 측정값은 오른쪽 여백에 큰 간격을 남기거나 텍스트가 작은 영역에 눌려진 것처럼 보이게 합니다. 바로 그러한 이유로 나는 내 웹사이트에서 약 70자를 사용합니다. 하지만 80자를 넘으면 독자층이 줄어들게 됩니다.
줄 높이 - 130% 이상
다행히도 이는 덜 흔한 실수입니다. 전문적인 테마를 사용한다면 걱정할 필요가 없습니다.
예를 들기 위해 이 단락을 기본 줄 높이(기존 인쇄기에서 텍스트 줄을 구분하는 데 사용된 납 스트립 뒤에 있는 행간이라고도 함)로 설정했습니다. 읽기가 비좁고 매력적이지 않으며, 줄이 서로 섞여 있기 때문에 한 줄에서 다음 줄을 따라가기가 어렵습니다.
반면에 이 단락은 줄 높이 200%로 설정되어 있습니다. 이는 워드 프로세서의 두 배 간격에 해당합니다. 나는 여기의 선들이 서로 너무 단절된 느낌을 준다는 점에 동의하실 것이라고 확신하며, 연구 논문을 제출하지 않는 한 이 방법은 적합 하지 않습니다 .
마지막으로 이 단락은 줄 높이를 150%로 설정했습니다. 이는 글꼴 크기의 모든 픽셀에 대해 선 사이의 거리가 1.5픽셀이라는 것을 의미합니다. 이는 블로그에서 사용할 가능성이 있는 대부분의 글꼴에 대해 매우 신뢰할 수 있는 최적의 장소임이 밝혀졌습니다. 하지만 자신의 콘텐츠에 가장 적합한 것이 무엇인지 알아보려면 약 130%에서 160% 사이에서 자유롭게 실험해 보세요.
왼쪽 여백 - 깨지지 마세요
이 마지막 팁은 정확히 글꼴 문제가 아닙니다. 그러나 그것은 동일한 일반적인 범주에 속합니다. 블로거는 일상적으로 게시물에 이미지를 포함합니다. 그것이 정말 좋은 생각인지 아닌지는 나중에 다루겠습니다. 하지만 지금은 한 가지 조언만 드리고자 합니다.
왼쪽 여백은 신성합니다. 이것이 서구 세계에서 한 페이지의 텍스트를 추적하는 방법입니다. 이는 선이 자라는(종종 상당히 다른 길이로) "그라운드"이며, 페이지를 읽을 때 시선의 기초가 됩니다.
하지만 왼쪽 여백을 어기면 모두 지옥이 됩니다. 계속해서 읽을 수 있도록 눈은 새로운 여백을 찾기 위해 주위를 훑어보아야 합니다.
즉, 이미지를 왼쪽 정렬할 때마다 독자의 경로에 속도 저하가 발생합니다. 그리고 시각적으로 지배적인 이미지가 있는 텍스트에서 그의 관심을 끌어 문제를 더욱 복잡하게 만들고 있습니다. 말할 필요도 없이, 계속 주의가 산만해지고 왼쪽 여백을 옮겨야 하는 독자들은 게시물의 끝까지 읽지 않는 경우가 많습니다. 그래서 게시물을 공유하거나 댓글을 달지 않는 경우가 많습니다.
보너스 팁: 첫 글자 장식은 독자층을 늘립니다.
"드롭 캡(drop caps)"이란 게시물의 첫 번째 단어의 첫 글자가 나머지 부분보다 훨씬 더 크게 나타나는 첫 글자 대문자를 의미합니다. Ogilvy & Mather가 실시한 연구에 따르면 이는 작품의 독자층을 평균 13% 증가시킵니다.
드롭 캡은 대부분의 블로그 테마에 내장되어 있지 않으며 웹에서 수행하기 까다로울 수 있지만 약간의 코딩만 할 수 있다면 이 튜토리얼을 확인하여 만드는 방법을 확인하세요.
다섯 가지 실수: 당신은 어떤 실수를 저지르고 있나요?
이제 자신의 블로그로 돌아가 다섯 가지 중요한 모범 사례 중 실천하지 않는 것이 무엇인지 확인해야 합니다. 그럼, 픽섬! 하지만 아래 댓글에서 변경 사항을 공유하는 것을 잊지 마세요!
Bnonn은 자치구에서 Information Highwayman으로 알려져 있으며, 카피와 디자인을 모두 개선하여 중소기업이 온라인에서 더 많은 판매를 할 수 있도록 돕습니다. 누군가의 홈페이지에 들어가지 않을 때는 아이들에게 스팀펑크, Nathan Fillion, 그리고 물리지 않고 좀비를 잡는 방법을 가르치고 있습니다.