it-swarm-ko.com

최적의 글꼴 크기가 있습니까?

내가 참여한 대부분의 웹 사이트 프로젝트에서 대량 텍스트의 글꼴 크기는 일반적으로 12px-13px이지만 이것이 좋은 크기인지 궁금합니다. 웹 사이트의 글꼴 크기가 인쇄 글꼴 크기와 일치하도록 대량 텍스트의 경우 약 17px보다 훨씬 커야한다는 기사를 읽었습니다.

최적의 글꼴 크기가 있습니까? 일반 사용자에게는 너무 크거나 작은 것이 언제입니까?

소형/중형/대형 글꼴 크기에 대한 장단점이 있습니까?

업데이트 :
실제 테스트 사용자 반응 등에 대한 경험을 얻고 싶습니다.이 작업은 쉽지만, 너무 크거나 작지만 사용자가 언젠가는 전문가 의견 .

또한 글꼴 크기를 변경하는 기능은 좋은 토론이지만 여기서 요구되는 것은 아닙니다. 내가 알고 싶은 것은 사용자가 다른 글꼴 크기에 반응하는 방식이 아니라 다른 글꼴 크기에 반응하는 방식입니다.

56
googletorp

이것은 널리 토론되는 주제입니다. 내가 본 가장 좋은 방법 중 하나는 Idan Gazit의 프레젠테이션 개발자를위한 디자인 : 프론트 엔드를 덜 짜증나게 함 입니다.

이것은 다음과 같은 슬라이드를 가졌습니다. alt text 일반 화면에서는 16px 텍스트이고 책에서는 12pt 텍스트입니다. 메시지는 12pt가 책에 적합하지만 일반적으로 화면보다 독자에게 훨씬 더 가깝습니다. 거리를 고려하면 화면의 16px와 책의 12pt는 거의 같은 크기로 보입니다. 12pt 용지 = 16px 화면

더 작은 텍스트가 선호되는 모든 종류의 예외가 있습니다. 그러나 더 긴 텍스트의 최적의 가독성을 위해 16px에 동의합니다.

pt ​​또는 px와 같은 고정 크기 단위보다 em 또는 %와 같은 확장 가능 단위를 변경하는 것이 좋습니다. . 더 읽기 : CSS 글꼴 크기 : em 대 px 대 pt 대 백분율

34
user745

최적의 글꼴 크기는 없습니다. 하나를 찾는 것은 중요한 것을 잊고 있다는 것을 의미합니다. 텍스트의 가독성은 단지 크기의 제품이 아닙니다.

지난 5 년간 UI 디자이너로 12여 개의 웹 사이트를 구축했으며 모두 서로 다른 시청자를 보유하고 있습니다. 내가 찾은 것 중 하나는 크기가 가장 큰 요소가 아니라는 것입니다. 텍스트 표시와 관련된 여러 측면의 조합입니다.

  • 대조
  • 글꼴 모음
  • 선 높이
  • 페이지에서의 위치

이 두 가지를 결합하면 전체 가독성에 대한 대략적인 지표가 생성되며 텍스트의 가장 중요한 디자인 대상이라는 것을 알았습니다.

테스트의 일화로 (당신이 요청한 이후) : 나는 주요 청중이 컴퓨터에 정통하지 않은 사용자 인 월간 방문 횟수가 7 만 회인 커뮤니티 사이트에서 일했습니다. 본문 유형에는 12px Verdana, 제목에는 14px-16px Arial을 사용했습니다. 때때로 덜 중요한 텍스트를 위해 11px Verdana로 회색으로 떨어질 것입니다. 사이트에서 사용성 테스트를 수행 할 때 텍스트 크기가 아니라 디자인의 주변 색상이 램프를 쳐다 보는 것처럼 느껴지도록 피드백을 받았습니다. 우리는 이것을 사이트가 너무 밝다고 해석하고 전체 디자인의 대비를 덜 밝게 조정했습니다. 이러한 변화와 탐색 구조의 변화로 인해 부분적으로 방문자 당 월간 페이지 뷰가 크게 증가했습니다.

