더 편안한 읽기를 위한 3가지 타이포그래피 팁 (3 Typography Tips For A More Comfortable Read)

안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.



(디자이너와 디자이너가 아닌 사람들을 위한 글)
더 즐거운 읽기를 제공하기 위해 콘텐츠에 적용할 수 있는 3가지 작은 변화가 있습니다. 팁은 디자인에 적용되는 것이 아닙니다. 또한 텍스트 문서를 멋지게 보이게 만드는 것에도 사용됩니다.
각 원칙의 이름은 복잡할 수 있지만 이해와 사용은 간단합니다.
presentation
데모용으로 Anthony Burgess가 만든 Clockwork Orange의 스타일이 없는 페이지를 사용하려고 합니다.
중요 사항 : 모든 글꼴이 다르므로 내용이 옳지 않은 경우 계속하여 측정 값을 조정하십시오. 여기서 중요한 것은 독자가 편안한 독서 경험을하고 있으며 눈에 띄는 것입니다.

1 - Typographic 계층 구조를 사용하여 페이지 구조의 명확한 느낌을 주십시오.

Typographic 계층 구조(Typographic hierarchy)는 페이지 텍스트의 시각적 계층 구조입니다.
presentation
책을 상상해보십시오. heading-기본 제목 (the chapter title)은 body text-본문 (페이지의 주요 내용)보다 두드러진 secondary heading-보조 제목 (the sub-heading)보다 더 두드러집니다. 동일한 원칙이 설계 또는 단어 문서에서 고려되어야 합니다.
모든 글꼴 크기는 각 페이지에서 가장 많이 읽힐 것이므로 body text-본문 텍스트에서 파생되어야 합니다. 다음은 계층을 정의하는 몇 가지 간단한 단계입니다.
  1. Body text-본문 텍스트 : 편하게 읽을 수 있을 때까지 텍스트 크기를 늘리거나 줄입니다. 이 글에서는 22pt로 설정해 보겠습니다.
  2. Primary heading-기본 제목 : 본문 텍스트의 180-200%, 40-44pt
  3. Secondary heading-보조 제목 : 본문의 130-150%, 29-33pt
다음은 이 조언들을 따른 후의 페이지 모양입니다.
presentation
Part One (primary heading-기본 제목)과 Chapter One (secondary heading-보조 제목)은 본문 텍스트가 아니라 제목임을 독자에게 알리기 위해 크기가 커졌습니다.

추가 고려 사항

이 글에서는 이 수준이 필수는 아니지만 tertiary heading-3차 제목 및 caption text-캡션 도 고려해야합니다.
  1. Tertiary heading: 100–125% of the body text, between 22–28pt
  2. Tertiary heading-3차 제목 : 본문의 100-125%, 22-28pt
  3. Small text-작은 텍스트 / captions-캡션 : 본문 텍스트의 70-75%, 15-17pt

2 - 세로 간격(Vertical Spacing)을 사용하여 단어들을 쉽게 스캔하도록 합니다.

이것은 독자가 페이지를 읽어 내려갈 때 텍스트의 간격과 배열입니다. 우리는 단락 사이의 줄 간격이 눈과 두뇌가 문자, 단어 및 단어 모양을 더 쉽게 해독할 수 있도록 충분한 공간을 제공해야 한다는 것을 알아야 합니다. 이것이 우리 모두가 읽은 방식입니다.
presentation

단락 간격 - Paragraph Spacing

단락 간격(paragraph spacing)을 설정하는 것은 간단하지만 새로운 단락에 대해 'return 또는 enter'를 두 번 누르는 것과는 매우 다릅니다. return 또는 enter를 두 번 누르면 갭이 너무 커서 콘텐츠가 동일 섹션에 포함되는 것인지 새로운 섹션에 포함하는지를 즉시 이해할 수 없습니다.
대부분의 경우 본문 텍스트((body text)와 같아야하므로 본문 텍스트가 16pt이면 단락 간격은 16pt입니다.
  • 디자인 응용 프로그램과 CSS에서는 단락의 여백(margin-bottom)을 16px 또는 1em으로 설정하는 것과 같습니다.
  • Pages / Word 문서에서는 'After paragraph'값을 본문 텍스트의 크기로 설정하십시오.
presentation
단락 간격이 도입되어 각 단락이 뚜렷하게 구분됩니다.

줄 간격 - Line Spacing

줄 간격(line spacing)은 텍스트 크기의 120-160% 사이에서 설정해야 합니다. 일반적으로 텍스트가 작을수록 각 단어 공간에 호흡을 줄 수 있도록 줄 간격을 더 많이 필요로 합니다.
팁 : d / b / t (상 승관 - ascenders)의 꼭대기 또는 p / q / y (하강 자)의 바닥을 치지 않고 선 사이에 옆 으로 'h'를 맞출 수 있어야합니다.
만약, 본문 텍스트(body text)가 22pt 이면 해당 텍스트의 줄 높이(line-height)는 26-35pt 사이 여야 합니다.
  • CSS에서는 ems 또는 단위가 없는 값 (예 : 1.2)을 사용하여 이 값을 설정할 수 있지만 적절하게 조정하려면 조정이 필요할 수 있습니다.
  • Pages / Word 문서에서 줄 높이(line-height)는 소수점 이하 자릿수로 설정되며 1.2는 편집 중인 텍스트의 120%와 같습니다.
presentation
선 높이(line height)가 증가하여 선을 쉽게 스캔 할 수 있습니다.

3 - 각 줄의 텍스트를 더 읽기 쉽게 만들기 위한측정값 조정

측정 값은 텍스트 줄의 길이(length of a line)입니다. 긴 줄의 텍스트는 읽기가 쉽지 않으며 짧은 줄이 더 쉽습니다. 한 줄당 이상적인 문자 수는 65-75입니다. 측정 값은 표제(headings) 또는 하위 표제(sub-headings)보다는 본문 텍스트(body text)의 너비로 정의해야합니다.
presentation
팁 : 대문자와 소문자로 이루어진 줄은 62자이며 편안한 측정값을 찾는 간단한 방법입니다.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789
65-75자를 한 줄로 만든 후에는 줄 바꿈이 끝날 때까지 텍스트 열의 너비를 줄이면 측정값이 편안하다는 것을 알 수 있습니다.
presentation
각 라인이 편안한 독서 길이가 되도록 측정값을좁게 만들었습니다.

최종 결과

위의 3단계를 수행하면 아래에서 볼 수 있듯이 콘텐츠의 가독성이 크게 향상되었습니다.
presentation
설정 유형은 접근할 수없는 기술이 아니기 때문에 모든 간단한 내용을 쉽게 읽을 수 있는 몇 가지 간단한 원칙을 따르는 것이 가능합니다. 이 부분을 콘텐츠 제작 워크 플로의 일부로 만들고 당신이 대우를 받을 수 있니다.
이 목록은 간결하며 결코 포괄적인 내용은 아닙니다. 디자이너가 아닌 사람들에게 콘텐츠를 더 보기 좋게 만들기 위해 따라야 할 간단한 단계 목록을 제공하는 것이 목적입니다. 질문, 의견 또는 제안 사항이 있으시면 twitter에서 저에게 이야기하십시오.

번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역 글입니다.원본링크 입니다.