이 게시물에서는 반응형 웹 사이트에 사용할 글꼴 크기를 다룹니다. 먼저 모바일 가이드 라인과 데스크톱 가이드 라인을 다룹니다. 

https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html 

모바일 웹 타이포그래피 지침 

모바일 사이트의 글꼴 크기를 선택하는 것은 정확한 과학이 아닙니다. 대신, 본인의 설계 과정에서 도움이 되는 몇 가지 지침 (이론적 근거)을 제공합니다.

1. 본문 글꼴은 약 16 픽셀이어야 합니다. 

동일한 글꼴 크기에서도 다른 글꼴을 쉽게 읽을 수 있음을 이해하면 기본 모바일 글꼴 크기를 선택할 때 16px를 시작하는 것이 좋습니다. 

"기본"또는 "기본"은 대부분의 단락, 레이블, 메뉴 및 목록이 설정되는 크기를 의미합니다. (글꼴을 이미 선택했다고 가정 해 보겠습니다.)

궁극적으로 휴대 전화의 본문 (자연 거리에서 개최)을 잘 인쇄 된 책의 텍스트 (일반적으로 약간 더 먼 거리에서 개최)처럼 읽을 수 있기를 원합니다.

도착하는 한 가지 과정 :

1. 16px로 시작
2. (A) 상호 작용이 많은 페이지가 있거나 (B) 특히 크고 읽기 쉬운 문자가 있는 글꼴 (위의 이미지에서 Proxima Nova와 같은)이 있는 경우 더 작아야 합니다.
3. 반면에 16px보다 큰 크기로 탐색하면 훨씬 자유로울 수 있지만 특히 (A) 텍스트가 많은 페이지가 있거나 (B) 특정 크기에서 읽기가 어려운 글꼴 (예 : 위의 Futura)

페이지에서 사용하기에 가장 좋은 기본 글꼴 크기에 대한 주관성이 있지만 다음 규칙은 더 어렵고 빠릅니다.

2. 텍스트 입력 크기는 16px 이상이어야 합니다 

이것은 중요합니다. 휴대 기기에서 볼 수 있는 웹 사이트 또는 앱을 디자인하는 경우 엄격한 규칙만 있습니다. 텍스트 입력 글꼴 크기는 16px 이상이어야 합니다.

텍스트 입력의 글꼴 크기가 그보다 작은 경우 iOS 브라우저는 텍스트 입력의 왼쪽을 확대하여 종종 오른쪽을 가리고 텍스트 상자를 사용한 후 사용자가 수동으로 축소하도록 합니다.

대대적인 Ste Grainer 애니메이션. 자동 확대 현상에 대한 그의 기사를 여기에서 읽을 수 있습니다.

이것은 본문 글꼴 크기를 16px 이상으로 만드는 강력한 이유입니다. 단락 텍스트보다 더 큰 양식 제어 텍스트를 갖는 것이 어색해 보일 수 있습니다.☝️

3. 보조 텍스트는 구문 텍스트보다 약 2 크기 작아야 합니다 

더 작은 레이블, 캡션 등과 같은 보조 텍스트의 경우 몇 픽셀 더 작은 크기 (예 : 13px 또는 14px)를 사용하십시오. 

하나의 글꼴 크기만 사용하지 않는 것이 좋습니다. 

일반 텍스트와 혼동하기가 너무 쉽기 때문입니다. 또한, 텍스트가 덜 중요 할 때는 덜 밝은 회색 음영을 사용하여 덜 중요하게 명확하게 전달할 수 있도록 스타일을 지정하려고 합니다 (약 70 % 정도 강한 것이 시작하기에 좋습니다).

4. 항상 실제 장치에서 디자인을 봅니다. 

모바일 글꼴 크기를 선택하는 황금 표준은 실제 장치에서 디자인을 보는 것입니다. 

랩톱 화면에서 모바일 앱 디자인의 느낌이 손에 들고 있을 때와는 다르기 때문에 이 방법을 충분히 권장 할 수는 없습니다. 

초창기 디자이너인 저는 데스크톱에서 디자인 한 페이지를 모바일에서 열 때마다 거의 충격을 받았습니다. 

글꼴 크기, 간격… 모든 것이 꺼졌습니다. 따라서 Sketch Mirror 또는 Figma Mirror 또는 적합한 앱을 사용하되 장치에서 디자인을 봅니다.

5. 머티리얼 디자인 및 iOS 표준에 익숙해 지십시오 

