디자인 시스템 구축하기 4부 : 타이포그래피
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
1부 - 준비
2부 - 컬러
3부 - 크기와 간격
4부 - 타이포그래피
5부 - 보너스
목차
1.타이포그래피
2.특징
3.서체
4.글꼴 선택
5.규모(범위)와 크기
6.글꼴 크기 이름 지정
7.줄 길이
8.줄 높이
9.자간
10.레터 케이스
11.폰트 스타일
12.REM과 픽셀(Pixel)
13.색상
14.접근성
15.결론
컬러, 공간 및 타이포그래피는 단단한 디자인 시스템을 위한 기본 구성요소이다. 브랜드를 만들 때 중점 두어야 할 시각적 요소이기도 하다. 오늘은 그 타이포그래피에 대해 자세히 살펴볼 것이다.
1.타이포그래피
이전 글에서는 크기와 간격, REM 같은 측정 수치를 사용하는 것이 타이포그래피에 어떻게 영향을 주는지를 이야기했다. 크기와 간격이라는 두 개의 개념은 타이포그래피의 가족처럼 종종 서로에게 의존한다. 당신은 이 글과 이전 글 사이에 몇 가지 공통적인 주제가 있음을 알게 될 것이다.
이 글은 주로 기술적인 고찰과 함께 고려되어야 할 디자인 결정에 초점을 맞추고 있다. 특히 타이포그래피를 디자인 시스템에 구축할 때 디자이너는 개발자와 긴밀히 협력하는 것이 중요하다.
2.특징
Ether 은 타이포그래피 특성을 두 가지 카테고리로 설명한다.
1)고유성은 타이포그래피 자체의 규칙에 따라 결정되는 특성이다. 문맥에 따라 변하지 않으며, 여기에는 다음과 같은 것들이 포함된다.
서체
크기
무게
줄 높이
자간
2)문맥적 특성은 인터페이스에서 타이포그래피의 사용과 목표에 따라 변할 수 있다. 여기에는 다음이 포함된다.
색상
간격(패딩, 마진)
3)내가 이 목록에 또 추가하고 싶은 것은, 접근방식에 따라 고유하거나 문맥적일 수 있는 특성이다. 이는 다음과 같다.
글자 유형: 대문자(UPPERCASE), 소문자(lowercase), 캐피탈 케이스(Capital Case), 센텐스 케이스(Sentence case), 스몰 캡(small cap)
폰트 스타일: 레귤러(regular), 볼드(bold), 이탤릭(italic) 또는 밑줄(underline)
3.서체
브랜드에는 기본 서체가 있을 것이다. 그러나 때에 따라서 디지털 친화적인 방식의 새로운 글꼴을 선택해야 한다. 예컨대 애플(Apple)은 헬베티카(Helvetica)처럼 전통적인 글꼴을 사용했으나, 2015년 애플워치 출시와 동시에 샌프란시스코(San Francisco)라는 새로운 글꼴을 만들었다. 이는 디지털 용도로 설계된 OS X El Capitan의 기본 글꼴로써, 깔끔하고 조밀한 형태로 가독성을 극대화하여 디자인 되었으며, 섬세한 둥근 모양과 문자 사이의 충분한 공간을 갖고 있다.
알맞은 서체를 선택하는 것은 브랜드의 정체성에 있어서 매우 중요하다. 브랜드팀과 협력하여 글꼴을 지정할 때는 브랜드 기업 아이덴티티(Corporate Identity)을 준수해야 한다.
4.글꼴 선택
괜찮은 한 쌍 또는 하나의 글꼴을 선택해야 한다. 앞에서 말했지만, 당신이 사용할 글꼴은 이미 당신의 기업 아이덴티티 가이드라인에 의해 결정되었을 수도 있기 때문에, 글꼴을 사용하기 전에 브랜드팀과 상의하자.
5.규모와 크기
이전 글에서는, 디자인 시스템 내 크기와 여백을 논하면서 엘리엇 달(Elliot Dahl)이 해결한 세 가지 일반적 시스템 모델들을 언급했다. 이들을 타이포그래피에 적용하는 방법은 다음과 같다.
마케팅 - 방문자들에게 구체적인 이야기를 들려주며 사이트에서 시간과 돈을 쓰도록 유도하기 위해 만들어졌다. 극적으로 큰 크기의 글꼴을 사용하여 큰 글씨가 더 도드라져 보이도록 한다.
편집 - 대량의 정보를 전달한다. 글꼴 크기의 차이는 일반적으로 마케팅 모델보다 규모가 작고 덜 극적이다.
데이터 - 세금 신고, git repo 관리, 성능 지표 시각화처럼 사용자 문제를 해결하기 위해 만들어졌다. 글꼴의 크기는 제시해야 할 많은 양의 데이터로 인해 훨씬 더 규모가 비슷해질 수 있다. 글꼴 크기의 비율은 위에서 언급한 두 가지 다른 모델보다 훨씬 더 작다.
이전 글에서 언급한 이야기를 다시 살펴보자. 모듈형 스케일(modular scale)를 사용하는 개념은 마찬가지로 타이포그래피에 적용할 수 있다. 사실 모듈형 스케일은 간격보다 타이포그래피의 규모와 관련하여 종종 더 자주 사용된다. 또한 8포인트 그리드 시스템에서는 기본 글꼴 크기를 16px로 설정한다. 당신은 이러한 원칙과 접근법의 일부를 읽고 글꼴 크기를 설정하는 데도 사용할 수 있다.
제이미 길먼(Jamie Gilman)은 아키타입(Archetype)이라는 체크아웃할 가치가 있는 훌륭한 브라우저 기반 도구를 구축했다. 이는 위에서 언급한 많은 개념을 포용하지만, 다음을 달성하기 위해 특별히 고안되었다.
알맞은 글꼴 한 쌍을 더 쉽고 빠르게 선택
디자인 시스템에 필요한 다양한 타이포그래피 요소에 대해 규칙에 기반 스타일링과 간격을 만들어 시간을 절약 (브라우저에서 실제로 어떻게 보이는지 모두 보여줌)
버튼 터치만으로 새로운 스타일에 필요한 CSS를 생성 (개발자에게 전달할 때 놀라운 시간과 노력 절약한다)
디자인 시스템 문서의 일부로 사용하기 위해 스케치로 직접 내보내기 가능
아키타입은 디자인 시스템 타이포그래피 설정을 돕는 훌륭한 도구이다.기술적인 측면에서 크기는 수동적 또는 동적으로 크기를 지정할 수 있다. CodyHouse의 Sebastiano Guerriero는 다음과 같은 질문에 대해 대답했다. ‘왜 당신의 CSS는 글자 규모를 갖고 있습니까?’ 한 마디로 ‘제어’할 수 있기 때문이다. 더불어 그들은 놀라운 디자인 시스템 템플릿을 구축했다. CSS나 LESS를 대체하여 사용할 수도 있지만, 중요한 점은 제어력을 유지하고 동적 방식으로 스케일을 설정하는 것이다. 이 폭포 효과(cascading effect)와 제어를 통해 미래에 변화를 만들거나, 위에 언급된 세 가지 아키타입 중 두 개 이상의 아키타입으로 확장되는 디자인 시스템을 구축할 때 많은 시간을 절약해 줄 것이다.
6.글꼴 크기 이름 지정
글꼴 크기를 골라서 <h1>이나 <h2>와 같은 헤딩으로 정하는 것만으로는 부족하다. 토큰에 크기를 할당하라. 왜냐하면, HTML 코딩에서 <h1>부터 <h6>까지의 헤딩 태그들은 SEO에 대해 의미적 계층구조를 제공하지만, 텍스트 크기를 나타내지 않기 때문이다.
한 크기의 카드에 <h2> 헤딩을 사용하고, 기사 페이지 내의 <h2> 제목을 사용할 수 있지만 크기는 다르다. 두 가지 모두 동일한 계층 구조로 되어 있을 수 있지만, 사용 사례는 매우 다르다.
한 크기의 카드에서 <h2> , 다른 크기의 기사 페이지에서 <h2>문단도 다른 크기로 표시해야 할 수 있다. 일반적으로 작은 크기로 사용해야 하는 세 가지는 일반 단락, 도입부, 리드 단락이 있으며, 리드 단락은 조금 더 큰 크기를 사용하는 각주와 같은 항목이 있다. text-small, text-medium 또는 text-large를 사용하거나, 일반 티셔츠 크기의 은유를 사용한 text-s, text-, text-l를 고려해보라.
특정 글꼴의 무게는 높이에 비례한 문자 윤곽의 두께이다. 서체는 초경량에서 매우 굵거나 검은색에 이르기까지 많은 무게로 나올 수 있다. 보통 4~6개의 무게를 갖고 있으며, 몇 개의 서체는 무게가 12개에 달한다.
CSS에서는 100에서 900까지의 숫자로 된 글꼴 무게의 값을 사용하여, normal과 bold 외에도 무게를 설정할 수 있다. (400은 normal, 700은 bold).
보통 글꼴 무게(font-weight)가 무거우면 헤딩이나 타이틀에 쓰이고, 더 가벼울수록 문단에 쓰인다. 작은 텍스트에 가벼운 폰트를 사용할 때 주의하자. 이는 접근성 문제로 이어질 수 있다.
좀 더 세련된 타이포그래피 시스템의 경우에는, 헤딩에서 하나의 무게를 선택하는 대신, body 유형에 대해 두 번째 무게를 정하는 데 시간을 쓰거나, 전체 계층 구조를 잘 반영한 각 헤딩 크기의 무게를 정하는 데 시간을 소비한다.
주의
글꼴 두께를 선택할 때 추가되었던 모든 두께는 다운로드 크기에 반영되므로 주의하자.
7.줄 길이
줄 길이는 텍스트 블록의 왼쪽과 오른쪽 가장자리 사이의 간격이다. 지나치게 긴 줄은 보통 문제가 되지만, 수정은 어렵지 않다. 줄이 짧을수록 레이아웃의 가독성과 전문성에 큰 영향을 미칠 것이다.
짧은 줄은 긴 줄 보다 읽기 좋다. 줄 길이가 길어질수록, 눈은 한 줄의 끝에서 다음 줄의 시작까지 멀리 이동해야 한다. 또 줄이 너무 짧으면 텍스트가 분리된다. 반면에 너무 길면 사용자가 각 줄의 시작을 찾는 도중에 콘텐츠가 리듬을 잃는다.
디지털 텍스트에 권장되는 줄의 길이는 한 줄에 50~75자 사이이다. 이상적인 줄 길이를 측정하는 좋은 방법은 알파벳 문자를 사용하는 것이다. 만약 알파벳이 2~3번 사이의 공간에 들어맞으면 안전 구역에 있는 것이다.
모바일 스크린이 출시되면서, 이 규칙을 따르면 화면에서 텍스트가 매우 작게 보일 수 있으며, 이는 접근성 문제를 야기한다. 나는 모바일에서 이상적인 줄 길이는 줄당 35~40자 사이라는 것을 발견했다.
디자인 시스템을 글자를 표시하는 구성 요소로 분류할 때 줄 길이를 명심하자.
8.줄 높이
포토샵과 같은 일부 최신 디자인 애플리케이션은 여전히 '리딩'이라는 용어를 사용하고 있지만, HTML과 CSS에서는 그 속성을 '줄 높이'라고 부른다. 리딩, 줄 간격(Line spacing), 줄 높이(Line height)는 모두 같은 것을 가리킨다.
줄 높이 또는 라인 간격은 일반적으로 글꼴 크기의 백분율로 측정된다. 일반적으로는 130%~150%의 줄 간격이 가독성에 이상적이지만 200%까지 허용된다는 것이 통설이다.
완벽한 줄 높이는 글꼴 자체의 디자인과 크기에 따라 달라진다. 모든 텍스트에 적용되는 마법의 숫자는 없다. 글자 크기의 1.5배의 줄 높이는 가장 좋은 출발점이다. 이에 맞추어 적합하게 조절할 수 있다.
1.5의 줄 높이를 사용하려면 8포인트 그리드 시스템이 효과적이다. 줄 높이 8과 기본 글꼴 크기 16은 원리가 완벽히 들어맞기 때문이다.
최적의 줄 간격과 글꼴 크기를 계산하는 앞선 방법은 황금 비율 타이포그래피 계산기(Golden Ratio Typography Calculator)를 참조하라.
Justinmind.com은 줄 간격에 대한 UX 모범 사례를 기사 전체에 전념하여 서술하면서 다음 예제를 사용했다.
100% 문단에서, 여러분은 인접한 줄에 있는 글자들이 위험할 정도로 서로 닿아있는 것을 볼 수 있다. 이것이 문제가 되는 이유는 시각 장애가 있는 사람들이 읽기가 훨씬 더 어렵다는 사실 때문이다. 150%로 보면 공간의 균형이 더 잘 잡혀 있고 텍스트가 읽기 쉽다는 느낌이 들 것이다. 반면, 250%의 간격은 너무 지나치다. 다시 말해, 줄 간격이 너무 과장되어 텍스트를 읽는 게 부자연스러울 수 있다.
- 줄 간격에 대한 모범 UX 사례 justinmind.com
글꼴 크기가 작을수록 줄 간격이 퍼센트(%)로 증가해야 한다. 작은 글꼴은 이미 읽기가 어려우며, 눈이 쉽게 따라갈 수 있도록 더 많은 공간이 필요하기 때문이다.
Justinmind의 Tom Clark는 줄 간격에 대해 다음과 같은 6가지 황금 규칙을 제안한다.
1)최적의 가독성과 접근성을 위해 약 140%~180%를 목표로 한다.
2)줄 길이를 70~80자로 제한해라.
3)글꼴 크기는 최소 16pt여야 한다.
4)작은 글꼴은 더 많은 공간이 필요하다.
5)인용문 또는 기타 짧은 텍스트에 더 긴 간격을 두어라.
6)글꼴 또는 글꼴 크기를 변경할 때 줄 간격을 확인해라.
9.자간
자간은 각 문자 사이의 간격을 말한다. 커닝(Kerning)과 트래킹(tracking)도 이러한 개념을 나타내는 용어지만, 웹에서 디지털 글꼴로 작업할 때는 자간이 사용된다. 웹에서 글자를 설정할 때 자간을 조정하는 웹 디자이너는 거의 없지만, 작은 변화가 글자의 가독성에 큰 영향을 미칠 수 있다.
John D. Jameson은 Guidelines for Letterspacing Type이라는 훌륭한 기사를 썼다. 그는 다음과 같이 제안한다.
글자 크기와 자간의 관계는 꽤 간단하다. 크기가 커지면 자간이 감소하고 크기가 줄어들면 자간이 증가한다.
1)대문자 - 대문자의 자간을 늘리는 것은 대부분 좋은 선택이다.
2)큰 텍스트(예: 타이틀과 헤딩)는 자간을 줄이는 게 좋다.
3)본문 텍스트는 기본 트래킹이 있거나, 기본 자간과 매우 비슷해야 한다.
4)매우 작은 글자는 자간을 늘려야 한다.
5)어두운 배경의 밝은 텍스트 - 어두운 배경에 있는 밝은 글자는 대개 자간을 약간 높이는 게 좋다.
6)글꼴 무게 - 글꼴 크기와 마찬가지로 글꼴 무게와 자간의 관계는 단순한 패턴을 따른다. 무게가 증가하면 자간이 감소하고, 무게가 감소하면 자간이 증가한다.
https://codepen.io/johndjameson/pen/pJmKoZ무게가 자간을 정하는 데 어떤 영향을 주는지 대한 자세한 설명은 Carolina de Bartolo가 타이포그래피 문제를 이야기하는 YouTube로 확인하자.
10.레터 케이스
영문을 모두 대문자로 쓴 텍스트를 뜻하는 올 캡 텍스트(All-caps text)는 조금만 쓰는 게 좋다. 본문 글자 크기에서 대문자 또는 단순 대문자는 일반 소문자보다 읽기 어렵다. 실용적인 타이포그래피(Practical typography)에서는 우리가 더 많은 소문자를 읽기 때문에 습관적으로 소문자가 더 친숙하고 읽기 편하다고 설명한다. 더불어 인지 연구에 따르면 긴 글자(dhkl), 짧은 글자(aens), 하강하는 글자(gypq)의 모양들이 우리의 뇌가 단어를 인식하도록 돕는 다양한 시각적 윤곽을 만들어 낸다고 주장했다.
https://practicaltypography.com/all-caps.html그렇다고 해서 우리가 대문자를 사용하지 말아야 한다는 뜻은 아니다. 예컨대 버튼에 모두 대문자를 사용하면 상자 모양 안에서 글자가 더 대칭적으로 보이게 할 수 있다.
긴 텍스트를 읽어야 하는 곳에서는 대문자를 사용하지 말아야 한다. 사용자가 주의를 기울이는 탭과 같은 중요한 곳에 대문자를 사용하자. 헤더, 캡션 또는 다른 UI 레이블처럼 텍스트 길이가 한 줄보다 짧은 곳에서 대문자를 사용하는 게 기본 규칙이다.
타이틀 케이스(Title case) - 각 단어의 첫 글자를 대문자로 만드는 방식이다. 일반적으로 헤드 라인 및 레이블의 경우에만 이를 사용하는 것이 좋다. 이렇게 하면 헤드라인을 다른 콘텐츠와 시각적으로 분리하여, 독자들이 기사(또는 기사의 일부)가 어디서 시작되는지 알 수 있도록 한다. 애플의 디자인 가이드라인은 경고(alert) 제목, 메뉴 항목, 버튼을 포함한 많은 UI 요소에 타이틀 케이스를 권장한다.
센텐스 케이스(Sentence case) — 센텐스 케이스의 경우 문장의 첫 글자(및 적절한 명사)를 대문자로 쓴다. 센텐스 케이스는 평범하고 깔끔하며, 가독성을 높인다. 게다가 아무도 사업상 손실을 입혔다고 불평 한 사람이 없었다. 구글의 머터리얼 디자인은 이를 성실하게 따르고 있다.
레터 케이스를 다루기로 했다면 디자인 시스템 전반에 적용되는 방식을 일관성 있게 유지해야 한다.
11.폰트 스타일
나는 굵게(bold), 기울임 꼴(italic), 밑줄(underline)처럼 텍스트에 적용되는 스타일에 대해 말하고 싶다.
실용적인 타이포그래피는 굵은 서체와 기울임 꼴 서체를 아래와 같이 설명한다.
1.굵은 서체와 기울임 꼴 서체는 상호 배타적이다.
2.가능한 굵은 서체와 기울임 꼴 서체를 적게 사용하라. 모든 것이 강조된다면, 결국 아무것도 강조되어 보이지 않는다.
3.기울임 꼴 서체에 세리프를 사용하여 부드럽게 강조하고, 강하게 강조하고자 할 때는 굵은 서체를 사용해라.
4.만약 산 세리프 글꼴을 사용하고 있다면, 기울임 꼴 서체를 건너뛰고 강조를 위해 굵은 서체를 사용해라. 대부분의 산 세리프 기울임 꼴 서체는 페이지에서 잘 눈에 띄지 않는 부드러운 굴곡을 가지고 있다.
sans serif 글꼴을 사용하는 경우 기울임 꼴 서체를 건너뛰고 굵은 서체를 사용
산세리프를 사용하면, 강조를 하기 위해 이탤릭을 쓸 필요는 없어질 것.밑줄은 링크를 위해 아껴 두자. 웹이 시작된 이래 밑줄은 링크로 사용되어왔다. 만약 다른 이유로 사용하더라도 사용자는 클릭할 수 있다고 예측할 것이다.
12.REM과 픽셀(Pixel)
이전 글에서 크기와 간격에 대한 REM과 픽셀을 사용의 개념에 대해 언급했는데, 어떤 측정을 사용할지 결정하기 위한 매우 실용적인 조언이 있다.
REM을 사용하는 경우 루트 요소에서 기본 글꼴 크기를 설정해라. 웹에서 이것은 바디 태그에 있다. 다른 모든 글꼴 크기는 이 기본 글꼴 크기의 배수가 된다. 당신의 기본 글꼴 크기는 항상 1rem이다.
예시:
기본 글꼴을 16px로 설정하면 1rem은 16px와 같다.
단위로 표시하면 다음과 같다.
단락 = 1rem(16px)
헤딩 1 = 2.5rem(40px)
헤딩 2 = 2rem(32px)
헤딩 3 = 1.5rem(24px)
줄 높이 = 1.5rem(24px)
13.색상
우리는 마찬가지로 2부에서 색상 선택에 관해 이야기했다. 타이포그래피에서도 색상이 어떻게 적용되는지 고려해야 한다.
1)기본 글꼴 색상(대개 검은색 또는 검은색에 가까운 색)을 선택한 다음 알림 메시지와 같은 특정 활용 사례에 대해 재정의한다.
2)링크에 특정 색상을 적용해라.
3)컴포넌트에 대한 특정 색상 적용 여부를 결정하십시오. 가령, 버튼은 기본 버튼 색상의 색조를 사용할 수 있다.
4)어둡거나 밝은 배경에 있는 텍스트를 고려해라.
Erik D. Kennedy는 UI가 체크아웃할 가치가 있는 훌륭한 접근 가능한 색상 애플리케이션을 만들었는데, 이는 다른 색과 대조되는 텍스트 색상을 선택하는 데 도움을 준다.
14.접근성
접근성은 장애가 있는 사람이 월드 와이드 웹에서 웹 사이트와 상호 작용하거나 접근을 막는 장벽이 없도록 보장하는 포괄적인 관행이다. 사이트가 올바르게 설계, 개발 및 편집되면 일반적으로 모든 사용자는 정보와 기능에 대해 동일한 접근 권한을 가진다. - 위키피디아
그러나 접근성은 웹 이상의 기능에서도 적용되므로 모든 디지털 제품에 걸쳐 중요하며, 따라서 디자인 시스템 전반에서 고려되어야 한다.
이 글의 전반에서는 접근성에 대한 언급으로 가득하다. 이를 요약해보면 타이포그래피와 접근성을 사용할 때 주목해야 할 사항은 다음과 같다.
1)글꼴 크기 - 본문은 16px보다 작아서는 안 된다.
2)글꼴 색상 - 항상 색상 대비를 고려해라.
3)글꼴 무게 - 가령 가벼운 글꼴은 작은 크기에서 읽기 어려울 수 있다.
4)자간 - 큰 텍스트의 간격이 좁고 작은 텍스트의 간격이 넓다면 접근성이 향상될 수 있다.
5)줄 높이 - 시각 장애인은 높이가 100% 또는 250%인 큰 간격이 읽기가 어렵다.
6)레터 케이스 - 본문에 올 캡 텍스트를 사용하지 않는다.
15.결론
여느 디자인 프로젝트와 마찬가지로 가이드라인과 팁이 시작되어야 할 부분이다. 디자인 시스템에서 타이포그래피가 올바르게 사용되도록 UX 및 UI 원칙과 접근성 가이드라인을 준수하여 적합한 활용법을 구축해라.
다음 글은..
우리는 디자인 토큰과 원리, 색 설정, 크기와 간격, 그리고 타이포그래피와 같은 개념을 다루었다. 이 세 가지 요소를 제대로 이해한다면 디자인 시스템을 위한 견고한 기반이 될 것이다. 이 시리즈의 마지막 글에서는 고려해야 할 몇 가지 추가 구성요소를 살펴볼 것이다.
저자 : Shane P Williams
원문 링크:https://uxdesign.cc/building-a-design-system-where-to-start-part-4-typography-5065b8d360c
*무단 전재 및 재배포 금지(링크 공유 가능)
같은 시리즈, 다른 글
디자인 시스템 구축하기 1부 : 준비
https://brunch.co.kr/@thinkaboutlove/288
디자인 시스템 구축하기 2부: 컬러
https://brunch.co.kr/@thinkaboutlove/289
디자인 시스템 구축하기 3부 : 크기와 간격
https://brunch.co.kr/@thinkaboutlove/290
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
