[REASIGN](UI/UX)웹 타이포그래피 가이드

웹 타이포그래피는 복잡하다. 

웹 타이포그래피의 좋은 사례를 찾기위해 인기있는 웹 사이트를 둘러보면서 정말 당황스러웠다. 아래는 몇몇 인기 있는 웹사이트와 디자인 시스템에서 가져온 타이포그래피 크기에 대한 예시다. 규칙적인 패턴이 보이는가?

1) 마케팅 사이트

• 목적 : 구체적인 이야기를 하고, 방문객들이 사이트에서 시간과 돈을 쓰도록 유도한다.

• 요건 : 각 서체는 스타일 세트가 필요하고, 다양한 크기는 요소에 맞게하기보다 예술 방향을 기반에 둔다.

• 반응형 대응 사례 : 이 시스템은 모바일부터 컴퓨터까지 다양한 크기로 유연하게 확장해야 한다.

웹 경험은 당신에게 뭔가를 던지기위해 훈련되었다. 야심에 찬 사람들은 매력적이고 매혹적인 경험을 위해 타이포그래피의 모든 규칙을 깬다.

많은 생각과 고민들이 이 사이트에 들어가긴 하지만, 초점은 미래에 구축 될 확장 가능한 시스템이 아니라 관심을 끄는 것이다. 이런 사이트들은 일반적으로 수명이 짧고, 상단부터 하단까지 재설계하기 위해 전부 폐기된다.

이것에 대한 사례는 Invision 랜딩 페이지에서 LeighTaylor와 Nickjones가 사용하는 보간함수(Interpolation function) 이다.

<h1>은 font-size: calc(32px+((24*(10ww-800ppx))/799));

페이지의 타이포그래피는 모든 스크린 크기에서 작동할 수 있도록 세심하게 계산된다.

“수학을 이용해 역동적인 아트 디렉션을 만들어라” - Leigh Taylor
 

2) 블로그, 정보 사이트

• 목적 : 많은 양의 텍스트 기반 정보 전달

• 요건 : 주요 읽는 구간은 본 미디엄 아티클처럼 비율 기반 라인 높이 시스템을 활용 할 수 있다.

• 반응형 대응 사례 : 반응성은 높지만, 가독성에 초점을 맞출 것이다.

본 글은 장문을 읽기위해 만들어진 웹 경험의 예시다.

주목해야할 것은 작은 시각화를 해석하거나 형태를 채우는 것이 아니다.  여기서 선택한 사이즈 비율은 특히 가독성(이상적인 줄 길이)에 초점을 맞췄다. 타이포그래피가 독자인 내 니즈에 맞게 세심하게 만들어졌기 때문에 각 라인을 편하게 읽을 수 있다.

3) 상품

• 목적 : 세금신고, 깃(git) 리포트 관리, 성능 측정 지표 시각화 같은 문제를 해결하기 위해

• 요건 : 텍스트는 요소 계층 구조에 맞아야한다. 주로 라벨, 지시, 표시된 데이터에 활용된다.

• 반응형 대응 사례 : 최소한의 반응. 고도로 개발 된 제품은 반응형 디자인을 활용해 모바일과 데스크탑에 서로 다른 경험을 제공할 것이다. 사용자 경험을 지원하는 요소 계층에 중점을 둔다.

구글 머터리얼 가이드는 많은 제품에 적용될 수 있는 인기있는 디자인 언어다.
 

머터리얼 간격 방법론 은 8pt 요소 그리드 시스템과 4pt 타이포그래피 기준선을 바탕으로한다. 텍스트의 크기에 따라 사용할 수 있는 라인 높이가 너무 떨어져 있으면 그리드를 사용해서 8배율로 조정하는게 어려울 수 있다.

폰트 사이즈를 적절한 라인 높이로 조절하는 것이 가장 좋은 방법이다. 주어진 선 위나 아래 간격을 4x만큼 늘려서 더 큰 원자 그리드에 정렬 할 수 있다. 적용했을 때, 기준 그리드 시스템은 요소의 공간 시스템 (8pt 그리드)을 타이포그래피에 정렬해서 강렬한 수직 리듬을 만들 수 있다.