도시에서 가장 큰 디자인 시스템이 무엇을 하고 있는지 아는 것은 결코 아프지 않습니다. 예를 들어

• 머티리얼 디자인의 기본 글꼴 크기는 16px Roboto이고 보조 글꼴 크기는 14px입니다 (머티리얼 디자인 스타일링에 대한 자세한 내용).
• iOS의 기본 글꼴 크기는 17px SF Pro이고 보조 글꼴 크기는 15px입니다 (iOS 스타일링에 대한 자세한 내용)

복사해야 합니까? 아니 –하지만 기준을 비교하는 것은 결코 아프지 않습니다.

데스크탑 웹 타이포그래피 지침 

데스크톱 웹 사이트 또는 웹 앱의 기본 크기를 선택할 때 대부분의 디자인을 두 가지 유형 중 하나로 분류 할 수 있습니다.

1. 텍스트가 많은 페이지. 기사, 블로그, 뉴스 등.이 페이지는 사용자가 페이지에서 주로 사용하는 페이지입니다. 상호 작용의 측면은 거의 없습니다. 몇 개의 링크 만 클릭하면 됩니다.
2. 상호 작용이 많은 페이지. 더 많은 호버링, 클릭, 목록 또는 표에서 항목 검색, 편집, 입력 등이 포함 된 앱. 페이지에 많은 텍스트가 있을 수 있지만 책처럼 직접 읽는 것은 아닙니다.

예제가 필요하십니까? 이 페이지는 텍스트가 많은 페이지입니다. Facebook 피드는 상호 작용이 많은 페이지입니다. 각각 조금씩 다른 문제가 있으므로 별도로 처리하겠습니다. 두 가지 모두 유용 할 것입니다. 미친 웹 앱의 "정보"페이지는 여전히 텍스트가 많습니다. 바닐라 블로그의 "문의"페이지는 여전히 상호 작용이 많습니다.

텍스트가 많은 페이지 

간단히 말해서 텍스트가 많은 페이지의 경우 더 큰 글꼴 크기를 원합니다. 사람들이 오랫동안 책을 읽는다면 좋을 것입니다. 눈을 돌리지 마십시오. 이제 같은 크기에서도 각 글꼴이 다르지만 다음과 같이 말합니다.

• 16px – 텍스트가 많은 페이지의 경우 최소
• 18px – 더 나은 글꼴 크기로 시작하십시오. 단일 간격 Word 문서를 인쇄하지 않습니다. 열 살짜리 모니터에서 몇 피트 떨어진 사람들을 위해 글을 쓰고 있습니다.
• 20px + – 처음에는 어색하게 느껴질 수 있지만 항상 디자인 앱에서 사용해 볼 가치가 있습니다. 웹에서 가장 잘 보이는 텍스트가 많은 Medium.com 사이트의 기본 기사 텍스트 크기는 21px입니다.

모바일 웹 섹션에서 언급 한 것과 유사하게 여기에는 훌륭한 규칙이 있습니다. 웹 사이트의 텍스트 (일반적인 모니터 거리에서 본)는 잘 만들어진 책 (일반적인 책 보유 거리에서 본 것)만큼 읽을 수 있어야 합니다. 이것은 실제로 짜증 나고 난잡한 운동입니다. 

왜냐하면 당신은 바보처럼 들고 있는 책에서 한쪽 눈을 감고 곁눈질을 해야 하기 때문입니다. 

그러나 멋지고 고독한 장소를 찾고 위생 상태를 확인하십시오. 내 글꼴 크기는 몇 피트에서도 읽을 수 있습니까? 

젊고 강력한 눈에 적응하는 것조차? 좋아, 당신은 아이디어를 얻는다.

상호 작용이 많은 페이지 

이제 상호 작용이 많은 페이지의 경우 더 작은 텍스트 크기가 완벽하게 허용됩니다. 

실제로 사용자가 한 번에 가져 오는 데이터의 양에 따라 18px 텍스트조차도 불편합니다. (웹)받은 편지함, 트위터, 읽기를 통해 스캔해야 하는 모든 앱, 데이터를 표시하는 앱을 확인하십시오. 

18px 텍스트의 단락을 찾기가 어려울 것입니다. 대신 14px-16px가 표준입니다. 그러나 하나의 글꼴 크기 만 있는 것은 아닙니다. 

덜 중요한 것들의 경우 더 작은 크기와 더 중요한 것들 (제목 및 자막 및 서브 자막 등)의 경우 더 큰 크기가 있을 수 있으며, 모두 거대한 호지 포지로 혼합 될 것입니다.

