독서 경험 향상을위한 최고의 글꼴


13

콘텐츠 (입법부)를 제공하는 것이 주요 목적인 웹 사이트를 구축하고 있으며 사용자에게 최고의 독서 경험을 제공하고자합니다. 다음 예제 페이지를 살펴볼 수 있습니다.

http://iura.cl/cc/44

보시다시피, 현재 Telex 웹 글꼴을 사용하는 모든 것을 제거했습니다. 또한 야간 독서를위한 옵션으로 눈부심을 줄여야합니다.

http://iura.cl/cc/44?estilo=nocturno

준수해야 할 지침이있는 경우 읽을 수 있도록하기 위해 선택한 글꼴에 대해 무엇을 고려해야하는지 궁금합니다.


2
"어떤 글꼴을 권장하십니까?"는 우리가 대답하기에 너무 광범위한 질문입니다. 또한 글꼴은 확실히 '읽을 수있는'방법의 주요 부분이지만 다른 변수 (열 너비, 줄 간격, 색상, 힌트, 레이아웃 등)도 많이 있습니다.
DA01

@ DA01 어쩌면 추천할만한 가이드가 있습니까?
Dan


1
질문은 괜찮아 보입니다. "어떤 글꼴을 권장합니까?"가 아니라 " 웹 사이트에 대한 가독성이 좋은 글꼴 을 선택하는 방법 "– 수많은 기준이 있습니다.
user56reinstatemonica8

답변:


10

실제로 웹 사이트를 위한 가독성 이 좋은 기준이라면 몇 가지 간단한 원칙이 있습니다 .

  1. 주류를 생각하십시오. 덕분에 @font-face당신은 수있는 글꼴의 수천 그리고 수천에서 선택 -하지만 그들은 존경 foundaries에서 오는 경우에도 덜 인기있는 이상 글꼴들은 때때로 브라우저와 운영 체제 사이의 문제를 렌더링합니다. 경우 가독성이 당신의 우선 순위, 당신은 크로스 브라우저 크로스 OS 테스트 대량 싶지 않아, 당신은 안전 재생하고, 믿을 수있는 시도 및 테스트 글꼴을 사용할 수 있습니다. 구식 웹 세이프 글꼴 은 광범위하게 사용되기 때문에 안전 Verdana하고 Georgia안전한 베팅입니다. 더 희귀 한 브라우저 / OS 설정에서도 테스트를 거쳤습니다. 또한 친숙 함은 가독성을 향상시킵니다.
  2. 높은 x 높이와 넓은. 판독기 화면의 품질 또는 픽셀 밀도가 무엇인지 알 수 없으므로 가독성을 우선시하는 경우 문자의 중요한 구별 기능이 더 명확해야합니다. 웹 가독성 등을 위해 설계 글꼴 VerdanaGeorgia하나 또는 두 개의 픽셀 범프 쉽게 충분히입니다 편지의 주요 세부 사항, 그리고 상승 자 또는 센더에 최소한의 픽셀을 사용하는 X 높이에 대한 자신의 픽셀의 수만큼, 사용 b에서 o또는 에게 알리십시오 p.
  3. 너무 가볍지 않습니다. 가벼운 유형은 인쇄 또는 높은 픽셀 밀도 화면에서 잘 보이지만 ios7까지는 화면에서 거의 사용되지 않았으며 그 이후에도 논란의 여지가있었습니다. 시청자가 안정적인 고품질 화면처럼 최적의 조건에서 시청하지 않는 경우 실내 조명으로 인해 가독성이 떨어집니다. 좋은 고체 일반 무게 글꼴에 대한 이동 - 나는 언급 했느냐 VerdanaGeorgia?

물론 Verdana및 이외의 기준을 충족하는 글꼴이 많이 있으며,이 글꼴은 Georgia2009 년까지 @fontface가 널리 사용되었을 때 많은 웹에서 사용 된 글꼴이기 때문에 약간 지루한 것으로 간주됩니다. .

그러나 실제로는 잘못 읽을 수 없습니다- 웹 가독성 을 위해 설계되었으며 모든 브라우저와 운영 체제 조합이 잘 표시되도록 테스트되었습니다.