작은 글꼴 크기에 대해 기억해야 할 한 가지는 다른 목적보다 작은 것이 필요할 때 (duh!) 목적이 있다는 것입니다. 그러나 UI 디자이너는 인터페이스에서 명확성과 유용성을 만드는 것, 그리고 de-emphasizing UI의 일부 요소는 유용성을 향상시킬 수 있습니다. 어떤 요소를 축소해야하는지, 텍스트의 어떤 측면을 수정해야하는지 결정하는 것은 사용자의 몫입니다 (위의 목록에서).

20
Rahul

12px는 대부분의 사람들에게 잘 작동하는 것 같습니다. 17px에 무언가가 있으면 읽기가 더 어려워 10px 이하에있게됩니다. 12-13px가 좋은 지침이라고 생각합니다.

그러나 실제로 텍스트 크기를 1em과 같이 설정해야합니다. 일부 브라우저에서는 텍스트가 픽셀로 설정된 경우 텍스트 크기를 조정할 수 없기 때문입니다. 텍스트 크기에 관계없이 눈이 예리한 사람은 글씨를 작게하여 더 많이 읽을 수 있으며 시력이 나쁜 사람은 글씨를 더 크게 만듭니다.

1시에 설정하고 사람들과 브라우저가 나머지 작업을 수행하도록하십시오.

레이아웃을 관리 할 수 ​​있는지 확인하려면 다른 글꼴 크기로 페이지를 테스트하는 것이 좋습니다.

9
Vincent McNabb

최근의 과학적 증거에 따르면 :

  • 18 점과 22 점은 객관적 가독성을 크게 향상시킵니다 (눈 추적기로 측정).
  • 10 점과 12 점은 이해력이 크게 손상 될 수 있습니다 (이해 문제로 측정 됨)
  • 글꼴 크기가 커질수록 객관적인 가독성이 지속적으로 향상되기 때문에 클수록 좋습니다.

내 말을 받아들이지 마 과학 논문 에서 자세한 내용을 읽으십시오.

7
Martin

최적의 글꼴 크기는 개별적이며 사용자의 OS/브라우저에 의해 설정됩니다. 따라서 변경하지 마십시오.

서체를 확대해야하는 경우 (예 : 제목) 상대적으로 (예 : 200 % 또는 2em) 수행하십시오.

글꼴 크기를 줄이지 말고 항상 가독성을 유지하기 위해 대비를 유지하십시오.

5
George Pavelka

아니.
어쨌든 ... not px.

최적의 크기를 표현하기위한 올바른 단위는, 크기가 있으면 망막에 앵글이 붙어 있습니다.

Px를보고 있다면 가독성을 결정하는 데 필요한 세 가지 요소 중 하나만보고있는 것입니다.1:

도트 피치 또는 "해상도"(픽셀/거리)의 적절한 정의는 px에서 실제 거리로 변환하는 방법입니다.

물론 동일한 차원의 문자를 모든 곳에서 동일하게 읽을 수 없기 때문에 필요한 거리를 읽을 수 있습니다.

... 그리고 가독성은 다음과 같습니다.

  • 더 높은 px
  • 높은 도트 피치 (또는 낮은 해상도)
  • 더 낮은 판독 거리

1텍스트 색상, 배경 색상, 글꼴 등도 있습니다 (흰색에 검은 색의 굵은 텍스트는 주황색의 노란색 기울임 꼴 텍스트보다 작은 크기가 필요함). 픽셀, 도트 피치 및 읽기 거리는 dimension에만 기반한 결정이 필요합니다.

3
A.M.

글꼴 크기를 설정하지 마십시오. + N을 사용하여 "이를 기준선보다 크게"(또는 -N을 작게) 표시 할 수 있습니다. 어떤 경우에는 지정한 크기가 잘못 될 수 있습니다. 사용자가 사이트에서 수정 조치를 취할 필요가없는 유일한 실행 가능한 옵션은 브라우저가 결정하도록하는 것입니다.