길게 읽을 영역이 있는 8pt 그리드를 지키는 독립적이고 체계적인 UI를 가질 수 있다.  고정 기준선 그리드 시스템이 구조화된 요소 내부의 텍스트를 처리하고 모듈식 크기를 사용해서 당신의 사이트에 추가한 블로그나 문서에 최적화된 읽을 환경을 만들 수 있다. 대부분의 디지털 제품 회사는 이미 마케팅 방문 페이지, 디지털 제품 및 관련 문서에서 사용하고 있다. 타이포그래피 영역을 개별적으로 구조화하기로 하면, 지속할수없는 복잡함에서부터 벗어날 수 있다.

명확하고 일관된 시스템을 표현하기위해 타이포그래피 측정은 그걸 만드는 제품 팀이 쉽게 해석할 수 있어야 한다.
Rem과 em같은 상대적인 단위가 가끔 오해를 받고, 내 경험상 이건 지속불가능한 타이포그래피 시스템으로 이어진다. 예를 들면 14px의 폰트크기와 20px의 줄 높이 사이의 비율은 글씨가 커질수록 비율이 달라지므로 상대 단위로 캡처하면 안 된다.

1.4285714286em의 선 높이를 정의하는 건 어리석은 일이다. 대부분 사람들은 머리속으로 그런 숫자를 생각 할 수 없기 때문이다. 만약 폰트크기가 16px씩 증가한다면, 브라우저는 라인 높이를 22.857142px로 만드는데, 이런 픽셀 분할은 두통을 만든다. 이렇게 되면 혼동이 발생하고, 단위가 잘못 사용된다. 절대값 vs 상대값의 전체 리스트는 여기를 참고하시라.
 

왜 그렇게 많은 설계 시스템이 상대적인 크기에 기반을 두고있을까? 정답은 "접근성"이다.

하지만 브라우저는 command +로 확대할 때 기본 글자 크기는 조절하지 않는다. 필요한 사용자를 위해 기본 글자 크기를 조절하는 도구가 있다. 사용자가 원하는것인지 확인하기 위해 제대로 테스트해보길 권한다. 체크박스 접근성은 도움이 되기보다 많은 것을 해칠 수 있다.

사이트/앱에서 rems과 ems을 사용하는 것은 놀라울 정도로 강력하다. 흥미로운 사례들이 많이 있고, 이것은 툴킷에서 중요한 부분이 될 것이다.

그것들을 확실하게 사용할 수 있을때까지 조금씩 사용해볼 것을 추천한다. 원치않는 유저 경험 혹은 혼란을 가져올 수도 있기 때문에 훈련되기 전까지는 함부로 사용하지 않는 것이 좋다.

4. 8pt 그리드 타이포그래피 

8pt 그리드 개념의 가장 강력한 부분은 디자인하는데 일관성을 유지할 수 있는 능력이다. 사용자의 니즈를 평가하고, 충족시키기위해 당신의 타이포그래피를 확장하는 최고의 방법을 찾아야한다.

나는 디자인과 엔지니어링 팀이 회사와 제품을 위해 이런 기준을 완성하는데 협력하기를 적극 권장한다.
 

• Priyanka Godbole: A framework for creating a predictable & harmonious spacing system for faster design-dev handoff
• Richard Rutter: The Elements of Typographic Style Applied to the Web
• Ian Yates: How to Establish a Modular Typographic Scale
• Nathan Curtis: Space in Design Systems
• Vincent De Oliveira: Deep dive CSS: font metrics, line-height and vertical-align
• Kezz Bracey: Why You Should Be Using Rem-Based Layouts

1. Intro to The 8-Point Grid System
2. 8-Point Grid: Borders and Layouts
3. 8-Point Grid: Vertical Rhythm