이제 중요한 부분은 다음과 같습니다. 상호 작용이 많은 페이지의 경우 각 텍스트 조각의 특정 요구 사항과 인터 플레이에 대한 일부 하향식 법령 (“타입 스케일”,보고 있습니다)에 의해 글꼴 크기가 덜 구동 됩니다. 그들 사이에.

예를 들면 다음과 같습니다.

• 이벤트 이름은 12px 매체로, 머티리얼 디자인 가이드 라인에 전혀 없는 글꼴 스타일입니다. 그러나 너비가 1440 픽셀에 불과한 화면에 7 열을 맞출 필요가 있고 많은 이벤트가 매우 짧기 때문에 이상적인 글꼴 크기 선택입니다. 작고 가독성이 떨어집니다. 더 큰 이벤트 이름은 너무 자주 잘립니다. 디자인은 절충입니다. 트레이드 오프의 이름을 지정할 수 없다면 잘못된 위치에 있는 것일 수 있습니다.
• 하루 중 시간 레이블 ( "12pm", "1pm"등)의 글꼴 크기는 10px입니다. 머티리얼 디자인 가이드 라인에서 완전히 빠진 또 다른 스타일입니다. 그러나 수평 공간은 매우 중요합니다. 각 이벤트에는 시작 시간이 표시되어 있습니다. 왼쪽 라벨을 작게 만드시겠습니까?
• 날짜는 48px입니다. 머티리얼 디자인 가이드 라인에서는 찾을 수 없습니다. 이 경우에, 나는 그들이 공식“Display 2”크기 인 45px를 사용하지 않은 이유를 모른다. 그러나 나는 이것을 말할 것이다 : 그것이 내가 디자인하고 있었다면, 아마도 48px를 만들었을 것이다. 크기는 굵게 표시되며 여기서는 굵게 표시됩니다. 너무 많은 관심을 끌 것입니다. 어쨌든 스타일을 수정했을 것입니다.

상호 작용이 많은 데스크톱 웹 사이트를 디자인 할 때는 이 점을 명심하십시오. 경우에 따라 텍스트 스타일을 수정해야 합니다. 일관성은 훌륭하지만 글꼴 크기가 너무 작은 경우 아무도 화를 내지 않습니다. 원하는 것을 쉽게 찾을 수 없을 때 화를 냅니다.

가능한 적은 글꼴 크기 

UI 디자이너를 처음 시작할 때 발생하는 가장 큰 인쇄상의 실수 중 하나는 너무 많은 글꼴 크기를 사용하는 것입니다. 가장 상호 작용이 많은 페이지조차도 일반적으로 총 약 4 개의 글꼴 크기로 멋지게 보일 수 있습니다.

세분화하자 :

1. 헤더 글꼴 크기 페이지에서 가장 큰 글꼴 크기입니다. 제목이나 섹션 제목으로 사용하십시오. 제목과 섹션 제목이 모두 있는 경우 여기에서 두 가지 다른 글꼴 크기를 사용해야 합니다.
2. 기본 글꼴 크기 페이지에서 가장 일반적인 글꼴 크기이며 텍스트 상자, 드롭 다운, 단추 및 메뉴와 같은 대부분의 컨트롤 뿐만 아니라 모든 본문에 사용되어야 합니다. 디자이너가 여기서 시작하는 주요 헤더 실수는 모두 하나의 글꼴 크기 여야 하는 요소에 많은 글꼴 크기를 사용하는 것입니다.
3. 보조 글꼴 크기 이 글꼴 크기는 일반적으로 기본 글꼴 크기보다 약 2pt 작으며 사이트의 중요하지 않은 세부 정보에 사용됩니다. 지원 정보 및 통계, 때로는 자막 등
4. 3 차 / 캡션 / 레이블 / 와일드 카드 글꼴 크기 종종 하나 이상의 글꼴 크기가 필요합니다. 때로는 정보가 너무 계층 적이기 때문에 2 차 스타일보다 더 차분한 3 차 스타일이 필요합니다. 다른 경우에는 레이블이나 단추에 대문자를 사용할 수 있습니다. 대문자의 시각적 무게가 증가하기 때문에 텍스트 자체에 약간 작은 크기를 사용하려고 합니다 (밸런스 업 팝과 다운 팝). 따라서 이 네 번째 글꼴 크기는 약간 와일드 카드입니다. 모든 디자인에 필요한 것은 아니지만 많은 디자인이 필요합니다. 내 유일한 경고 : 가능한 한 많이, 기본값은 일관성입니다.