8 포인트 그리드 : 웹상의 타이포그래피

웹 타이포그래피가 혼란 스럽다. 모범 사례를 알고 있습니까?

웹 타이포그래피의 모범 사례를 파악하기 위해 인기있는 웹 사이트를 둘러보기 시작했을 때 당황한 것임을 인정해야합니다. 다음은 유명한 웹 사이트 및 디자인 시스템에서 가져온 타이포그래피 스케일의 예입니다. 당신은 통일 패턴을 찾을 수 있습니까?

표준 규모에 맞게 단순화 된 샘플

타입 시스템에 대한 다른 접근법이 분명히 있습니다. 현실은 웹 커뮤니티로서 우리 모두가 동의하지는 않는다는 것입니다. 그러나 대부분의 디자인 문제와 마찬가지로 실제로 사용자의 요구를 해결하는 것으로 시작합니다.

타이포그래피 시스템의 세 가지 원형

다음은 세 가지 일반적인 타이포그래피 시스템 아키 타입입니다. 대부분의 회사는 어느 시점에서이 세 가지를 모두 활용하지만 각 오리엔테이션에서 해결해야하는 기본 사용자 요구를 인식하는 것이 중요합니다.

마케팅 사이트

  • 목적 : 특정 이야기를하고 방문자가 사이트에서 시간 및 / 또는 돈을 쓰도록 고무시킵니다.
  • 요구 사항 : 각 서체에는 고유 한 스타일 세트가 필요하며 다양한 크기는 요소 맞춤 이상의 예술 방향을 기반으로합니다.
  • 반응 형 사용 사례 : 시스템은 모바일에서 데스크톱까지 다양한 크기로 유연하게 조정해야합니다.

웹 범주는이 범주에서 무엇인가를 제시하도록 고안되었습니다. 야심 찬 사람들은 활판 인쇄 규칙을 모두 위반하여 매력적이고 매혹적인 경험을 만듭니다.

이러한 사이트에 대한 많은 생각이 있지만, 미래에 구축 할 수있는 확장 가능한 시스템이 아니라 스플래시를 만드는 데 중점을 둡니다. 이 사이트는 일반적으로 유통 기한이 짧으며 위에서 아래로 다시 디자인하기 위해 완전히 폐기됩니다.

이에 대한 고급 예는 Invision의 랜딩 페이지에서 Leigh Taylor와 Nick Jones가 사용하는 보간 기능입니다.

은 다음과 같은 글꼴 크기를 갖습니다 : calc (32px + ((24 * (100vw — 800px)) / 799)) ;. 페이지의 타이포그래피는 모든 화면 크기에서 작동하도록 세 심하게 계산됩니다.

“수학을 사용하여 다이나믹 한 아트 디렉션 수행”— Leigh Taylor

블로그 / 정보 사이트

  • 목적 : 많은 양의 텍스트 기반 정보를 전달합니다.
  • 요구 사항 :이 주요 기사와 마찬가지로 주 독서 영역에서는 비율 기반의 선 높이 시스템을 활용할 수 있습니다.
  • 반응 형 사용 사례 : 반응 형이지만 가독성에 초점을 유지합니다.

이 매체 기사는 긴 형식의 읽기를 위해 제작 된 웹 경험의 예입니다.

초점은 작은 시각화를 해석하거나 양식을 작성하는 것이 아닙니다. 그들이 선택한 크기 비율은 원하는 선 길이를 얻기 위해 제한되는 가독성을 위해 특별히 만들어졌습니다. 타이포그래피는 독자의 요구에 맞게 신중하게 제작되었으므로 각 줄을 편안하게 읽을 수 있습니다.

생성물

  • 목적 : 세금 신고, git repo 관리 또는 성능 지표 시각화와 같은 사용자 문제를 해결하기 위해 제작되었습니다.
  • 요구 사항 : 텍스트는 요소 계층 구조에 잘 맞아야합니다. 텍스트는 주로 레이블, 지침 및 표시된 데이터에 사용됩니다.
  • 반응 형 사용 사례 : 최소 반응 형. 고도로 개발 된 제품은 모바일과 데스크탑에 대한 서로 다른 경험을 의미하는 적응 형 디자인을 활용합니다. 사용자 경험을 지원하는 요소의 계층 구조에 중점을 둡니다.

Google의 머티리얼 디자인은 많은 제품 사용 사례에 적용 할 수있는 대중적인 디자인 언어입니다.

머티리얼의 간격 방법은 8pt 컴포넌트 그리드 시스템과 타이포그래피를위한 4pt베이스 라인 그리드를 기반으로합니다. 사용 가능한 행 높이가 일부 텍스트 크기에 비해 너무 멀기 때문에 기준선 그리드에서 8 씩 증분하는 것은 어려울 수 있습니다.

서체 크기 중 일부에보다 적절한 줄 높이가 수반되는 것은 큰 발전입니다. 주어진 줄 위나 아래의 간격을 4px 씩 늘려서 더 큰 원자 격자에 맞출 수 있습니다.

