타이포그래피는 글꼴을 선택하고 제목과 본문 텍스트에 사용할 크기를 결정하는 것 이상의 것입니다. 그것은 과학의 한 분야로 간주될 수 있습니다. 그리고 그것은 단순한 과학이 아니라 과학과 예술의 혼합입니다.
하지만 저는 이 블로그 게시물에서 그 내용을 다루고 싶지 않습니다. 예, 아름답고 독창적인 타이포그래피를 만드는 데는 많은 시간과 노력이 필요합니다. 하지만 시간이 없다면 어떨까요? 단 몇 분 만에 웹사이트의 타이포그래피를 빠르게 개선하고 싶다면 어떻게 해야 할까요?
오늘은 8분 안에 8개의 마이크로 팁을 사용하여 타이포그래피를 눈에 띄게 만드는 방법을 보여드리고 싶습니다. 갑시다!
1. 어두운 배경에서 글꼴 무게를 밝게 하면 미학과 가독성이 어떻게 향상될 수 있나요?
최근 디자인 업계에서는 다크 모드와 가변 글꼴이라는 두 가지가 인기를 얻고 있습니다. 하지만 대부분의 웹사이트는 다크 모드를 추가할 때 이런 실수를 저지릅니다. 글꼴 가중치를 그대로 유지합니다. 밝은 모드에서 제목이 굵게 설정되어 있으면 사용자가 어두운 모드로 전환해도 동일한 가중치를 갖게 됩니다.
어두운 배경에 밝은 텍스트가 더 무거워 보이기 때문에 문제가 됩니다. 이는 다듬어지지 않은 것처럼 보이고 텍스트의 가독성에 영향을 미칠 수도 있습니다( 그림 1 의 왼쪽 예 ). 제가 추천하는 것은 가변 글꼴을 사용하고 다크 모드에서 글꼴 두께를 조정하는 것을 고려하는 것입니다. 50으로 줄입니다. 따라서 라이트 모드에서 글꼴이 굵게 설정되면(굵게는 700과 같음) 650으로 줄입니다( 그림 1 의 오른쪽 예 ). 이제 텍스트가 세련되어 보이고 눈에 더 편해져서 읽기가 더 쉬워졌습니다.
어두운 배경에 두 개의 흰색 제목을 비교한 결과 하나는 700 글꼴 두께로, 다른 하나는 650으로 설정되었습니다.
그림 1 : 어두운 배경에서 무게 700과 650의 비교.
2. 제목의 줄 높이를 줄이면 모양이 크게 개선되는 이유
제목은 일반적으로 짧습니다. 일반적으로 한 줄의 텍스트이고 때로는 두 줄입니다. 극단적인 경우에는 세 줄로 나누어집니다. 하지만 그게 다야. 본문 텍스트에는 약 140%의 줄 높이가 권장되므로 전체 단락이 됩니다. 동일한 내용이 제목에 적용되면 선이 떨어져 표류하는 것처럼 보입니다. 서로 속하지 않는 것처럼 보입니다(그림 2의 왼쪽 예). 제목의 줄 높이를 110~120% 사이로 줄입니다. 제목은 더욱 간결하고 응집력이 있으며 세련되어 보입니다( 그림 2 의 오른쪽 예 ).
두 타이틀의 비교입니다. 하나는 줄 높이가 140%(이상적이지 않음)이고 다른 하나는 110%(더 좋음)입니다.
그림 2 : 제목의 큰 줄 높이와 작은 제목의 줄 높이
3. 개방형 기능을 사용하면 글꼴을 더욱 독창적으로 보이게 만드는 방법
개방형 기능이 점점 대중화되고 있습니다. 이는 점점 더 많은 글꼴이 이를 지원한다는 의미이기도 하기 때문에 좋습니다. 제가 가장 좋아하는 것 중 하나는 문체적인 대체입니다. 글꼴을 디자인한 유형 디자이너는 대체 기호를 사용할 수 있는 옵션을 제공합니다. 가장 일반적으로 이는 "a", "g" 및 "t" 문자에 대한 대체 디자인입니다.
기본 제공되는 글꼴이므로 사용하지 마세요. 좀 더 독창적으로 보이도록 사용할 수 있는 개방형 설정이 있는지 확인하세요. 아래에서는 왼쪽( 그림 3 ) 에 기본적으로 제공되는 Satoshi를 사용 하고 오른쪽에 스타일 대체 항목을 사용하고 있습니다.
두 타이틀을 비교합니다. 하나는 기본적으로 사용되었으며(이상적이지 않음) 다른 하나는 대체 스타일이 활성화된(더 좋음) 것입니다.
그림 3 : 문체 대체 대 기본 문자 디자인.
4. 대문자를 사용하는 것을 두려워하지 마세요. 하지만 공백을 사용할 때는 대문자를 사용하세요.
대문자로 쓰여진 단어가 읽기 어렵다는 것은 이미 누구나 알고 있습니다. 그래서 모두가 완전히 사용을 중단한 것 같습니다. 소량씩 대문자를 사용해도 괜찮습니다. 콘텐츠나 UI의 서로 다른 부분을 분리하는 데 도움이 됩니다. 볼드체나 이탤릭체를 사용하지 않고 무언가를 강조하는 멋진 방법입니다.
아래 기사의 카테고리를 표시하기 위해 대문자를 사용했습니다( 그림 4 ). 문자 간격이 없는 왼쪽 예와 문자 간격이 있는 오른쪽 예의 차이점을 확인하세요. 문자 간격의 대문자 단어는 가독성을 높이는 데 도움이 되며 디자인이 더욱 세련되게 보입니다. 글자 간격은 최대 5%까지 권장합니다. 항상 문자 공백 대문자입니다.
대문자로 설정된 두 텍스트의 비교입니다. 하나는 문자 간격이 없고(이상적이지 않음) 다른 하나는 5% 문자 간격이 있습니다(더 좋음).
그림 4 : 문자 간격의 대문자 단어는 가독성을 향상시킵니다.
5. 구식 그림의 미묘함을 사용하여 텍스트를 산만하게 하지 않고 읽기 쉽게 만듭니다.
가장 경험이 많은 디자이너는 문자가 너무 눈에 띄면 본문 텍스트에 글꼴 사용을 거부합니다. 예를 들어 보겠습니다. 저는 소문자 "g"에 특이하고 이상한 디센더(문자의 아래쪽 부분)가 있어서 글꼴을 사용하지 않기로 결정한 적이 있습니다. 그것은 너무 눈에 띄었고, 당신은 그것을 알아차리지 않을 수 없었습니다. 그것은 주의를 산만하게 했습니다. 당신은 그것을 원하지 않습니다. 독자가 콘텐츠에 완전히 몰입하기를 원합니다.
텍스트의 숫자에도 동일하게 적용됩니다. 안감 그림(일반적으로 글꼴의 기본 스타일)에 설정하면 너무 눈에 띕니다( 그림 5 의 왼쪽 예 ). 독자는 텍스트 줄을 따라가면서 해당 숫자에 도달하기 전에 이 숫자를 눈치챌 수밖에 없습니다. 주의가 산만해지고 읽기가 더 어려워집니다.
이전 스타일의 숫자는 소문자 대안입니다. 소문자 텍스트와 잘 어울리고 눈에 띄지 않습니다. 이러한 인쇄상의 세부 사항을 처리하는 웹사이트와 앱은 거의 없습니다. 따라서 그렇게 한다면 귀하의 웹사이트는 인쇄적으로 세련되고 섬세함이 돋보일 것입니다. 타입 매니아만이 알아챌 수 있는 미묘함을 독자들은 무의식적으로 높이 평가할 것입니다.
두 문단을 비교한 것입니다. 하나는 안감 그림(이상적이지 않음)이고 다른 하나는 구식 그림(더 좋음)입니다.
그림 5 : 이전 스타일의 숫자가 단락의 텍스트와 혼합되고, 안감 숫자가 눈에 띕니다(너무 많음).
6. 작은 대문자를 사용하여 두문자어가 텍스트에 맞도록 만드세요.
이는 위의 다섯 번째 팁과 동일하지만 문자에 대한 것입니다. 또는 더 정확하게는 약어입니다. 뭔가 시도해 봅시다. 여기에 CIA를 써서 내 주장을 증명하겠습니다. 나는 당신이 이 단락을 읽기 시작했을 때 언젠가 "CIA"를 발견했을 것이라고 100% 확신합니다.
그건 너무 이르고 이 문단이 그런 약어들로 가득 차 있다면 주의가 산만해질 것입니다. 당신의 눈은 그것들을 알아채고 끌리지 않을 수 없습니다. 따라서 읽고 있는 텍스트를 읽기가 더 어려워집니다. 글꼴이 이를 지원하는 경우 작은 대문자를 사용하여 텍스트의 산만함을 없애고 읽기 쉽게 만드세요.
저는 아래 Meta Serif Pro를 사용하고 있으며 왼쪽 예( 그림 6 )에는 작은 대문자가 없고 오른쪽 예에서는 작은 대문자가 활성화되어 있습니다.
두 개의 단락을 비교합니다. 하나는 두문자어에 사용되는 표준 대문자(이상적이지 않음)이고 다른 하나는 두문자어에 사용되는 작은 대문자(더 좋음)입니다.
그림 6 : 작은 대문자는 단락의 질감과 완벽하게 조화를 이룹니다.
보너스 팁: "가짜 작은 대문자"를 사용하지 마세요! 글꼴이 작은 대문자를 지원하지 않지만 강제로 활성화하면 가짜 작은 대문자가 사용됩니다. 가짜 작은 대문자는 대문자 크기가 조정된 것일 뿐이며 나머지 텍스트에 비해 너무 가벼워 보입니다. 이는 일반 대문자를 사용하는 것보다 훨씬 더 나쁩니다. 여기에서 실제 예를 확인하세요 .
7. 합자를 사용하여 텍스트의 미학과 가독성을 향상하세요.
타이포그래피의 합자는 특정 문자 사이의 보기 좋지 않은 충돌을 방지합니다. "fi" "fl" "ffi"가 일반적인 예입니다. 이는 가독성보다는 미학적 측면에 더 가깝지만 일부 글꼴에서는 이러한 충돌이 너무 명백해서 일반 사람들(즉, 타이핑 전문가가 아닌)도 알아차릴 수 있습니다. 그리고 이미 본 것처럼 독자는 인쇄상의 세부 사항을 알아차릴 수 없습니다. 그렇다면 디자이너는 실패한 것입니다. 그들이 봐야 할 것은 내용뿐입니다. 어떤 경우에는 합자가 타이포그래피에 약간의 성격과 독창성을 추가할 수도 있습니다( 그림 7 제목의 예 참조 ).
그림 7 : 합자는 보기에도 좋지만 텍스트와 미묘하게 조화되어 프로세스의 가독성이 향상됩니다.
8. 아이콘을 라벨의 줄 높이에 맞춰 정렬하세요.
나는 이런 실수를 항상 본다. 디자이너는 종종 아이콘 하단을 라벨 기준선에 정렬하려고 합니다( 그림 8 의 왼쪽 예 ). 타이포그래피의 모든 것을 정렬하는 방법이죠? 기준선은 작업하는 그리드입니다. 아니 정말. 아이콘을 텍스트에 맞춰 정렬하는 경우 아이콘 높이를 텍스트 줄 높이에 맞춰 정렬하는 것이 좋습니다( 그림 8 의 오른쪽 예 ). 올바르게 수행했다면 아이콘의 수직 중앙이 대문자 "X"의 중앙과 완벽하게 정렬되어야 합니다.
레이블에 정렬된 두 아이콘의 비교: 하나는 레이블의 기준선에 정렬되고(이상적이지 않음), 다른 하나는 레이블의 줄 높이에 정렬 및 일치됩니다(더 좋음).
그림 8 : 아이콘 정렬이 올바르게 완료되었습니다. 아이콘 크기를 텍스트 레이블의 줄 높이와 일치시키고 정렬합니다.
타이포그래피는 단순한 팁 그 이상입니다
다음 8가지 팁은 시작하는 데 도움이 됩니다. 이는 타이포그래피를 대폭 향상시킬 수 있지만 빙산의 일각에 불과합니다(말장난 의도). 콘텐츠와 완벽하게 조화를 이루고, 독자를 완전히 사로잡고, 텍스트를 읽기 쉽게 만드는 타이포그래피를 의미하는 위대한 타이포그래피에는 전체적인 접근 방식이 필요합니다. 항상 디자인하려는 콘텐츠부터 시작해야 합니다. 글꼴을 선택하지 않고 Lorem Ipsum을 자리 표시자 텍스트로 사용하지 않습니다. 임의의 글꼴이 아닌 웹사이트의 내용과 어울리는 글꼴을 선택해야 합니다.
