본문에 사용할 서체를 선택한 후에는 브라우저에서 테스트를 거쳐야 합니다. 텍스트가 있을 환경에서 타이핑을 수행하면 최종 결과에 대한 진정한 의미를 얻을 수 있습니다.
기본 페이지 설정
다음은 시작하는 데 필요한 전체 마크업입니다.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<style>
/* CSS styles go here */
</style>
</head>
<body>
<p><!-- paragraph text --></p>
</body>
</html>뷰포트 meta 태그는 반응형 타이포그래피에 매우 중요합니다. 확대 및 축소하지 않고 작은 화면에서 텍스트를 읽을 수 있도록 하려면 뷰포트가 아닌 장치의 해상도를 대상으로 지정해야 합니다.
단락
구성에서 가장 많은 부분을 차지하는 단락부터 살펴보겠습니다. 문단 설정 시 실제 내용을 사용하는 것이 좋습니다. 더미 텍스트와 달리 실제 내용은 서체가 페이지에서 실제로 어떻게 보일지 더 잘 알 수 있습니다. 텍스트에 굵게 및 기울임꼴로 된 단어가 있는 경우 HTML에서도 표시하여 페이지에서 어떻게 보이는지 확인할 수 있습니다. 일부 서체는 활자 주조소의 마케팅 자료나 견본에 잘 어울리지만 내가 하고자 하는 프로젝트에는 적합하지 않을 수 있습니다. 브라우저에서 단락을 설정하면 텍스트에 적합한 리듬과 흐름을 만들 수 있습니다. 템포의 속도는 디자인 컨텍스트에 따라 다릅니다. 예를 들어, 글자와 단어 간격이 더 좁은 서체를 선택하여 작은 장치에서 빠르게 읽을 수 있도록 더 빠른 리듬과 흐름을 제공할 수 있습니다. 더 큰 화면의 경우 텍스트가 숨을 쉴 수 있도록 글자와 단어 간격이 더 느슨한 서체를 선택하여 더 느리고 즐거운 속도를 위해 더 편안한 리듬과 흐름을 제공할 수 있습니다. 브라우저를 물리적으로 안팎으로 움직여 단락의 리듬과 흐름을 변경할 수 있습니다. 미디어 쿼리를 사용하여 다른 화면 장치에 대해 다른 리듬과 흐름을 설정할 수 있습니다. 유형 표본을 위한 도구로 브라우저를 활용하면 좋습니다. CSS 파일을 편집하고 동일한 페이지를 다른 창에서 열어서 다른 유형 처리를 비교할 수 있습니다. 열려 있는 창을 새로 고치지 않으면 동일한 페이지에 적용된 다른 유형 처리를 미리 볼 수 있습니다.
모바일 우선
텍스트가 로드되면 기본 CSS를 설정합니다.
body {
font: 100%/1.5 'Spectral', serif;
font-weight: 400;
margin: 0 auto;
padding: 2em;
text-align: left;
}구문을 살펴보겠습니다. 현재의 기조는 모바일 우선 접근 방식의 1순위 입니다. 장점 중 하나는 컴포지션의 너비를 설정할 필요가 없다는 것입니다. 브라우저를 340픽셀 너비 또는 그 가까이로 밀어 넣으면 작은 화면에서 텍스트가 어떻게 보이는지 알 수 있습니다. 대부분 대체적으로 본문 텍스트 크기를 100%에서 시작합니다. 이는 16px 또는 1em에 해당합니다. 100% 텍스트가 작은 화면에서 너무 작거나 너무 크게 보이면 단락 요소(p)를 조정하여 최적의 읽기 크기를 얻을 수 있습니다.
줄 높이(줄 사이의 간격)의 경우 편안한 측정값은 1.4에서 1.6 사이이지만 문자의 x 높이와 텍스트 줄의 길이에 따라 다릅니다. x 높이가 크고 행 길이가 긴 경우 행간을 늘리고 싶을 것입니다. 반대로 x-height가 작고 라인 길이가 짧으면 리딩을 조이고 싶을 것입니다. 편안한 자리를 얻으려면 실험과 최선의 판단이 필요합니다.
패딩의 경우 일반적으로 왼쪽과 오른쪽에 최소 2em을 줍니다. 그 이유는 매달린 글머리 기호 목록을 사용하는 것을 선호하기 때문입니다. 작은 화면 장치에서 왼쪽 패딩이 2em 미만으로 설정된 경우 매달려 있는 원형 기호가 화면 가장자리에 닿습니다.
여백의 경우 왼쪽 및 오른쪽 여백을 자동으로 설정하여 컴포지션이 브라우저 중앙에 오도록 하는 것을 좋아합니다. 이는 큰 화면용으로 디자인할 때 더 적합합니다. CSS에서 글꼴 두께는 노말 또는 볼드와 같은 키워드로 지정할 수 있지만 정확한 제어를 위해 100(가장 얇음)에서 900(가장 굵게) 범위의 숫자 값을 사용하는 습관을 들이는 것이 좋습니다. 일반적인 서체의 일반 두께는 400이고 굵은 글꼴은 700입니다.
편안한 리딩
본문 설정 시 텍스트는 가독성을 위해 한 줄에 45~75자 사이로 유지하는 것이 좋습니다. 지나치게 긴 선은 눈이 더 멀리 이동할 수 있기 때문에 텍스트를 스캔하는 것을 더 어렵게 만듭니다. 한 줄의 끝에 도달하는 독자는 다음 줄의 시작을 찾는 데 어려움을 겪을 수 있습니다. 문제는 중단 없는 독서 경험을 위한 가장 편안한 방법을 찾는 것입니다. 100% 또는 16px의 텍스트 크기는 일반적으로 작은 화면(340px 이하 너비)에서 잘 작동합니다. 그러나 큰 화면에서는 줄 길이에 제한을 두어야 합니다.
단락 표시
웹에서 단락을 분리하는 가장 일반적인 방법은 추가 행간 또는 빈 줄을 사용하는 것입니다. 단락 덩어리를 사용하면 온라인 콘텐츠를 더 쉽게 훑어볼 수 있습니다. 인쇄물에서 첫 줄 들여쓰기는 읽기의 흐름을 방해하지 않고 새 단락을 나타내는 데 자주 사용됩니다. 첫 줄 들여쓰기는 긴 형식 읽기를 위해 온라인에 더 많이 나타납니다. 어떤 방법을 선호하든 둘 다 사용하지 말고 하나만 사용하는 것을 권장합니다. 첫 줄 들여쓰기를 사용하는 경우 첫 번째 단락에 들여쓰기가 없는지 확인하고 다음 단락은 1em 들여써야 합니다.
p { margin: 0;}
p + p {text-indent: 1em;}다음은 첫 번째 줄 들여쓰기를 위한 두 줄의 CSS입니다.
'서체 이야기' 카테고리의 다른 글
| 제목의 선택 (0) | 2022.02.24 |
|---|---|
| 본문용 서체를 선택하는 방법 (0) | 2022.02.17 |
| 웹 폰트의 제공 (0) | 2022.02.15 |
| 전문적인 웹 타이포그래피 (0) | 2022.02.14 |
| 타이포그래피로의 모험 (0) | 2022.02.12 |