적용 할 때,베이스 라인 그리드 시스템은 요소 공간 시스템 (8pt 그리드)을 타이포그래피 시스템과 정렬하여 디자인에 매력적인 수직 리듬을 만들 수 있습니다.

실제로 웹 타이포그래피 구현

긴 형식의 읽기 영역이있는 8pt 그리드에 고착되고 구조화 된 UI를 가질 수 있습니다.

고정 기준선 그리드 시스템이 구조화 된 구성 요소 내부의 텍스트를 처리하고 모듈 식 스케일을 사용하여 사이트에 추가 한 블로그 나 문서에 대한 최적의 읽기 환경을 만듭니다.

대부분의 디지털 제품 회사는 이미 마케팅 랜딩 페이지, 디지털 제품 및 설명서 사이에서이 작업을 수행합니다. 이러한 인쇄 영역을 개별적으로 구성하기로 결정하면 지속 불가능한 복잡성이 사라질 수 있습니다.

컨텐츠 유형을 함께 혼합

함정 — Ems, rems 및 pixel oh my!

명확하고 일관된 시스템을 표현하려면 제품 팀이 타이포그래피 측정을 쉽게 해석해야합니다.

렘과 엠과 같은 상대적인 단위는 때때로 오해되며, 내 경험상, 이것은 지속 불가능한 타이포그래피 시스템을 초래합니다. 예를 들어, 글꼴 크기가 증가함에 따라 비율이 변경되므로 14px 글꼴 크기와 20px 선 높이 사이의 비율은 상대 단위로 캡처해서는 안됩니다.

대부분의 사람들이 머리에서 그런 종류의 수학을 할 수 없기 때문에 1.4285714286em의 선 높이를 정의하는 것은 어리 석습니다. 글꼴 크기가 16px로 증가하면 브라우저는 22.857142px의 행 높이를 렌더링하며 이러한 종류의 픽셀 분할은 두통이 발생하기를 기다리는 것입니다. 이것은 혼란을 야기하고 상대 단위의 오용입니다. 여기에서 절대 대 상대 단위의 전체 목록을 참조하십시오.

오늘날 상대적 크기를 기반으로하는 디자인 시스템이 왜 그렇게 많은가? 답은 "접근성"입니다.

그러나 명령 +로 확대하면 브라우저가 기본 글꼴 크기를 조정하지 않습니다. 필요한 사용자를 위해 기본 글꼴 크기를 조정하는 접근성 도구가 있습니다. 사용자가 원하는 환경이되도록 올바르게 테스트하는 것이 좋습니다. 체크 박스 접근성은 도움이되는 것보다 더 많은 것을 해칠 수 있습니다.

귀하의 사이트 / 앱에서 렘과 엠을 활용하는 것은 놀랍도록 강력합니다. 매우 흥미로운 사용 사례가 많이 있으며 툴킷의 중요한 부분이어야합니다.

내 제안은 당신이 그들을 위해 단단히 사용할 때까지 그들을 아껴서 사용하는 것입니다. 이를 타이포그래피 시스템의 핵심으로 구우면 혼란스럽고 예기치 않은 사용자 경험이 생길 수 있습니다.

8pt 그리드 타이포그래피

8pt 그리드 개념의 가장 강력한 부분은 디자인 전체에서 일관성을 유지하는 능력입니다. 사용자의 요구와 이러한 요구를 충족시키기 위해 타이포그래피를 확장하는 가장 좋은 방법을 평가해야합니다.

저는 회사와 제품에 대한 이러한 표준을 마무리하기 위해 디자인과 엔지니어링을 협력 할 것을 적극 권장합니다.

다음은 Google Material, Pivotal, Atlassian, Intuit와 같이 잘 알려진 이름의 샘플입니다.

표준 규모에 맞게 단순화 된 샘플

참고 문헌 및 관련 독서

  • Priyanka Godbole : 더 빠른 디자인 개발 핸드 오프를위한 예측 가능하고 조화로운 간격 시스템을 만들기위한 프레임 워크
  • Richard Rutter : 웹에 적용되는 인쇄 스타일의 요소
  • 이안 예이츠 : 모듈 식 타이포그래피 스케일을 구축하는 방법
  • Nathan Curtis : 디자인 시스템의 공간
  • Vincent De Oliveira : 심층 다이브 CSS : 글꼴 메트릭, 높이 및 수직 정렬
  • Kezz Bracey : Rem 기반 레이아웃을 사용해야하는 이유

이전 8 포인트 그리드 기사 :

  1. 8 포인트 그리드 시스템 소개
  2. 8 점 그리드 : 테두리 및 레이아웃
  3. 8 점 그리드 : 수직 리듬

질문 :

이것은 여전히 ​​탐색중인 것입니다. 공유 할만한 모범이 있습니까? 8pt 타이포그래피 시스템에 대한 다른 접근 방식이 있습니까?

의견이 있으시면 의견을 남기거나 Twitter에 문의하십시오.