2
Monica Cellio

글꼴 크기에 never 픽셀을 사용해야합니다. Full HD 해상도를 지원하는 12 인치 화면에서 14px 글꼴을 읽으려고하면 1-2mm 높이의 문자 (1 시간 미만의 두통)가 발생합니다.

2
JanC

12px는 괜찮지 만 중요한 것은 사용자가 직접 글꼴 크기를 늘릴 수 있고이 경우 사이트가 손상되지 않는다는 것입니다.

2
Ryan Shripat

이 글에 이상한 글과 오해가 있습니다. 많은 사람들이 과학과 우리가 텍스트를 읽고 이해하는 방법에 대해 잘 연구 된 측면을 무시하고 싶어하는 것 같습니다. 그것이 일어날 때, 나는이 주제에 대한 새로운 표준을 연구하는 과정에 있습니다. 그래서 현재의 최신 기술이 있습니다.

예술의 과학

기존의 연구에 따르면 최대 대비에서 글꼴이있는 정상 시력 개인의 최적 판독 속도는 시각적 각도의 0.2도에서 2도 사이의 x 높이입니다. X- 높이는 글꼴 소문자 x의 실제 세로 크기입니다. 실제 글꼴 크기는 보는 거리에 따라 달라 지지만 다행히 CSS 참조 픽셀 px 은 시각적 각도를 기준으로합니다. 최대 인쇄 속도가 달성되는 지점이므로 0.2 °의 시각적 각도를 임계 인쇄 크기라고합니다. (2 ° 이상에서는 다시 내려갑니다.)

1px는 0.0213도 또는 1.278 분의 호입니다. 이것은 픽셀 밀도가 96dpi @ 거리 28 인치 인 장치를 기반으로합니다. 따라서 장치 제조업체는 참조 px를 사용하여 의도 된/예상 된 시각적 거리에 따라 크기를 설정할 수 있습니다. 이것은 W3C CSS 표준에서 논의됩니다. 장치 제조업체는 참조 px를 사용하여 의도 된 시청 거리를 기준으로 실제 래스터 화 크기를 설정합니다. 16px는 반드시 16 개의 장치 픽셀 일 필요는 없습니다. 2 : 1 픽셀 비율의 iPhone에서는 예를 들어 32 개의 장치 픽셀이됩니다.

따라서 웹의 중요한 인쇄 크기는 9.4px의 x 높이입니다. 특정 글꼴 디자인에 따라 17px에서 20px 사이의 글꼴과 관련이 있습니다. 이로 인해 18px가 원하는 최소 글꼴 크기임을 나타내는 접근성 표준이 만들어졌습니다.

그러나 더 기다립니다

치명적인 contrast 레벨도 있습니다. 위에서 언급 한 글꼴 크기는 최대 대비와 관련이 있습니다. 그러나 대비를 낮추려면 어떻게해야합니까? 많은 디자이너들이 대비가 낮은 색상을 사용하여 사이트의 가독성에 심각한 영향을 미칩니다. 이 중 일부는 공간 주파수를 기준으로 올바른 대비를 지정하는 데 WCAG 2.0이 실패했기 때문입니다. 4.5 : 1은 큰 굵은 제목에 필요한 것보다 많지만 4.5 : 1은 작은 얇은 본문에는 충분하지 않습니다.

정상적으로 보이는 경우, 대비 감도 기능의 피크에서 큰 팻 헤드 라인의 경우 임계 대비가 10 % 정도로 낮을 수 있습니다. 그러나 작은 얇은 글꼴의 공간 주파수가 매우 높으면 대비가 20 배 이상 높아야합니다. 모든 텍스트가 동일한 CSS 색상 인 다음 다이어그램을 참조하십시오. 앤티 앨리어싱이 모든 인식을 넘어서 텍스트 대비를 조정하는 방법에 대해서는 설명하지 않습니다.

contrast sensitivity curve sowing relation to text size