편집 : 웹 유형 판매자와 파운드리 가독성을 테스트하는 데 어려움을 겪을 때 마케팅에서 소리를지를 가능성이 큽니다. 예를 들어, 웹 타입 "리딩 엣지"시리즈 ( 여기에서 언급 한 Chris Burton의 팁 ). 여전히 광범위하게 테스트하십시오.


1
저는 디자이너가 아니며 눈에 문제가 있습니다. 나는 입법부 텍스트를 읽는 것을 좋아하지만 브라질 사이트가 때때로 아프다고 생각하기 때문에 귀하의 제안 (Verdana)을 가져 와서 1.5 행 높이, 글꼴 크기 16px 및 검은 색으로 스타일리쉬 한 플러그인을 사용했습니다 . 지금은 매우 편안합니다.
Fabio Montefuscolo

5

계속해서 이것에 대한 생각을하겠습니다. 글꼴을 선택하는 것은 여러 가지 측면에 의존하기 때문에 궁극적 인 '최고의 글꼴'도있을 수 없습니다. '글꼴을 선택하는 가장 좋은 방법'이있을 수 있습니다.

따라서 프로젝트에 가장 적합한 글꼴을 선택하는 데 도움이되는 사항을 고려해야합니다.

미디어 : 글꼴, 종이, 캔버스, 온라인, 휴대용 장치 등을 표시하는 방법입니다. 예를 들어 Times New Roman 블록과 같이 표시 될 미디어에 적합한 글꼴을 선택하려고합니다. 인쇄 된 문서에는 문제가 없지만 화면 (특히 작은 화면)에서는 Times New Roman 블록을 읽기가 매우 어려울 수 있습니다. 당신은 또한 당신이 웹 글꼴로 제한되어 있다면 당신이 사용할 수있는 것을보고 싶습니다 .Google 글꼴 과 같은 리소스가 여기에서 당신을 도울 수 있습니다. (Wikipedia에서 : "웹 안전 글꼴 웹 안전 글꼴은 다양한 컴퓨터 시스템에있을 수있는 글꼴이며 웹 콘텐츠 작성자가 선택한 글꼴에 콘텐츠가 표시 될 가능성을 높이기 위해 사용합니다. 웹 방문자 인 경우 사이트에 지정된 글꼴이없는 경우 브라우저에서 제작자가 지정한 대체 글꼴 및 일반 제품군을 기반으로 유사한 대안을 선택하거나 방문자의 운영 체제에 정의 된 글꼴 대체를 사용합니다. ")

청중 : 누가 그것을 읽을 것인지 생각하십시오. 어린 아이 는 이중 스토리 'a' 와 달리 세리프 기반 글꼴이나 단일 스토리 'a' 없이 더 잘 할 수 있습니다 . 그러나 청첩장이라고 말하면 Edwardian Script 와 같은 글꼴 이 그 맥락에서 인기가 있습니다. 세리프가 많을수록 더 장식 적 일수록 좋습니다. 전체 내용이 아닌 제목에 주로 사용됩니다. 현명한 ol로

대비 / 색상 : 다시 한 번 프로젝트 측면에서 고려해야 할 사항입니다. 물론 당신은 굉장히 높은 콘트라스트의 결과로 사람들을 맹목적으로 원하거나, 너무 낮은 콘트라스트를 가진 것에 흠집을 내고 주름을주는 것을 원하지 않습니다. 그 부분은 분명합니다. 그러나 색 구성표에 따라 밝기 및 대비 설정으로 바이올린을 사용하고 싶을 수도 있습니다. 예를 들어 GD.SE가 완전히 검은 색과 흰색이 아님을 알 수 있습니다 ( 여기에서 묻고 대답 한 것처럼 )-대비가 낮으므로 비교 하여이 웹 사이트를 매우 쉽게 볼 수 있습니다 훨씬 더 높은 대비를 가진 것을 보는 데는 눈이 피곤할 것입니다!

Weight : 일반적으로 더 가벼워진 글꼴은 더 ​​무거운 글꼴보다 가독성이 높기 때문에 여기서는 유용한 가독성의 다른 측면과 함께 자세히 설명 합니다.

