웹 타이포그래피 리듬
가독성 높이고 싶으세요??
텍스트의 가독성에 영향을 미치고 시각적 계층 구조(visual hierarchy)의 감각 만들어 주는 수평 수직 리듬에 대해 알아봅시다.
본 포스트는 Better Web Typography for a Better Web라는 서적의 챕터 6의 내용에 근거하여 작성하였고 멋진 타이포그래피 기반의 웹 사이트를 디자인하고 제작하는 13개의 챕터로 구성되어 있습니다.
_
타이포그래피의 리듬은 음악의 리듬과 같습니다. 텍스트는 인튠(in-tune) 오케스트라가 연주 한 명작 교향곡처럼 흘러가거나 아니면 One-men 밴드 워너비 같이 얽매이지 않은 노래 가사 같은 것 일 수 있습니다. 혼돈보다 우리의 귀에 더 즐거운 주문이 있는 음악처럼, 우리의 눈으로 읽기 쉽고 즐겁게 설정된 리듬이 있는 잘 디자인된 텍스트도 있습니다. 귀와 눈은 단지 감각적 도구이며 우리의 머리가 그러한 정보를 처리합니다. 그리고 우리의 머리는 패턴 인식을 위한 기계입니다. 그래서 잘 조정(well-tuned)되고, 리드미컬하며 비례적인 텍스트는 조잡한 텍스트보다 우위에 있습니다. 음악과 달리 타이포그래피에는 수평과 수직 리듬 두 가지 유형의 리듬이 있습니다.
수평 리듬은 대부분 가독성에 영향을 주지만 수직 리듬은 텍스트의 가독성에 영향을 미치고 시각적 계층 구조의 의미를 형성합니다.
웹 타이포그래피의 수직 및 수평 리듬.수평 리듬
문자 간격 (Letter spacing)
문자 간격은 일반적으로 인쇄 디자인에서의 tracking이라고 알려져 있습니다. 단어의 가독성에 막대한 영향을 미칠 수 있으므로 주의해서 사용해야 합니다. 소문자에서 문자 간격은 권장하지 않는데 "소문자에서 자간을 늘리는 것은 마치 양을 훔치는 것과 같다."라는 Frederic Goudy의 유명한 어록이 있습니다.
문자 간격은: 우리 뇌에서 단어를 해독하기가 어렵기 때문에 가독성에 영향을 미칩니다. 글을 빨리 읽는 사람조차도 읽는 속도가 느려집니다. 꼭 그렇게 해야 할 이유가 없다면 본문 텍스트에는 문자 간격을 적용하지 마시길 바랍니다.
문자 간격이 긍정적인 영향을 주는 경우가 두 가지 경우가 있는데 첫 번째, 헤더는 본문보다 크고 무게감이 있습니다. 크기가 크기 때문에 글자 사이의 간격도 작은 크기보다 시각적으로 커지게 되는데 이 경우 문자 간격을 약간 줄이는 것이 좋습니다. 보통 3-5% 정도로 줄이는 것을 권장합니다. 이렇게 하면 헤더가 조금 더 간결하고 본문 텍스트와 잘 어울릴 겁니다.
문자 간격 조절의 다른 좋은 사례는 작은 대문자(small caps) 혹은 대문자에 적용하면 효과가 좋습니다. 대문자 텍스트가 긴 경우에 사용하는 것은 좋지 않기 때문에 헤더와 함께 사용하는 것이 가장 좋습니다. 대문자 또는 작은 대문자로 된 텍스트마다 글자 사이의 간격을 약간 늘리는 것이 좋습니다. 그러니깐 조금만 가감해도 차이가 보일 정도로 충분해집니다. 추천하는 간격은 5 ~ 10%입니다.
문자 간격을 대문자나 작은 대문자에 적용하면 가독성이 높아집니다.그렇게 함으로써 대문자와 단어 간의 차이 쉽게 인식하고 처리할 수 있습니다. 또한 글자 사이에 조금 더 간격을 주면 디자인이 더욱 정교해집니다. 잘 만든 브랜딩이나 제품을 유심히 살펴보면 대부분 문자 간격이 적용된 걸 눈치챌 수 있을 겁니다.
본문 텍스트에서 약자(축약어)와 긴 숫자에도 문자 간격을 적용하는 것을 추천합니다.
커닝 (Kerning)
서로 다른 문자 사이의 간격은 동일하지 않습니다. 각 문자에는 주변 문자와 상관없이 기본 문자 세트가 붙습니다. 그래서 아래 사진과 같이 이것이 우리가 다음과 같이 어색하게 보이는 이유입니다.
Bad kerning을 keming이라고도 하는데 위와 같은 경우에는 "SAVE"라는 단어에서 SA와 VE라는 두 단어로 보이는 거처럼 안 좋은 사례도 있습니다.
커닝(특정 문자 페어 사이의 공백)을 조정하면 이러한 문제를 해결할 수 있습니다. 그러한 결과는 훨씬 더 균형 잡힌 단어와 시각적 완성도일 것입니다. 커닝은 문자 간격(letter spacing)과는 달리 문자 주변의 간격을 인접 문자에 따라 변경해줍니다.
나쁜 커닝 개선하기
대부분의 웹 브라우저는 커닝을 자동으로 기본 설정합니다. 즉 커닝은 큰 문자에서는 활성화되고 자은 문자 유형에서는 비활성화됩니다. 작은 문자(본문 글)에서는 커닝에서는 나쁜 커닝이 눈에 잘 띄지 않습니다. 만약 커닝을 제어하기 원한다면 아래와 같이 작성(html)하면 됩니다.
font-kerning: auto; // default
font-kerning: normal; // enables kerning
font-kerning: none; // disables kerning
이렇게 우리가 뭔가 할 수 있는 것이라면 브라우저에서 제공하는 기본 설정 밖에 없는데 이것 역시 시작적인 완벽함을 구현하기 특정 문자를 x 픽셀만큼 이동해야 하는 특별한 경우에는 충분하지 않을 수 있습니다.
그래서 Lettering.js와 같은 도구가 있습니다. 이를 통해 각 문자의 위치와 스타일을 제어할 수 있습니다.
스케치에서 커닝 사용하기
스케치는 커닝이 활성화된 상태를 기본으로 제공되지만 필요할 경우 변경하거나 완전히 비활성화할 수 있습니다. 그렇게 하기 위해선 텍스트를 긁어서 선택한 후 Type> Kern에서 제어하면 됩니다.
커닝에서 Tighten, Loosen 등 상황에 맞는 옵션이 있습니다.
웹에서는 Justify(양쪽 맞춤)를 사용하지 마세요
음악에서 끊어짐(break)이 있는 것에는 어떤 다른 이유가 있는데 그것은 소리를 침묵으로부터 분리시켜줍니다. 풍부한 화음에서 오는 무(無)와 같이 겉 보기에는 리듬이 깨져 보입니다 (음악의 틈(break)은 항상 리듬과 일치합니다). 이와 같이 우리는 타이포그래피에서 동일한 효과를 얻고 있는데 문자, 단어 및 빈 공간의 조합은 리듬을 정의합니다. 흐름을 읽으려면 그 리듬이 일관성이 있어야 합니다. 그리고 이전에 배웠 듯이 우리는 한 단어 씩 단어를 읽었기 때문에 단어 사이의 간격이 너무 길면이 리듬이 깨집니다. 그것은 독서의 흐름을 깨버립니다. 언어나 단어에 상관없이 읽기 쉬운 텍스트 조차도 읽기 어렵게 만들어 주는데 저는 아직도 웹에서 이러한 문제를 너무 자주 접합니다.
왼쪽: 왼쪽 정렬
오른쪽: 양쪽 맞춤(justified)
*- 하이픈 없음
양쪽 맞춤 비교
왼쪽: 하이픈 없음
오른쪽: 하이픈 자동
웹 브라우저는 양쪽 맞춤 텍스트를 매우 허접하게 렌더링 해줍니다. 단어와 단어 사이의 간격을 적절히 맞춰주는데 필요한 알고리즘이 없습니다(일반 텍스트 편집기랑 동일). 이것이 바로 양쪽 맞춤된 텍스트의 단어들 사이에 공백 패치가 있는 이유입니다. 그런데 이렇게 하면 가독성이 나빠져서 웹에서 텍스트를 양쪽 맞춤하는 것은 어떤 이유이든 간에 사용하지 말아야 합니다. 웹 브라우저가 하이픈을 지원하면서 점점 나아지고 있는데 양쪽 맞춤 텍스트를 사용하는 경우 하이픈으로 보완하세요. 그렇지만 양쪽 맞춤 정렬은 절대 안 쓰는 걸 추천합니다.
맞춤 정렬 및 웹 접근성
Better Web Type 교육과정의 학생 Benedicte가 최근 저에게 이메일을 보냈는데 그는 난독증을 가진 사람들이 양쪽 맞춤(Justified) 된 정렬된 텍스트를 읽는 데 특정 문제가 있다는 사실을 알려줬습니다. 그가 지적한 문제는 텍스트 행이 어디에서 끝나는지 명확하지 않아 잘못된 행으로 쉽게 전환할 수 있다는 것이었습니다. 그래서 저는 어느 정도 리서치를 한 후 Gov.uk (영국의 공공 부문 정보 웹 사이트)에 텍스트 왼쪽 정렬하는 것을 추천했습니다.
단락 들여 쓰기(Paragraph indenting).
책에서 단락을 시각적으로 구분 짓게 해주는 일반적인 방법은 첫 번째 줄을 들여 쓰는(indent) 것입니다. 실제로 빈 라인을 두는 것보다 더 일반적인데 리듬 관점에서 우리는 수직 리듬 대신 단락을 분리하기 위해 수평 리듬을 바꾸고 있습니다. 단락은 일반적으로 따로 떨어져 있지만 첫 줄을 들여 쓰기는 상당히 간단하며 그에 준하는 두 가지 규칙은 아래와 같습니다.
1. 제목, 이미지 혹은 유사한 유형 뒤에 오는 첫 단락 또는 단락의 첫 줄은 들여 쓰지 마십시오. 왜 그런지 설명하기 복잡하지만 일단 아래의 CSS 코드를 참조하세요.
p + p { text-indent: 1em; }
이것은 텍스트 들여 쓰기(text-indent) 속성은 다른 단락 앞에 오는 단락에만 적용되기 때문에 작동합니다. 예를 들어 단락 앞에 h1이 있으면 텍스트 들여 쓰기가 적용되지 않습니다.
2. 단락 아래쪽 여백을 두지 마십시오. 그들은 들여 쓰기 된 라인으로 시각적으로 나뉘어있어서 그걸로 충분합니다. 그래서 따로 공간을 확보할 필요가 없습니다. 들여 쓰기와 여백을 둔 단락은 오히려 숙련된 타이포그래퍼가 싫어합니다.
*여백을 둔 단락: 스페이스키를 여러 번 눌러서 강제로 여백을 만드는 행위
p { margin: 0 auto; }
모든 단락의 위쪽과 아래쪽 여백을 0으로 설정하여 위쪽 여백이 단락 사이에 여백을 두지 않도록 합니다.
제목이나 이미지가 많은 다른 섹션으로 나뉘어 있지 않은 텍스트의 경우, 이 작업을 추천합니다. 단락으로 구분된 긴 텍스트를 사용하면 효과적이고 이는 텍스트가 긴 아티클 혹은 웹 서적에서 단락 들여 쓰기가 가장 적합한 사례라 볼 수 있습니다.
들여 쓰기는 어느 정도가 적합한가요?
위의 예에서 설정한 것과 같이 권장되는 가장 일반적인 단락 텍스트 들여 쓰기는 1em입니다. 또한 라인 높이 단위로 설정하는 것이 일반적입니다(다음에 설명될 수평 리듬 섹션에 자세한 설명 하겠습니다). 따라서 글꼴 크기가 18 픽셀이고 줄 높이가 27 픽셀 단락이 있는 경우 단락 들여 쓰기를 27 픽셀 또는 1.5em (줄 높이가 1.5와 같음)으로 설정합니다. 반은 들여 쓰기를 위한 최소값으로 간주되고 최대 값은 3입니다. 권장하는 사항은 1em 또는 라인 높이 단위와 같습니다.
구두점 적용하기(Hanging punctuation)
10개의 웹 사이트 중 9개는 구두점을 잘못 적용하고 있습니다. 왜 그런지 설명하면 올바른 사용 예를 찾기 쉬울 겁니다. 정의에 근거하여 구두점을 적용하는 것에는 구두점과 글 머리 기호, 가장 일반적으로 인용 부호와 하이픈을 조판하는 방식으로 텍스트 본문의 '흐름'을 방해하거나 정렬 여백을 '끊는' 일이 없도록 해야 합니다. 아래 몇 가지 예를 살펴보겠습니다.
위 이미지에서 차이점을 확인할 수 있습니까? 왼쪽 이미지 사례를 너무 자주 보게 되는 게 가슴 아프네요. 따옴표는 단락 블록 외부에 있어야 흐름이나 리듬을 방해하지 않습니다. 별거 아닌 거 같지만 올바른 경우 타이포그래피에서 큰 영향을 줄 수도 있습니다. 따옴표를 매달기 위한 CSS 속성이 있지만 아직은 Safari에서만 구동됩니다.
blockquote p { hanging-punctuation: first; }
hanging-punctuation 속성을 "first"로 설정하면 "요소의 첫 번째 서식이 지정된 줄의 시작 부분에서 사용 가능한 문자가 고정됩니다."라는 의미로서 이 경우 단락의 첫 줄 시작 부분에 인용 부호가 고정되어 있음을 의미합니다. "적용 가능한 문자" 부분은 CSS가 적용할 수 있는 것으로 간주하는 문자 목록에 따옴표가 있는 것을 의미합니다.
지원되는 브라우저가 그리 많지 않기 때문에 아직은 사용할 수 없을 겁니다. 쉽게 할 수 있음에도 하지 못한다는 게 너무 아쉽네요. 그러나 알려진 바와 같이 간단하게 해결할 수 있는 방법이 있는데 그것은 negative text indent입니다.
blockquote p { text-indent: -0.5em; }
위와 같이 작성하면 아래와 같은 결과를 볼 수 있습니다.
먼저 사용한 서체에서 반영되도록 값을 변경했는지 확인해 보세요. -0.5em은 과한 수치일 수 있지만 필요할 때 변경해야겠죠? betterwebtype.com/book/c6e1 사례를 한번 확인해 보세요.
언급하지 않은 두 가지 해결책에 대한 문제가 있는데 실제로 두 가지 해결책은 첫 줄에 따옴표만 오는 것을 고려합니다. 그럼 문장 중간에 인용할 때 인용문이 새로운 줄에서 시작된다면 어떻게 될까요?
이 예제에서 보다시피 위에 언급된 두 해결책 중 어느 것도 해결되지 않습니다. 텍스트 본문으로 따옴표를 밀어버리는데 사실 시각적으로 좋.아.보.이.지.는 않지만 현재까지는 이게 최선의 방법입니다.
다른 문자와 구두점 사용하기
다른 문자도 구두점을 적용해야 합니다. 따옴표 다음에 가장 중요한 것은 글 머리 기호(bullet)입니다. 그런데 웹 사이트 대부분 이러한 오류를 발생하지만 실제로 브라우저 기본 설정으로 인한 오류가 대부분 발생하는 원인인데 대부분의 브라우저가 정렬된 목록과 정렬되지 않은 목록을 기본 설정으로 렌더링 하기 때문입니다.
실제로 글 머리 기호는 텍스트의 흐름을 방해하지 안 해야 됩니다. 수평 리듬을 올바르게 유지하려면 정렬된 요소와 그렇지 않은 요소의 패딩(padding)을 변경해야 합니다.
ul, ol { padding-left: 0; list-style-position: outside; }
주의 : list-style-position 설정은 outside 인지 확인하세요.
이렇게 하면 글 머리 기호가 바깥쪽으로 밀려 수평 리듬이 잘 유지됩니다. 주요 텍스트 블록 안에 글 머리 기호를 두는 것은 내부에 따옴표를 넣는 것만 큼 큰 오류는 아닙니다. 타이포그래피에서는 이렇게 하는 것이 맞지만 일반 사람들에게는 낯설게 보일 수 있습니다. 한번 적응하면 곧 익숙해질 거니 크게 신경 쓰지 마세요. 우리는 오랫동안 이러한 실수를 해왔으나 이제는 옮바르게 교정해야 합니다. 저는 개인적으로 인용부호(따옴표)보다 글 머리 기호를 추천하는데 betterwebtype.com/book/c6e2에서 실제 사례를 보는 것을 추천합니다.
수직 리듬
웹 사이트 본문 텍스트가 20 픽셀이고 라인 높이가 30 픽셀이라고 가정해 보겠습니다. 먼저 라인 길이는 이 텍스트 크기와 라인 높이(line height)에 적합해야 합니다: 600 픽셀 정도가 적당합니다. 그럼 위의 수치 정보는 수직 리듬을 설정하는데 필요한 항목이 준비되었습니다. 우선 그렇게 하기 위해 기본 리듬 유닛이 필요한데 타이포그래피에서는 기본 리듬 유닛은 라인 높이입니다. 그래서 웹사이트에 30 픽셀 높이의 베이스라인 그리드를 추가하면 추가하여 보면 됩니다.
참고: 이번 예제에는 쉽게 설명하기 위해 픽셀 단위를 사용합니만 보통은 EM 혹은 REM을 사용합니다.
p { font-size: 20px;
line-height: 30px;
max-width: 600px;
}
베이스라인 그리드는 동일한 라인 높이와 수직 리듬을 표시해 줍니다.
참고: 인쇄 및 그래픽 디자인과 달리 베이스라인 그리드는 선 중앙에 배치되는데 많은 사람들이 문자의 맨 아래 있어야 하는 거 아니냐고 물어보는데 웹에서는 그렇게 하지 않습니다. 웹 브라우저가 텍스트 행을 처리(렌더링)하는 방식을 보면 이해하실 겁니다.
웹에서 베이스라인 그리드는 문자 본문에 직접 얹혀있는 인쇄물과는 달리 라인 사이 중간에 위치합니다.
여기서 한 문단만 보고 있어서 그런지 모든 것이 정상적으로 바르게 보입니다. 이 리듬을 유지하려면 사이트의 모든 크기, 여백 및 패딩의 기본 단위로 라인 높이를 사용해야 합니다. 텍스트에 제목을 추가하려고 하면 눈에 잘 띄게 하기 위해 55 픽셀 크기로 지정합니다. 그러면 라인 높이는 이제 기본 리듬 유닛 인 원래 (기본) 라인 높이의 짝수 배수가 될 필요가 있습니다. 이것은 마진에도 적용되는데 특히 위아래 여백에 적용됩니다.
h3 {
font-size: 55px;
line-height: 60px; // = 2 × 30px (main body text line-height)
margin-top: 90px; // = 3 × 30px
margin-bottom: 30px; // = 1 × 30px
}
참고:이 예제에서도 픽셀을 사용하고 있지만 em, rem 또는 소수점 이하 1.5 또는 선 높이에 대한 백분율 (150 %) 값과 같은 단위를 사용해야 합니다.
h3의 라인 높이는 두 줄과 같고, 여백은 위쪽 3줄, 아래쪽 1줄과 같습니다. 그렇게 함으로써 모든 것이 제자리에 딱딱 맞아떨어집니다.
55 픽셀로 설정된 제목을 편안하게 수용할 수 있는 베이스라인 높이(30 픽셀)의 다음 배수이기 때문에 60 픽셀의 라인 높이를 지정했습니다. 헤딩 마진 가이드라인은 맨 아래 여백이 맨 위 여백보다 눈에 띄게 작아야 한다는 건데 많은 웹 사이트는 헤딩에 대해 동일한 상단 및 하단 여백을 갖는 실수를 합니다. 그래서 텍스트 블록 사이의 중간에 바로 떠있게 됩니다. 제목은 아래에 있는 텍스트와 시각적으로 연결되어 있어야 합니다. 이러한 것이 바로 수직 리듬과 시각적 계층 구조로 구현하려는 목표입니다. 그렇게 함으로써 읽는 사람은 대충 훌터봐도 텍스트 구조를 이해할 수 있게 됩니다.
모든 사례 대부분 위와 같이 기본 라인 높이, 여백 및 패딩을 모든 요소에 할당할 값을 지정하고 필요한 경우에만 예외 처리를 하는 것이 가장 좋습니다.
* {
line-height: 27px;
margin-top: 0;
margin-bottom: 27px; // = 1 × 27px
}
따라서 목록의 맨 아래 여백을 지정하려면 아래와 같이 해보세요.
ul, ol {
margin-bottom: 54px; // = 2 × 27px
}
이미지가 수직 리듬을 방해할 때 어떻게 해야 하는지 궁금할 수 있는데 이미지는 다양한 크기로 제공됩니다. 그래서 특히 큰 웹 사이트(포털, 커머스 같은..)의 경우 모든 상황의 높이값을 제어할 수 없습니다. 그래서 이러한 경우 베이스라인 그리드 기준으로 정해서 사용해 보세요. 텍스트와 페이지 비율은 여전히 균형에 맞게 떨어질 것입니다. 물론 이미 만든 시각적 계층 구조도 잘 유지되어 있을 겁니다. 이미지가 있는 큰 콘텐츠 블록은 시각적으로 리듬을 구분하지 않는다고 해서 수직 리듬을 깨트리지 마세요. 처음엔 깨트리는 거 같이 보이지만 결국 나중에 보면 크게 중요하지 않다는 걸 눈치챌 것입니다. 어쩌면 그리드는 수단의 하나 일뿐이니 너무 연연하지 마세요.
수직 리듬과 Sass
작년에 타이포그래피에서 수직 리듬과 모듈러 스케일 관련 툴을 만들었습니다. 의미 있는 웹 타이포그래피 스타터 킷으로서 Gutenberg라고 부릅니다. Sass로 작업하면 엄청 쉽게 할 수가 있는데 Sass가 없었으면 못 만들었을 겁니다. 핵심 목표는 개발자가 몇 가지 기본 크기 (글꼴 크기, 라인 높이, 최대 너비)를 설정하고 Gutenberg가 비율 및 수직 리듬을 처리하는 것입니다. 이제는 모든 웹 사이트에 Gutenberg를 사용합니다. 아래 예제를 보면 Sass로 훨씬 더 쉽게 만들 수 있다는 것을 알 수 있을 겁니다.
$base-font-size: 112.5; // Is used as %
$line-height: 1.5; // = 27px
$base: 16 * ($base-font-size / 100);
$leading: $base * $line-height;
@mixin margin-bottom($number){
margin-bottom: #{$number * $leading + 'px'};
margin-bottom: #{$number * $line-height + 'rem'};
}
이것은 제가 많이 사용하는 믹스인(mixin: 조합)입니다.. Gutenberg는 다른 마진과 패딩에 대해서도 비슷한 믹스인을 가지고 있습니다. 마진이나 패딩을 수동으로 설정하는 대신 믹스인을 사용합니다. 그렇게 하면 수직 리듬이 항상 그대로 유지되는데 위의 믹스인을 사용하는 예는 아래와 같습니다.
h3 {
@include margin-bottom(2);
}
를 변환하게 되면
h3 {
margin-bottom: 54px; // 2 × line-height (27px)
margin-bottom: 3rem; // 2 × line-height (1.5)
}
Sass 믹스인은 하단 마진을 rems으로 설정하고 fallback은 픽셀 단위로 설정합니다.
수직 리듬과 스케치
스케치에서 베이스라인 그리드를 설정하는데 따로 플러그인은 필요하지 않습니다. 간단한 해결 방법으로 Sketch에서 제공하는 기능을 사용하면 되는데 먼저 스케치에서 아트보드를 만들고 View > Canvas > Layout Settings에 가면 아래와 같은 layout settings 창이 나옵니다.
1. Columns를 선택하고 Total width의 값을 아트보드 폭과 일치하도록 변경합니다. 그리고 Offset은 0으로 설정합니다.
2. Rows도 선택해줍니다. Gutter height를 1px, Row height는 여러분이 설정한(라인 높이px + 1px)로 변경합니다 (이전 단계에서 설정 한 Gutter height를 수용하기 위해선 27+ 1이므로 28px로 변환됩니다.
3. Visuals 라디오 버튼 값을 Stroke outline로 변경하세요.
4. 라인의 색상은 보통 어두운 색으로 하는데 개인 편의에 맞춰서 색을 지정하면 됩니다.
자 그럼 이제 스케치에서 베이스라인 그리드가 생겼습니다. 생각보다 단간 합니다.
참고: 여러분이 제작한 콘텐츠는 항상 그리드 뒤에 표시됩니다. 눈에 너무 거슬린다면 라인의 투명도를 조절해보시고 조절하는 것은 위의 4 단계에서 변경 가능합니다.
웹 타이포그래피 리듬 샘플
본 내용은 Better Web Typography for a Better Web 챕터 6을 기반으로 작성되었습니다. 책을 읽어본 독자라면 서체의 해부학, 글꼴의 선택과 결합 그리고 완벽한 단락의 모양을 숙지했다는 전제 하에 내용을 예제에 적용했습니다.
_
리듬은 타이포그래피에서 가장 중요한 것 중 하나이며 올바르게 하기 위해 많은 노력과 시간이 필요하지 않다는 것을 알 수 있습니다. 몇몇 디자이너는 자신의 눈에 보이는 것을 (시각적으로 맞다고 판단) 사용하는 것을 선호하고 다른 디자이너는 수학(계산)으로 의사 결정하는 것을 선호한다는 것도 있는데 어느 하나에 치우치지 않고 두 방법이 섞여 함께 작업할 수 있어야 한다고 봅니다. 수학적으로 정확한 것부터 시작해서 나중에 필요한 경우 시각적 교정을 하는 것을 좋아합니다.
이전 챕터에서는 예제 웹 사이트에서 제목에 사용할 서체를 결정했습니다. 다음은 우리가 중단 한 부분입니다.
*책하고 이어지는 부분이니 이전 챕터는 무시하세요.
본문 텍스트를 18 픽셀로 설정하고 라인 높이를 1.45(26 픽셀)로 설정했습니다. 그럼 이제 웹 사이트에 수직 리듬을 적용하는데 필요한 조건을 갖추었습니다. 이 예제에서는 Sass를 사용합니다. 그리고 좀 더 쉽게 이해할 수 있도록 데스크탑 항목만 다룰 것입니다. 실제 사례에서 보면 모바일 텍스트 크기와 라인 높이 (데스크톱과 같지 않은 경우)에 대해 프로세스를 반복적으로 처리해야 합니다. 이 부분은 반응형 웹 타이포그래피에 대한 장에서 다룰 내용입니다.
먼저 모든 요소의 라인 높이와 아래쪽 여백을 설정해 보겠습니다.
// Variables
$base-font-size: 112.5; // Gets used as %
$line-height: 1.45;
// Vertical rhythm mixins
@mixin line-height($number) {
line-height: #{ $number * $line-height + 'rem'};
}
@mixin margin-top($number) {
margin-top: #{ $number * $line-height + 'rem'};
}
@mixin margin-bottom($number) {
margin-bottom: #{ $number * $line-height + 'rem'}; }
html {
font-size: #{$base-font-size + '%'}; // 112.5% = 18 pixels
}
* {
@include line-height(1);
@include margin-bottom(1);
@include margin-top(0);
}
모든 요소의 라인 높이와 여백(margin)을 재설정했습니다. 모두 베이스라인 그리드에 딱 맞게되었는데 동시에 다른 문제가 발생합니다. 제목은 일반적으로 본문 텍스트 크기보다 커서 단일 라인 높이에 맞지 않습니다. 그래서 모든 제목의 라인 높이를 변경해야 합니다. 그래서 마진을 변경해 보시죠.
가장 쉬운 방법은 모든 제목과 라인 높이, 상단 및 하단 여백에 대한 값 목록을 가진 객체를 만드는 것입니다.
// Headings parameters [ h1: line-height: 2 × 26px, margin-top: 3 × 26px, margin-bottom: 1 × 26px ]
$headings: (
h1: (2, 3, 1),
h2: (1.5, 2, 1),
h3: (1.5, 1, 0),
h4: (1, 1, 0),
h5: (1, 1, 0),
h6: (1, 1, 0) );
// Set line-heights and margins
@each $heading, $properties in $headings {
#{$heading} {
@include line-height(nth($properties, 1));
@include margin-top(nth($properties, 2));
@include margin-bottom(nth($properties, 3));
}
}
위와 같이 하면 라인 높이에 대한 문제가 해결되며 모든 주요 텍스트 요소들이 베이스라인 그리드에 격자에 맞게 됩니다. 지금부터 Sass 믹스인으로 모든 라인 높이와 마진을 설정했는지 확인해 보면 잘 맞아떨어지고 있다는 걸 알 수 있습니다. 예제는 betterwebtype.com/book/c6 에서 확인 가능합니다.
이 책은 모듈러 스케일과 "의미 있는 타이포그래피"가 의미하는 것이 무엇인지.. 페이지 구성, 반응형 웹 타이포그래피, 그리고 마이크로 타이포그래피에 관한 4개의 챕터를 다루고 있습니다.
___
버티컬 리듬 리소스 및 툴
웹에서 리듬 작업하기 위한 유용한 리소스와 툴입니다.
웹사이트 수직 리듬을 위한 WYSIWYG(what you see is what you get) 툴
Archetype
웹 타이포그래피 디자인 제작
모듈러 스케일과 수직 리듬 제작 타이포그래픽 시스템
웹 타이포그래피 스타터 킷
출처: https://betterwebtype.com/rhythm-in-web-typography
이제는 각 분야별로 깊게 파야하는 니즈가 발생하네요.
눈대중으로 적당히 하는 게 아닌 모듈화 된 구조...
조금이라마 도움되셨으면 합니다.
