웹 타이포그래피 규칙, 알아야 할 사항

웹에 있는 모든 정보의 90%는 글입니다. 이는 타이포그래피가 90%를 나타내는 기술이라는 것을 의미합니다. 그것은 타이포그래피가 얼마나 중요한지를 보여주는 놀라운 수치입니다.

타이포그래피는 블로그 게시물, 소셜 미디어, 잡지, 보고서, 서적 등 모든 곳에 있습니다.

이것이 디자이너에게 의미하는 바는 텍스트가 주된 의사소통 수단이라는 것입니다. 만약 타이포그래피 기술을 물러 받지 않았다면 여러분의 아이디어를 청중에게 전달할 수 없을 것입니다.

운 좋게도, 그러한 일을 피하기 위해 여러분이 따를 수 있는 유용한 조언과 규칙 목록을 제시하려고 합니다. 타이포그래피에 능숙하지 않더라도 여기에 제시된 정보들을 따라가면 괜찮을 것입니다.

업계 표준 폰트 선택

웹 타이포그래피를 디자인할 때 선택할 수 있는 엄청나게 많은 폰트들이 있습니다. 하지만 이러한 폰트 중 일부는 다른 폰트보다 훨씬 더 좋으므로 연구를 수행하고 결과를 얻는 수 있는 것으로 입증된 폰트를 선택해야 합니다.

한 페이지에서 읽을 수 없는 찌그러짐으로 뒤죽박죽이 된 것을 보는 것보다 더 나쁜 것은 없으니 어떤 폰트를 사용하고 있는지 생각해 보십시오.

큰 전면 크기 사용

(예 : Elementor )

예전에는 작은 폰트 크기가 유행하곤 했습니다. 그것은 큰 모니터에서는 통용될 수 있지만 요즘 사람들은 전화와 태블릿을 사용하여 웹을 탐색하고 있습니다.

해당 사용자가 콘텐츠를 읽을 수 있도록 해야 하므로, 한 눈에 쉽게 볼 수 있는 큰 폰트를 선택하십시오.

15 ~ 25 픽셀(Pixel)이 최고의 유지율을 보이지만 읽기 쉽고 보기 좋은 경우에는 문제가 없어야 합니다.

머리글을 균형있게 작성

머리글은 웹 타이포그래피의 기표입니다. 사용자가 페이지를 탐색하고 자신에게 중요한 정보가 무엇인지 강조합니다.

머리글이 눈에 띄는 것이 중요하므로 본문 텍스트와 비교했을 때 크기가 최소 180% 늘려야 합니다.

줄 간격

예 : Overpass

줄 간격이 형편없는 텍스트 한 블록을 읽으려고 하는 것만큼 답답한 것은 없습니다. 글 읽기를 허드렛일로 바꿀 뿐만 아니라, 따라하기란 믿을 수 없을 만큼 어려울 수 있습니다.

그래서 줄 간격을 적절하게 맞춰야 하는 것입니다. 전체 포인트 크기의 120 ~ 145%로 수행해야 합니다.

트래킹 및 커닝

텍스트에 트래킹 및 커닝을 추가하는 것은 텍스트가 더 깔끔하고 더 편안하게 보이도록 도와줄 것입니다. 이 기능은 텍스트의 크기에 비례하는 문자 간 간격을 조정하는 것입니다. 제목과 텍스트 줄 사이의 공백은 같지 않습니다.

이렇게 하면 사용자를 위해 모든 항목을 분리하여 정보를 보다 쉽게 ​​탐색할 수 있습니다.

공백을 잊지 마세요

예 : Uber 브랜드

공백은 전체적으로 웹 디자인의 중요한 부분이며 타이포그래피를 포함합니다. 제목과 단락 사이에 적절한 공백이 있어야 합니다. 그렇지 않으면 모든 것이 정보의 클러스터가 될 것입니다. 바로 여러분이 피하려고 하는 것입니다.

사용자의 눈은 쉴 곳이 필요합니다. 이것은 단지 페이지에만 있는 것이 아니라 읽을 때도 마찬가지입니다. 공백이 없으면 지치고 피곤해지고 읽기를 중단합니다.

이것은 여러분이 성취하려고 하는 것과 정반대이므로 항상 이 웹 타이포그래피 규칙을 준수해야 합니다.

라인 길이 제한

라인 길이를 제한하는 것은 이유가 있습니다. 만약 여러분이 그것을 하지 않는다면 여러분의 페이지는 전문성에 관한 한 어려움을 겪을 것입니다.

45 ~ 90자 길이는 적절한 크기의 라인 길이이며, 개인적인 취향에 따라 많은 여지를 남깁니다.

라인 길이를 선택할 때 고려할 수 있는 요인 중 하나는 고객이 어떤 장치를 사용할지입니다. 여기에는 서비스 전반에 걸친 기기 사용량의 차이가 뚜렷하며, 더 큰 컴퓨터에서 방문하는 사용자로 인해 라인 길이가 길어져도 벗어날 수 있습니다.

하나의 서체로 선택과 고정

예 : TWO ROBBERS

세리프와 산세리프. 이 두 가지 서체에는 장단점이 있지만 하나만 사용해야 합니다.

대상 고객 또는 클라이언트가 찾고 있는 대상을 결정하고 해당 정보를 사용하여 결정에 영향을 미칩니다.

이것은 선택한 폰트와는 완전히 별개입니다. 명심해야 하는 것은 서체는 폰트로 이루어진 스타일 모음입니다.

앞서 말한 바와 같이, 폰트보다 서체를 앞서 결정해야 하며, 반대로 결정해서는 안 됩니다.

구조 및 계층

계층 구조가 없으면 혼돈과 대혼란의 수렁으로 떨어지게 될 것입니다. 이것은 일생일대의 타이포그래피와 마찬가지로 진실입니다.

여기서는 H1, H2, H3 및 P HTML 태그뿐만 아니라 정보를 표시하는 방식에 대해서도 이야기합니다.

따옴표, 링크, 목록 또는 그 사이에 있는 항목이 있으면 모두 동일한 구조를 따르는 지 확인하십시오.

목록 페이지를 작성하는 경우, 한 항목의 중간, 다른 항목의 맨 하단 및 맨 위에 있는 리소스에 대한 링크를 원하지 않습니다.

웹 타이포그래피 교육 강화

웹 타이포그래피는 하루만에 배울 수 없는 학문입니다. 기술을 발전시키기 위해서는 끊임없는 연습과 훈련이 필요하며, 그것은 방정식의 한 부분일 뿐입니다.

업계 표준은 끊임없이 지속적으로 진화하고 변화하고 있습니다. 그러므로 이러한 모든 변경 사항을 최신 상태로 유지해야 합니다.

연결 상태를 유지하고 찾을 수 있는 모든 튜토리얼 및 교육 리소스를 활용하십시오.

결론

웹 타이포그래피는 가장 노련한 디자이너에게도 부담스럽고 어려운 것입니다. 하지만 근육과 같아서 더 많이 사용할수록 더 강해질 것입니다.

안타깝게도 웹 디자인의 상당 부분을 차지하고 있으므로 완전히 피할 수는 없습니다. 여러분은 어느 시점에서 그것을 다루어야 할 것입니다. 웹 타이포그래피를 다루는 기술을 발전시켜 나가는 과정에 있어 이 팁이 도움이 될 수 있기를 바랍니다.

원문. Web Typography Rules: What You Need to Know