[디자인] 8-Point Grid : 수직 리듬 - 3 (Vertical Rhythm)

8pt grid는 일관되고 시각적으로 매력적인 사용자 인터페이스 (UI)를 만들기위한 강력한 시스템입니다. 이 게시물은 수직 리듬을 설정하고 8pt 그리드 시스템에서 타이포그라피를 설정하는 방법에 관한 것입니다.
이 글에 대한 더 많은 이해를 하려면 The Intro to 8-Point Grid Systems 과 8-Point Grid: Borders and Layouts을 확인하세요.

수직 리듬(vertical rhythm) 은 무엇이며 왜 그렇게 중요한가?

리듬은 디자인의 요소가 반복 가능한 패턴으로 구성 될 때 이루어집니다. 이를 통해 최종 디자인을 의식적이고 전문적이며 일관성있게 만들 수 있습니다.
presentation
디자인에 반복되는 간격을 적용하면 친숙하고 예측 가능한 환경을 만들 수 있습니다. 수직 리듬이 왜 중요한지에 대한 Zell Liew의 why vertical rhythm is so important 기사는 이것을 잘 설명합니다.

"반복은 친숙 함을 낳습니다. 그것은 마치 그들이 함께 속한 것처럼 느끼게하는 능력이 있습니다. 그것은 계획의 일부인 것처럼 모든 것을 생각한 느낌을줍니다. "
Zell Liew

베이스 라인 그리드(baseline grid)가 무엇입니까?

수직 리듬을 만드는것과 관련하여 베이스 라인 그리드라는 용어를 자주 듣게됩니다. Baseline grid를 사용하면 디자인에서 유형과 다른 객체 사이의 수직 거리를 추적 할 수 있으며 일관된 수직 리듬을 얻기 위해 하나를 사용하는 것이 좋습니다. 그러나 네이티브 모바일 경험과 웹 브라우저는 약간 다른 방식으로 타이포그래피를 측정합니다. 디자이너와 개발자는 디자인 도구와 플랫폼에 따라 다소 혼란을 겪을 수 있습니다.

Baseline으로 어떻게 측정합니까?

Baseline은 문자가 있는 곳입니다. 이것은 인쇄 디자인의 공통된 용어이며 많은 클래식 디자인 프로그램들이 모두 이에 맞게 조정되었습니다. 기본 응용 프로그램 경험은 일반적으로 Baseline을 기반으로합니다.
presentation
텍스트 본문에서 Baseline에서 Baseline까지의 공간 측정을 leading이라고합니다. 많은 디자인 프로그램에서 이를 타이포그래피 (Photoshop, Illustrator, InDesign)의 설정으로 사용합니다.

Line-height를 어떻게 측정합니까?

Line-height는 웹이나 Sketch 나 Figma와 같은 디자인 프로그램에서 텍스트 설정박수 안에 위치해 있습니다. CSS에서는 line-height 속성에 픽셀 크기, 비율 또는 백분율을 지정할 수 있습니다.
presentation
위의 예를보면, 오른쪽 단락의 font-size는 16px이고 line-height 값은 CSS에서 24px, 1.5 또는 150 %로 작성 될 수 있습니다.

타이포그래피를 두가지 다른 방식으로 측정할 수 있다면 나는 어떤 방법을사용해야 할까?

우리는 네이티브 및 웹 환경이 타이포그래피를 다르게 측정 할 것이라는 것을 확인했으며, 어떤 사람들은 어느 방향이 올바른지에 대한 의견을 가질 것입니다. 둘 다 자체적인 이유로 가능합니다. 여기에서 세 가지 접근법이 있습니다.

Baseline까지 모든 것을 측정하십시오.

기본 앱에 이미 이 기능이 있습니다. 그러나 Baseline에서 측정 할 웹 브라우저를 얻는 것은 까다로울 것입니다. Baseline을 기준으로 디자인 한 다음 매우 구체적인 간격을 사용하여 내용을 일치시켜야합니다. 이것은 유지하기가 어려울 것이며 많은 표면적을 가진 대형 디자인 시스템에는 권장하지 않을 것입니다. 이 접근법에 대해 더 자세히 읽고 싶다면 Smashing Magazine에 훌륭한 기사가 있습니다.

모든 것을 line height로 측정하십시오.