수 : 미디어, 대상 및 컨텐츠에 따라 여러 글꼴을 선택할 수 있습니다. 이것에서 나는 조심하는 것이 좋습니다. 내용을 혼동하고 싶지는 않습니다. 글꼴의 요점은 무언가를 전달하는 것입니다. 찾고자하는 것은 가장 효과적으로하는 방법입니다. 하나의 글꼴이 때로는 지루할 수 있지만 너무 많은 글꼴이 혼동 될 수 있습니다. 일반적으로 굵은 체 / 이탈리아어 및 크기면에서 두 개의 글꼴로 혼합하는 것이 일어나는 경향이 있습니다. 글꼴 페어링에 대해서는 여기 에서 조금 더 설명합니다 .

이것들은 빈 슬레이트에서 갈 때 좁혀 야 할 몇 가지 측면이지만 실제로 내려갈 때 고려해야 할 것이 많지만 그렇게 나쁘지는 않습니다. 프로젝트 초기 단계에서 올바른 글꼴을 선택하는 것의 가치는 비교할 수 없습니다! 글꼴을 선택할 때 고려해야 할 요소가 더 있습니다.

좋은 비유는 마치 옷을 입는 것과 같다는 입니다. 여기에서 설명하는 간단한 개념입니다 .

내 대답의 형식이 자연스럽게 떨어짐에 따라 먼저 누가 누구인지, 무슨 말을 해야하는지 알아 내고 싶습니다. 그러면 의사 소통 수단, 어떤 글꼴을 알아 내고 싶습니다 :) 풍부한 링크가없는 Jenna-Answer에 대해서는 여기에서 자세히 설명 합니다 .

나는 내가 제공 한 링크를 읽는 것이 좋습니다.이 링크는 매우 유용하며 프로젝트에 적합한 글꼴을 선택하는 데 도움이됩니다. 이것은 독자 경험을 향상시키는 것입니다. 가독성에 관한 것이 아니라 글꼴이 기여하는 전체적인 맥락뿐만 아니라 적절하고 읽기 쉬운 글꼴이 디자인에서 완전히 제거 될 수있는 미학은 말할 것도없고, 더 잘 읽을 수 있지만보다 적절한 글꼴은 눈에 띄지 않을 수 있습니다. 디자인과 정보가 가장 눈에 띄는 것입니다. 제 생각에는 시간을내는 것이 매우 중요합니다.

내가 도와주고 너무 많이 짓지 않았기를 바랍니다. 올바른 글꼴에 대해 약간 열정적입니다. :) 프로젝트에 행운을 빕니다.


2

세리프 글꼴은 더 ​​오랫동안 독서를하는 것이 더 쉬운 경향이 있다고 생각합니다 . 더 나은 독서 경험을 위해 Adobe Garamond와 같은 serif 글꼴이 잘 작동한다고 생각합니다. Times만큼 "blah"가 아닙니다. 세리프에는 세리프 글꼴이있는 한 조금 더 "순결"하게 만드는 데 도움이되는 몇 가지 흥미로운 곡선이 있습니다.

여기에 이미지 설명을 입력하십시오

다음은 내가 동의하는 주제에 관한 기사입니다.

세리프 vs 산 : 마지막 전투


1
세리프 얼굴이 산세 리프 얼굴보다 읽기 쉽다는 결정적인 증거는 없습니다. 한 가지 예외는 화면에 표시되는데 해상도가 낮은 디스플레이는 세리프면의 세부 정보를 렌더링하기 어려울 수 있습니다.
DA01

1
Garamond는 예쁘지 만 ex-to-em 비율이 낮 으면 본문 글꼴로 사용 된 경우 가독성이 떨어집니다. 더 넓은 전장을 가진 Serif 글꼴에는 Georgia, Bitstream Charter 및 Charis SIL이 있습니다.
Gavin R. Putland

@ GavinR.Putland ex / em 비율에 대해 자세히 설명해 주시겠습니까? 줄 간격이 너무 작거나 틀린 경우에만 가독성이 손상 될 수 있습니다. 140 % 이상의 줄 간격이 권장됩니다.
Mikhail V

@ DA01 사람들이 "증거"주장을하는 경향이 있음을 알게되었습니다. 전문가로서 Garamond와 같은 글꼴을 가장 잘 읽을 수 있으며 다른 타이포그래피 전문가도 마찬가지입니다. 이것이 당신에게 "증거"가 아닙니까?
Mikhail V

@MikhailV 그것은 증거가 아닙니다. 그 의견입니다. 거기에있는 어떤 증거 (최소한)는 "가장 읽기 쉬운 얼굴은 그 사람이 가장 친숙한 얼굴이다"
DA01

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.