제조업체에 따라 일부 티셔츠는 다른 티셔츠보다 크거나 작게 제작됩니다. 한 회사 의 대형 티셔츠는 다른 회사의 미디엄 티셔츠와 비슷합니다 . 따라서 라벨의 사이즈는 셔츠가 얼마나 편안하게 맞는지 정확한 척도가 아닙니다. 가끔 티셔츠를 입어봐야 알 수 있는데, 타이포그래피도 마찬가지입니다. 인쇄에서 식자공은 Large , Medium 및 Small 과 같은 작은 헤드라인 크기 세트를 정의 하고 자신 있게 팜플렛, 뉴스레터 및 잡지를 구성합니다. 타이포그래피의 크기는 용지의 정적인 테두리에 상대적이기 때문에 T-셔츠 크기 조정이 매우 잘 작동했습니다. 그러나 반응형 디지털 디자인 시대에 우리는 그렇게 운이 좋지 않습니다! 잡지 페이지의 고정 크기와 달리 화면 레이아웃은 브라우저 창의 크기에 따라 동적으로 변경됩니다. 그러나 타이포그래피는 사용자가 원하는 어떤 크기에서도 보기 좋고 읽기 쉬워야 합니다. 티셔츠 사이징 티셔츠 크기 조정은 디자인 시스템에서 여러 타이포그래피 크기를 정의하는 가장 인기 있는 방법입니다. 이와 같은 크기는 대부분의 디자이너와 엔지니어에게 친숙합니다. 제목/XL 헤드라인/L 헤드라인/M 제목/S 헤드라인/XS 5가지 헤드라인 크기는 상상할 수 있는 모든 시나리오에 대한 작업을 처리하기에 충분해 보입니다! 하지만 사실입니까? 어떻게 확실히 알 수 있습니까? 크기는 상대적입니다 타이포그래피를 위한 Large , Medium 및 Small 과 같은 T-셔츠 크기 는 합리적인 분류 방법으로 나타납니다. 그러나 이러한 개념은 컨테이너에 대한 컨텍스트에서만 의미가 있기 때문에 반응형 레이아웃과 관련된 경우 빠르게 분해됩니다. 문제를 이해하려면 Large 의 철학적 의미를 고려하십시오 . '대형'이란? 중국 주하이에 있는 침롱 오션 킹덤 은 세계에서 가장 큰 수족관으로 기네스 세계 기록을 보유하고 있습니다. 다른 수족관과 비교하여 티셔츠 사이즈를 준다면 'L' 앞에 'X'가 많이 필요합니다! 그러나 한 남극 대왕고래에게 창롱 오션 킹덤 수족관은 다른 수족관에 비해 아무리 큰 수족관이라도 정말 작은 환경입니다. 이 비유를 웹용으로 디자인된 타이포그래피에 적용한다고 가정해 보겠습니다. 데스크톱 컴퓨터 모니터의 헤드라인/XL 크기는 예상대로 작동합니다. 대왕 고래처럼 편안하게 헤엄칠 수 있는 진정한 픽셀 바다가 있기 때문입니다. 그러나 휴대폰의 세로 모드에서 headline/XL 을 사용하는 것은 믿을 수 없을 정도로 작은 수족관 안에 대왕 고래를 배치하는 것과 유사합니다. 하지만 괜찮습니다. 티셔츠 사이징을 통해 모든 헤드라인/XL 을 헤드라인/M 또는 휴대전화의 헤드라인/S 로 대체합니다. 완료! 다음 문제 주세요! 그런데 문제가 해결되었나요? 어쩌면 우리가 보고 있지 않은 새로운 문제를 만들었을 수도 있습니다. 시스템 사고 관점에서 우리는 하나의 솔루션이 다른 영역에서 또 다른 문제를 일으키지 않도록 해야 합니다. 모든 진리는 일정한 관점에서 나온다 "당신은 우리가 집착하는 많은 진실이 우리 자신의 관점에 크게 의존한다는 것을 알게 될 것입니다." — 오비완 케노비 티셔츠 타이포그래피 크기 조정은 일반적으로 웹 중심 관점에서 생성됩니다(뷰포트 너비가 1400px 이상이라고 가정). 모바일 디자이너가 웹용으로 설계된 타이포그래피 시스템을 채택할 때 디자이너는 환경에 맞게 모든 헤드라인 을 아래로 옮겨야 합니다. 예를 들어 모바일에서 헤드라인이 Extra Large 로 나타나야 하는 경우 디자이너는 headline/M 을 선택해야 합니다 . 마찬가지로 모바일 디자이너는 headline/S 를 선택 하여 340px 너비의 뷰포트에 Medium 으로 표시되도록 해야 합니다. 이 정신적 재매핑은 직관적이지 않을 뿐만 아니라 일관성이 없고 오류가 발생하기 쉽습니다. 그러나 문제는 여기서 끝나지 않습니다. 뷰포트 너비의 절반, 1/4 또는 심지어 1/8에 이르는 웹 헤드라인을 고려하십시오. Headline/L 또는 Headline/M 은 어느 것 입니까? 일관성이 중요한 경우 이러한 결정을 더 큰 팀에 어떻게 전달합니까? 디자인 시스템 전문가로서 우리의 목표는 직관적이고 일관되며 확장 가능한 이름을 만드는 것입니다. 따라서 티셔츠 사이즈만으로 제공할 수 있는 것보다 더 나은 솔루션을 만들기 위해 노력해야 합니다. 열 크기의 타이포그래피 모든 좋은 디자인 아래에는 전체 제품의 구조를 형성하는 보이지 않는 요소가 있습니다. 우리는 이것을 그리드 시스템이라고 부릅니다. 디자이너들은 시각적으로 만족스러운 효과가 있는 원고, 책, 잡지, 뉴스레터 및 브로셔를 만들기 위해 수백 년 동안 그리드를 사용해 왔습니다. 디지털 응답 세계에서 동일한 작업을 수행하려면 시스템을 보편적이고 실용적으로 사용하기 위해 특정 경계 레이어를 이해해야 합니다. 이것은 현재의 모든 사용 사례와 미래의 모든 가능한 사용 사례를 알고 있음을 의미합니다. 작게 생각하고, 크게 생각하고, 가장자리를 생각하십시오. 작게 생각하기 그리드를 정의하는 방법에는 여러 가지가 있습니다. 차이점에도 불구하고 모든 그리드는 타이포그래피 요소, 특히 본문 카피를 읽을 수 있어야 하는 비교적 일정한 최소 공간을 따릅니다. LIDS 규칙은 디자인의 최소 너비 상수를 찾는 편리한 방법입니다. 들어 본 적이 없다면 괜찮습니다. 이 글을 쓰면서야 깨달았다. 디자인이 허용하는 가장 작은 본문 사본 을 가져와 Lorem ipsum 또는 "Lorem ipsum dolor sit" 의 처음 네 단어 를 한 줄에 입력합니다. 이는 열 쌍에 대한 최소 공간 상수입니다. — LIDS의 규칙. 제품의 가장 작은 본문 사본이 14px Times인 경우 'Lorem ipsum dolor sit'라는 텍스트가 100px 및 120px 너비로 줄바꿈되지만 140px에서는 4개의 단어가 모두 한 줄에 편안하게 맞습니다. 이 상수는 모바일 크기에 따라 유동적이기 때문에 +/- 10px 허용 오차를 제공하는 것이 좋습니다. 열 너비가 140, 120, 100픽셀인 필러 텍스트 'Lorem ipsum dolor sit'의 예 가장 작은 본문 타이포그래피에 대한 일정한 최소 너비를 찾았으므로 해당 공간을 정의하는 열 쌍을 만듭니다. Times, Helvetica 및 Futura 본문 카피와 2열의 헤드라인, 140px 범위의 예. 14px 본문 사본을 사용하는 Times, Helvetica 및 Futura 열 쌍(하나가 아닌 두 개의 열)을 사용하는 것은 이미지가 헤드라인의 왼쪽이나 오른쪽에 배치될 때 일반적인 레이아웃 처리인 세 개의 열에 걸쳐 있는 기능에 필수적입니다. 3열 범위의 본문 복사 예 LIDS 규칙은 헤드 라인에 적용되지만 "Lorem ipsum dolor"만 한 줄에 맞아야 합니다('sit'이 아님). 헤드라인은 본문보다 커야 합니다. 그렇지 않으면 헤드라인처럼 보이지 않습니다. 일정한 최소 너비에 대한 결정은 특정 화면 크기에 맞출 수 있는 열 수에 극적인 영향을 미칠 수 있습니다. 모든 뷰포트를 고려해야 합니다. 그러나 가장 작은 요소에서 가장 큰 요소에 이르기까지 모든 것이 상호 연관되어 있다는 것을 이해하는 것이 도움이 됩니다. 이것은 좋은 디자인에 필수적인 시각적 연속성을 만듭니다. 크게 생각해 이제 우리는 가능한 가장 작은 것을 고려했으므로 스펙트럼의 다른 쪽 끝에서 모든 것을 검사할 수 있습니다. 가장 큰! 5가지 사이즈의 헤드라인(XL, L, M, S, XS)부터 시작하여 합리적으로 나타났다. 그러나 우리는 그러한 정의가 너무 많은지 또는 너무 적은지 그리고 그 차이를 어떻게 알 수 있는지 알지 못했습니다. 140px의 일정한 최소 너비로 1400px 뷰포트 내에 16개의 열이 잘 맞습니다. 열 기반 접근 방식을 사용하여 9개의 헤드라인 크기가 생각할 수 있는 모든 레이아웃을 처리할 수 있으며 이는 우리가 가정한 5개보다 훨씬 큽니다. 16 열 뷰포트 너비 1296px — 976px(플렉스 마진). 9가지 헤드라인 크기. 열 16개, 뷰포트 너비 1296px — 976px(플렉스 마진). 9가지 헤드라인 크기. 9개의 티셔츠를 사용하는 것은 어색하고 혼란스럽습니다. 16col 처리는 headline/XXXL로, 2col headline/XXXS로 명명됩니다. 그러나 열 수와 관련하여 타이포그래피 이름을 지정하는 것이 훨씬 더 직관적입니다. 제목/16열 제목/14열 제목/12열 제목/10열 제목/8열 헤드라인/6열 헤드라인/4열 헤드라인/3열 헤드라인/2열 이 이름 지정 규칙은 정의된 열 수의 컨텍스트 내에서 모든 헤드라인을 '일반'으로 간주하고 모든 레이아웃에 대해 올바른 헤드라인을 쉽게 전달할 수 있습니다. 간단히 말해, 헤드라인의 경계 상자가 X개의 열에 걸쳐 있는 경우 사용하기에 올바른 것입니다! 중단점 중단점은 특정 레이아웃 요구 사항이 있는 미리 결정된 화면 크기의 범위입니다. 열 기반 타이포그래피를 사용하면 단순히 열을 제거하고 콘텐츠를 가장 잘 맞도록 재배치할 수 있습니다. 다음은 12, 10, 8, 6 및 4개 컬럼 처리입니다. 16개의 열을 사용하여 헤드라인에 대해 9개의 다른 크기가 가능하다는 것을 알았지만 이 숫자는 신중한 중단점이 주어진 경우 사용 가능한 열이 줄어들면서 극적으로 줄어듭니다. 12 열 뷰포트 너비 1296px - 976px(160px 여백). 7가지 헤드라인 크기. 열 12개, 뷰포트 너비 1296px — 976px(160px 여백). 7가지 헤드라인 크기. 10 열 뷰포트 너비 976px — 816px(최대 여백 80). 6가지 헤드라인 크기. 10 열. 뷰포트 너비 976px — 816px(최대 여백 80). 6가지 헤드라인 크기. 8 열 뷰포트 너비 816px — 656px(최대 여백 80). 5가지 제목 크기. 8 열. 뷰포트 너비 816px — 656px(최대 여백 80). 5가지 제목 크기. 6 열 뷰포트 너비 656px — 496px(최대 여백 80). 4가지 헤드라인 크기. 6 열. 뷰포트 너비 656px — 496px(최대 여백 80). 4가지 헤드라인 크기. 4열 뷰포트 너비 <496px(최대 여백 18). 세 가지 헤드라인 크기. 4 열. 뷰포트 너비 <496px(최대 여백 18). 세 가지 헤드라인 크기. 4열은 세로 모드에서 휴대전화 크기를 처리하는 데 특화되어 있습니다. 이 시스템은 열 너비를 조정하는 유일한 레이아웃입니다. 따라서 열 쌍을 이루는 상수 최소 너비는 변경되지만 생각만큼 많이 변경되지는 않습니다. 일정한 최소 너비 차이가 상대적으로 가깝기 때문에(320px 너비의 뷰포트에는 132px의 열 쌍이 있는 반면 430px 너비의 열 쌍은 187px이며, 이는 55px의 차이임) 타이포그래피는 (대부분) 예상대로 흐릅니다. 4열 뷰포트 너비 <496px(최대 여백 18). 3가지 헤드라인 크기는 너비가 가장 작은 320픽셀 휴대전화에서도 작동합니다. 가장 작은 전화 열 쌍 너비도 원래 정의된 최소 상수인 140px보다 8px 작으며, 이는 The Rule of LIDS 의 허용 범위 내에 있습니다. 엣지를 생각하다 하나의 간단한 규칙으로 웹 및 모바일용 헤드라인의 범용 크기 집합을 정의했습니다. 항상 경계 상자에 걸쳐 있는 열 수와 일치하는 headline/[X]col 을 사용하면 올바른 크기를 갖게 됩니다! 이 시스템이 실제 디자인 환경에서 작동합니까? headline/4col 과 headline/3col 의 규칙을 엄격하게 해석하여 모바일에서 레이아웃을 살펴보겠습니다 . headline/4col 및 headline/3col 규칙을 엄격하게 해석하는 모바일 레이아웃 이미지. 이것은 6개 이상의 열이 있는 웹 페이지에서 잘 작동하지만 모바일 세로 보기에 대한 우려가 있습니다. 휴대폰에 하나의 세로 행이 있는 경우 headline/4col 이 headline/3col에 비해 너무 두드러져 headline/4col로 설정된 기사 가 더 중요해 보입니다 . 이것은 우리가 원하는 시각적 커뮤니케이션이 아닙니다. 헤드라인 크기를 미세 조정하고 규칙을 단순하게 유지하는 방법이 필요합니다. 이를 수행하는 가장 유연한 방법은 열 기반 타이포그래피에 /regular 및 /small 을 도입하는 것입니다. headline/4col 및 headline/3col의 수정된 규칙이 있고 '일반' 및 '작은' 변형을 도입한 모바일의 레이아웃 이미지. 디자인은 연성 과학이지만 이 처리 방식은 시각적으로 더 만족스럽습니다. 모든 헤드라인의 중요도는 동일합니다. 이 결과를 대규모로 달성하려면 모든 사람이 자신 있게 사용할 수 있도록 간단한 규칙을 도입해야 합니다. 항상 경계 상자에 걸쳐 있는 열의 수와 가장 잘 일치하는 headline/[X]col 을 사용하십시오 . 달리 지정하지 않는 한 항상 /regular 변형을 사용하세요... a) 모바일(4col) 테이블 보기에서 행이 headline/3col/regular 를 사용할 수 있는 경우 모든 headline/4col 은 headline/4col/small 변형을 사용하여 동일한 시각적 가중치로 표시됩니다. 나쁘지 않다! 모바일에서 고려해야 할 세 가지 규칙과 한 가지 예외만 있습니다. 이것은 간단하고 이해하기 쉽습니다! 디자인 시스템에 게임 디자인 논리 적용 , 게임 을 만들 때처럼 디자인 시스템을 구성하는 것의 중요성에 대해 설명합니다. 이를 고려하는 또 다른 방법은 두 개의 손잡이가 있는 다이얼을 상상하는 것입니다. 외부 다이얼은 큰 조정( 2col , 3col , 4col 등)용이고 내부 다이얼은 미세 조정( normal , small , large )용입니다. 큰 다이얼과 작은 다이얼, 미세한 조정을 위한 작은 다이얼 또는 변형의 개념을 보여주는 이미지. 미세 조정 변형은 거의 사용되지 않으며 대부분의 경우 보통 으로 기본 설정 되지만 모바일 세로 보기의 경우 Small 을 추가하고 사용을 정의하는 것이 추가 정의(IMHO)의 가치가 있습니다. 마찬가지로 Large 를 추가 하면 디자이너가 첫 페이지의 주요 기사와 같이 더 중요한 내용 을 전달할 수 있습니다. 이 변형은 즉시 필요한 것은 아니지만 필요가 있고 쉽게 추가할 수 있는지 아는 것이 좋습니다. 그것이 바로 우리가 추구하는 유연성입니다. headline/3col/regular 와 headline/4col/small 은 동일 하기 때문에 일부는 중복되는 것을 우려할 수 있습니다. 그들은 타이포그래피를 가능한 최소한의 선택으로 최적화하기 위해 규칙을 변경하는 것을 고려할 수 있으며 유혹적입니다! 그러나 아무리 매력적이더라도 최적화하려는 충동에 저항하십시오. 물론 지금은 아닙니다. 조기 최적화 Donald Knuth는 프로세스 초기에 효율성을 창출하려는 프로그래머가 '모든 악의 근원'이라고 믿었습니다. “진짜 문제는 프로그래머가 잘못된 장소와 잘못된 시간에 효율성을 걱정하는 데 너무 많은 시간을 소비한다는 것입니다. 시기상조의 최적화는 모든 악의 근원입니다..." Donald Knuth, The Art of Computer Programming 직관적이지 않게 비효율성을 수용하면 유연성이 생깁니다. 예를 들어 코드에서 직접 디자인을 만드는 것은 매우 효율적입니다. 그러나 모든 것을 처음부터 다시 코딩하도록 요구하는 간단한 변경만 있으면 됩니다(모든 악의 근원). Figma와 같은 디자인 도구는 본질적으로 비효율적이지만(먼저 디자인한 다음 코드 작성), 그 가치는 무한히 유연하다는 것입니다. 디자인이 승인되면 프로그래머는 한 번만 코딩하면 됩니다. 이 시점에서 타이포그래피를 최적화하는 것은 유동인구가 어떻게 자연스럽게 흐르는지 연구하지 않고 콘크리트 경로를 붓는 것과 같습니다. 우리는 디자인 시스템을 훨씬 덜 체계적으로 만드는 욕구 경로 가 나타나는 것을 보고 놀라지 말아야 합니다 . 디자인 시스템의 관점 에서 시스템이 이미 포장되었을 때 미디엄 과 라지 크기의 티셔츠 사이에 '한 사이즈만 더'가 필요한 것보다 더 무서운 것은 거의 없습니다 . 요약 우리는 많은 근거를 다루었습니다! 디자인 시스템 전문가들이 열 기반 타이포그래피를 통해 이름을 쉽게 지정할 수 있기를 바랍니다. 명심해야 할 몇 가지 사항이 있습니다. 티셔츠 크기 조정은 디자인이 정적인 경계에 상대적일 때 타이포그래피에 적합하지만 반응형 웹 디자인은 정의를 훨씬 더 어렵게 만듭니다. Large , Medium 및 Small 과 같은 개념 은 개체의 컨테이너 컨텍스트에서만 의미가 있습니다. LIDS의 규칙은 두 열의 너비를 나타내는 디자인의 최소 너비 상수를 찾는 방법입니다. 확장 가능한 열(컨테이너)의 수로 타이포그래피 이름을 지정하는 것이 더 직관적이고 확장 가능한 솔루션입니다. 제목/2col/, 제목/3col/, 제목/4col/, 제목/6col/ 등 모든 열 기반 타이포그래피 에 /normal, /small, /large 와 같은 변형을 추가하면 T-셔츠 크기 조정만으로 제공할 수 있는 것보다 더 많은 유연성을 얻을 수 있습니다. 비효율성을 수용하여 유연성을 확보하십시오. 모든 각도에서 전체 그림을 볼 때까지 타이포그래피를 최적화하지 말고 초과분을 잘라냅니다! 열 기반 타이포그래피는 Headlines , Subheadlines , Body , Ledes , Pull-Quotes 등과 같은 타이포그래피 분류에 유용 합니다. 가로로 경계가 지정되고 세로로 감싸는 모든 타이포그래피는 이 명명 규칙의 이점을 누릴 수 있습니다. 에지 케이스 모든 타이포그래피 카테고리가 헤드라인 처럼 최대 16열 처리를 정의하는 것은 아니라는 점에 유의해야 합니다 . 예를 들어, Body 는 최대 2개 또는 3개의 정의만 필요하며, 항상 사용 가능한 가장 가까운 열 번호를 사용하되 더 높은 열 번호는 사용하지 않는다는 규칙으로 2col 및 6col 을 위반할 가능성이 높습니다 . 또한 본문 을 헤드라인 에서 했던 것처럼 /normal , /small , /large 변형으로 나누는 것은 거의 도움이 되지 않습니다! 해당 카테고리의 고유한 처리를 다루는 /default, /bold , /italic, /bold_italic 의 개념을 고려하십시오 . 이전 규칙을 사용하여 body/2col/italic 은 2col , 3col , 4col 또는 5col 에서 사용할 수 있지만 6col 이상 에서는 body/ 6col /italic 으로 전환됩니다 . 그러나 동일한 레이아웃에 두 가지 크기의 Body 가 필요한 경우 정의는 다음과 같을 것입니다. body/2col/normal/ [기본값, 굵게, 기울임꼴, 굵게 기울임꼴] body/2col/large/ [디폴트, 굵게, 기울임꼴, 굵게 기울임꼴] body/6col/normal/ [디폴트, 굵게, 기울임꼴, 굵게_기울임꼴] body/6col/large/ [디폴트, 굵게, 기울임꼴, 굵게_기울임꼴] 많아 보일 수 있지만 글꼴은 여기서 정의한 것보다 훨씬 더 많은 가중치를 제공합니다. 열 기반 타이포그래피를 사용하여 변화에 적응할 수 있는 훨씬 더 풍부한 환경을 만듭니다. 추가 고려 사항 일부 타이포그래피 분류는 열 기반 정의와 잘 작동하지 않습니다. 제목 , 부제 및 레이블 을 고려하십시오 . 헤드라인 과 달리 이러한 처리는 수직 제약 조건으로 제한됩니다. 즉, 단일 행에 포함되도록 설계되었기 때문에 고유합니다. 탭 표시줄의 아이콘 아래 또는 내비게이션 표시줄 내의 버튼과 제목 아래에 있는 레이블 을 고려하십시오 . 이상적으로는 모든 것이 한 줄에 있고 세로로 줄 바꿈되지 않습니다. 이러한 경우에는 글꼴 크기가 동일하더라도 본문 을 사용하지 않아야 합니다. 드문 경우지만 줄 바꿈이 필요한 경우 행간이 훨씬 작아야 하기 때문입니다. 대체로 세로로 제한된 모든 타이포그래피는 T-셔츠 크기 조정이 더 적합한 시스템 글꼴로 간주됩니다. 브랜드 글꼴은 Headlines , Subheadlines , Body , Ledes 및 Pull-Quotes 와 같이 가로로 제한된 타이포그래피이며 차지하는 열에 의해 가장 잘 정의됩니다.