이것은 웹 브라우저의 자연 상태입니다. 네이티브 앱은 이 방법으로도 측정 할 수 있습니다. 일부는 너무 정확하지 않다고 주장하지만, 네이티브 제작의 전체 요점은 고품질의 경험을 제공하는 것입니다.

웹과 네이티브 환경이 그들의 일을하도록 허용하십시오.

플랫폼마다 다른 유형의 측정이 필요할 것이라는 사실을 신중하게 고려하십시오. 집중하세요! 픽셀 차이를 면밀히 조사하는 대신 지속 가능한 일관성을 달성하기 위해 집중하십시오.
presentation

접근 방식 선택하기

이는 귀하의 제약 사항 및 목표에 따라 회사 및 / 또는 제품을 위해 결정해야 할 결정입니다. 웹 경험의 규모 대 기본 경험의 규모, 기고자의 수 및 팀의 핵심 역량을이 결정에 포함시켜야합니다. 팀 규모가 클수록 특정 컨텍스트를 전달하고 규칙을 따르는 것이 어렵습니다.

팀이 내린 결정의 수를 당신은 어떻게 줄일 수 있습니까?

타이포그래피 측정에 대해 생각하는 일관된 시스템은 아무 것도없는 것보다 항상 낫다는 것을 명심하십시오. 언제나 시스템을 반복 할 수 있지만 일회성 결정을 내리는 데는 많은 비용이 듭니다.

"일관된 수직 리듬을 달성하는 것이 디자인의 가장 중요한 부분입니다"- Joel Beukelman

수직 리듬(Vertical Rhythm) 만들기

8pt 그리드를 사용하여 요소의 Height를 일정한 패턴으로 배치하면 수직 리듬을 만들기 시작할 수 있습니다. 앤서니 콜루라 피시 (Anthony Collurafici)의 about 8-point soft grids에 대한 원래 게시물은 Sketch에서 콘텐츠 블록을 배치하는 시스템을 설명하는 데 실제로 도움이됩니다. 그는 또한 Google Material Metrics & Keylines docs에는 훌륭한 시각적인 예가 있습니다.
presentation
Material Metrics & Keylines 의 이미지
내가 8pt 그리드와 관련된 한 가지 일반적인 질문은 Sketch 나 Illustrator에서 그리드를 설정하는 방법입니다. 사실, UI 요소를 배치 할 때 일반적으로 이러한 기능을 사용하지 않습니다. 나는 일반적으로 소프트 그리드 레이아웃 팬이며 코드를 진실의 근원으로 존중합니다. 레이아웃에서 기준선을 쉽게 찾을 수 있도록 파일에서 간격 띄우기 요소를 사용하지만 일반적으로 요소를 요소로 측정합니다. 나는 8pt 그리드를 엄격한 그리드가 아닌 상대적 공간 시스템으로 사용합니다.

읽을거리 추천 :

이것들은 몇 가지 어려운 질문에 답하는 데 도움이되는 기사와 자료들입니다.

Zell Liew’s Why is Vertical Rhythm an Important Typography Practice?
Zell Liew의 세로 리듬이 중요한 타이포그래피 연습 인 이유는 무엇입니까?
Wilson Miner’s Setting Type on the Web to a Baseline Grid
윌슨 마이너 (Wilson Miner)가 웹에서베이스 라인 그리드로 설정하는 유형
Priyanka Godbole’s A framework for creating a predictable & harmonious spacing system for faster design-dev handoff
Priyanka Godbole 's 빠른 설계 - 개발 핸드 오프를위한 예측 가능하고 조화로운 간격 시스템을 만들기위한 프레임 워크
Anthony Collurafici’s Sketch Workflow — 8-point Soft Grids
Anthony Collurafici의 스케치 워크 플로우 - 8 포인트 소프트 그리드
Google’s Material Design Guidelines about Metrics & Keylines
통계 및 키린에 대한 Google의 재료 디자인 가이드 라인
Vincent De Oliveira’s Deep dive CSS: font metrics, line-height and vertical-align
Vincent De Oliveira의 심층적 인 CSS : 글꼴 메트릭, 선 높이 및 세로 맞춤
Leigh Taylor — The Grid: Website post has a PSD you can download for examples
Leigh Taylor - The Grid : 웹 사이트 게시물에는 예제 용으로 다운로드 할 수있는 PSD가 있습니다.


원본글 링크입니다.