도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

Early adopterDesign News

[웹 디자인] 가독성 좋은 넓이 (Line length)

Material Design 가이드 라인에서 Style/Typography를 확인하던 중, 늘 무심코 읽고 넘겼던 부분이 마음에 걸려 오늘 자세히 보기로했습니다. 

이부분중에서도 "Line length" 부분입니다.

예전에는  이 부분을 뻔한 이야기라고 생각하여 무심코 넘어갔는데 읽어보니 당연하지만, 정확하게 모르고있던 부분이라 기분이 좋았습니다.

저 처럼 어설프게 생각하고 적용하신분들이라면 요번에 이해하고 적용하면 좋을것같아 번역해서 올려 봅니다. 

내용은 무척이나 간결하고 명확합니다. 





Material Design 화면 발췌

Material Design에서도 가독성으로 높이기 위한 설명으로 
https://baymard.com/blog/line-length-readability의 글을 인용하여 올려 놓았습니다. 

아래 번역글을 읽고나니 Material Design의 그림설명이 전보다 더 명확하게 이해가 되더라구요 ^^

baymard.com에 올라온 글을 번역해봤습니다.^^


텍스트의 가독성을 높이기 위해서는 각 행에 적절한 양의 문자가 있어야합니다. 단순히 텍스트의 너비를 결정하는 디자인 일뿐만 아니라 가독성도 고려 되어야 합니다. 


본문 텍스트의 최적의 줄 길이는 공백을 포함하여 한 줄당 50-60자 ( "Typographie", E. Ruder)로 간주됩니다. 다른 출처는 최대 75자까지 입력 가능하다고 제안합니다. 그럼 이 범위를 넘거나, 부족할경우의 단점은 무엇 일까요?

  • 너무 넓은 경우 - 한 줄의 텍스트가 너무 길면 독자의 시선이 텍스트에 초점을 맞추기 어려울 것입니다. 이는 선의 길이로 인해 선의 시작과 끝 위치를 쉽게 측정 할 수 없기 때문입니다. 또한 큰 텍스트 블록에서 올바른 줄로 계속하기가 어려울 수 있습니다.

  • 너무 좁은 경우 - 선이 너무 짧으면 시선이 너무 자주 뒤로 가면서 독자의 리듬이 깨지기 쉽습니다. 너무 짧은 줄은 또한 독자들에게 스트레스를주는 경향이있어 현재 줄을 끝내기도 전에 다음 줄에서 시작하게 되는 경우가 있습니다. (그러므로 중요한 단어들을 건너 뛸 수 있습니다).


글 머리 기호를 보면 너무 자주 발생하지 않는 한 무의식의 마음은 다음 라인으로 넘어갈 때 활기를 띠게됩니다. 모든 새로운 라인의 시작 부분에 독자가 집중하지만, 시간이 지날수록  집중력은 점점 사라집니다. ( "Typographie", E. Ruder).

너무 길거나 너무 짧은 줄의 단점을 피하기 위해, 독자에게 활력을 불어 넣고 계속 집중 시키려면 텍스트를 한 줄당 50-75자 이내로 유지하는 것이 좋습니다.


웹 디자인에서 최적의 선 길이(line length)를 얻는 방법

웹 디자인에서는 em 또는 pixels을 사용하여 텍스트 블록 너비를 제한하여 한 줄당 최적의 문자 수를 얻을 수 있습니다. (em을 사용하면 최상의 결과를 얻을 수 있지만 pixels보다 더 까다로울 수 있습니다.) 어느 라인을 선택하든 최적의 선 길이를 얻으려면 레이아웃을 고정 폭으로 설정해야합니다 당신의 방문자의 대다수를 위해.

이것이 완전한 유동적인 레이아웃을 사용하지 않는 이유 중 하나입니다. 사용자가 사이트에서 좋은 읽기 환경을 원할 경우 실제로 브라우저 창 크기를 조정해야합니다. 요즘 사용되는 무수히 많은 창 크기를 고려할 때 유동적인 레이아웃이 다소 불규칙한 선 길이가된다는 것은 명백합니다.

업데이트, 2014 년 6 월 : 미디어 쿼리의 출현으로 semi-fluid layouts이 가능 해졌고 텍스트의 너비에 대한 충분한 제어를 유지하면서 독자의 화면에 맞는 유동적 인 레이아웃을 제공 할 수있었습니다. 블록을 사용하여 최적의 선 길이를 보장합니다.

여기 baymard.com에서 우리는 Minion Pro를 기사의 size를 20으로 사용합니다. 560 픽셀 너비의 기사 컨테이너를 사용하면 한 줄당 약 72자로 끝납니다.

문자 길이로 라인 길이를 알고 있습니까? 50-75 범위 안에 있습니까? 방문자가 좋은 독서 경험을 갖기를 원한다면 반듯이 그렇게 해야합니다.

리뷰에 당신의 생각을 말해주세요.^^;

https://baymard.com/blog/line-length-readability


리뷰