따라서 글꼴 크기와 대비 및 기타 여러 가지 디자인 기능이 함께 작동하여 "가장 읽기 쉬운"텍스트를 제공합니다. 그럼에도 불구하고이 스레드의 많은 포스터가 권장하는 12px 글꼴 크기는 놀랍도록 너무 작으며 그 수치를 생각 해낸 사람은 누구나 추측 할 수 있습니다. 저작권 표시 또는 다른 사람이 읽지 않기를 원하는 경우 12px와 같은 것을 사용할 수 있지만 12px는 콘텐츠 텍스트에 적합한 크기가 아닙니다.

글리프가 가지고 있습니다

공식 권장 사항은 18px의 최소 크기이지만 Verdana (웹용으로 설계된 글꼴)와 같은 일부 글꼴은 16px까지 잘 작동 할 수 있습니다. 그러나 Times New Roman은 매우 작은 x 높이와 일반적으로 가독성이 좋지 않기 때문에 18px 미만으로 설정해서는 안됩니다 (Microsoft 덕분에). Microsoft가 엉망이 된 다른 글꼴의 경우 Microsoft가 일반적으로 읽을 수있는 고정 폭 글꼴을 사용하여 너무 얇고 가벼워진 "Courier New"를 사용하지 마십시오. 그들이 무슨 생각을하고 있었나요?

내게 필요한 옵션 및 가독성을위한 글꼴 선택에 대한 일반적인 고려 사항을 보려면 리서치 게이트 계정에서 다음과 같은 예비 PDF)를 무료로 다운로드 할 수 있습니다. https : //www.researchgate. net/publication/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

가장 중요한 결산 설명

글꼴 크기로 설정 한 것보다 더 중요한 것은 사용자가 내용을 깨지 않고 원하는 크기로 텍스트를 확대/축소 할 수 있다는 것입니다. 현재의 표준은 줌을 200 %로 설정하면 깨지지 않고 지정되지만 충분하지 않습니다. 사용자의 관점에서 500 %가 훨씬 더 합리적입니다.

치다:

20/20은 평균 비전입니다. 위에서 언급 한 글꼴 크기 (18px)는이 평균 20/20 사용자를 기준으로합니다. 20/40은 동일한 인식을 위해 두 배의 크기가 필요합니다. 20/200 사용자는 그 크기의 열 시간이 필요합니다 (즉, 1000 % 확대/축소를 원할 수 있음). 페이지의 글꼴과 장치의 물리적 크기가 더 크다는 사실을 고려할 때 최소 500 %를 언급합니다.

현재 연구에서 누락 된 기술은 가장 작은 글꼴을 확대하지만 더 큰 글꼴을 축소하면 큰 헤드 라인이 가독성을 위해 너무 커지지 않습니다.

한편, 귀하의 사이트를 읽고있는 사람들의 대부분이 귀하의 모니터만큼 좋은 모니터를 가지고 있지 않으며 귀하의 사이트만큼 좋은 시력을 가지고 있지 않다는 것을 고려하십시오. 운이 좋지 않은 사이트에서 사이트를 볼 수있는 방법에 대한 아이디어와 아이디어가 필요한 경우 저렴하고 불량한 소형 저해상도 모니터 (저장소에 모니터가있을 수 있음)를 가져와 3-4 피트 (예 : 미터 떨어져). 당신은 당신의 사이트를 읽을 수 있습니까? 이제 텍스트를 확대/축소합니다. 작은 모니터의 제한으로 인해 사이트가 중단됩니까?

이것은 많은 사용자들이 많은 사이트에서 겪는 문제입니다. 20/15 비전과 아름다운 32 "망막 디스플레이가 있다고해서 사용자가 거의 시각적 수준의 시각적 편의를 제공한다는 의미는 아닙니다.

앤디

0
Myndex

나는 에릭에 동의한다. 16pt는 가독성 에 이르기까지 가장 좋은 표준으로 보인다. 여기에서 더 읽어보십시오 : http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell