모든 디자이너가 알아야 할 10가지 웹 타이포그래피 규칙

참여를 유도하고 방문자의 관심을 유지할 수 있는 많은 요소를 웹 디자인에 통합할 수 있습니다. 여기에는 이미지, 비디오 및 사운드가 포함됩니다. 그러나 거의 모든 웹사이트에서 가장 중요한 부분은 방문자가 읽은 정보를 얻기 위해 읽는 콘텐츠입니다.

정보를 더 읽기 쉽고 시각적으로 흥미롭게 만들고 해당 텍스트가 웹 사이트의 전체 디자인에 추가되도록 하려면 타이포그래피를 이해해야 합니다. 이것은 글을 기능적이고 미학적으로 즐겁게 만드는 기술이자 기술입니다.

타이포그래피를 유리하게 사용하는 방법을 배우고 싶다면 모든 디자이너가 염두에 두어야 할 10가지 규칙을 확인하세요.

1. 초기 설계 프로세스 후 LoremIpsum 사용 중지

콘텐츠가 왕이라면 왜 웹 디자인 과정에서 진지하게 고려되지 않습니까? 웹 디자이너는 가짜 콘텐츠를 자리 표시자로 사용하여 콘텐츠를 부차적인 역할로 분류합니다. 이것은 디자인 우선 순위가 완전히 엉망이라는 큰 표시입니다. 예를 들어 다양한 페이지 레이아웃을 조롱할 때와 같이 초기 단계에서는 그렇게 문제가 되지 않습니다. 그러나 범위를 좁힌 후에는 최종 디자인을 만들 때 실제 웹 콘텐츠로 작업하는 것이 중요합니다. 이렇게 하면 특정 웹 페이지에서 말하는 내용이 레이아웃 및 시각적 요소만큼 중요해집니다.

이 외에도 실제 텍스트를 갖는 것은 디자인 및 레이아웃 측면에서 중요합니다. 웹 페이지를 완벽하게 디자인한 위치에 있는 것이 아니라 실제 콘텐츠와 작동하지 않는다는 것을 배우기만 하면 됩니다. 이것이 콘텐츠 작성자의 클라이언트로부터 가능한 한 빨리 실제 텍스트를 얻는 것이 매우 중요한 이유입니다.

2. 텍스트를 산세리프체로 만들기

Serif 텍스트는 절대적으로 아름답습니다. 인쇄용으로 사용하거나 제목, 제목 및 부제목과 같은 더 큰 인쇄 응용 프로그램에 사용할 수 있는 훌륭한 글꼴입니다. 불행히도 화면에서 셰리프는 텍스트 블록과 같은 더 작은 콘텐츠 표시와 관련하여 제대로 확장되지 않습니다. 큰 크기에서 멋지게 보이는 세리프는 글꼴이 작아지면 텍스트를 읽기 어렵게 만듭니다. 이 때문에 큰 텍스트를 위해 세리프를 저장하고 가독성이 문제가 될 수 있는 경우 산문에 의존하는 것이 좋습니다. 더 나은 방법은 깨끗하고 매끄럽고 현대적인 sans 글꼴을 채택하고 인쇄기를 위한 세리프를 저장하는 것입니다. 이렇게 하면 예뻐 보이는 글꼴을 사용하기 위해 가독성 저하를 처리할 필요가 없습니다.

3. 디자인 프로세스 초기에 스마트 따옴표 및 기타 기호에 대해 생각하십시오.

특정 기호가 제대로 표시되지 않는 웹사이트를 방문했을 가능성이 있습니다. 때로는 질문이나 이상한 모양의 문자열로 대체됩니다. 다른 경우에는 단순히 거기에 없습니다. 이것은 똑똑하거나 "곱슬" 인용부호에서 자주 발생합니다. 이것은 종종 MS Word 또는 다른 패키지에서 생성된 텍스트의 결과이며 웹 페이지로 포팅됩니다. 상황이 단순히 원하는 대로 번역되지 않습니다. 유로 기호, 2바이트 문자 및 외부 콘텐츠에서 가져온 기타 기호에도 일반적입니다.

최종 디자인에서 이 문제를 피하기 위해 몇 가지 옵션이 있습니다. 먼저 콘텐츠를 수정하여 이러한 기호를 제거할 수 있습니다. 기호를 자연어로 변경하려는 경우 작동합니다. HTML을 사용하여 복사 및 붙여넣기에만 의존하지 않고 기호가 제대로 표시되도록 할 수도 있습니다. 무엇을 결정하든 가능한 모든 브라우저에서 웹 페이지를 테스트하십시오. 한 브라우저에서 기호 문제를 해결할 수 있는 것이 다른 브라우저에서는 전혀 효과적이지 않을 수 있습니다.

4. 고급 CSS 기술은 매우 중요합니다.

훌륭한 CSS 기술을 개발했다면 방문자가 웹사이트의 페이지를 완벽하게 원활한 방식으로 탐색할 수 있어야 합니다. 스타일시트를 올바르게 생성하면 같은 페이지의 여러 버전을 가질 수 있으며 타이포그래피와 관련하여 큰 연속성을 유지할 수 있습니다. 물론 많은 속임수를 사용할 필요는 없습니다. 좋은 CSS는 서체와 글꼴 크기가 한 페이지에서 다음 페이지로 변경되는 것과 같은 작지만 일반적인 문제를 피하는 데 도움이 될 수 있습니다.

일관된 타이포그래피가 왜 필요한가요? CSS를 사용하여 일관된 타이포그래피를 유지하면 웹사이트가 전문적이고 또렷해 보입니다. 또한 각 페이지를 디자인할 때 타이포그래피에 대해 생각할 필요가 없다는 의미이기도 합니다. 대신 적절한 스타일시트를 사용하면 됩니다. 특정 페이지에서 표준을 깨고 타이포그래피로 다른 작업을 수행하여 효과를 일으키거나 관심을 끌기로 결정했다면 CSS를 사용하여 더욱 돋보일 것입니다.

5. 마이크로 및 매크로 타이포그래피 모두 중요합니다.

마이크로 타이포그래피는 가독성과 관련된 타이포그래피의 세부 사항과 관련이 있습니다. 예를 들어, 간격은 스케일링 및 대비와 마찬가지로 마이크로 타이포그래피와 관련된 문제입니다. 모든 장치 또는 브라우저에서 텍스트 블록을 읽을 수 있도록 하는 조정은 모두 마이크로 타이포그래피와 관련이 있습니다.

매크로 타이포그래피는 타이포그래피에 대한 선택이 전체 디자인과 연결되는 방식과 관련이 있습니다. 미학과 관련이 있습니다.

좋은 타이포그래피는 마이크로 및 매크로 타이포그래피를 모두 고려합니다. 읽기가 거의 불가능한 정말 깔끔한 모양의 사용자 정의 글꼴을 사용하는 웹 사이트를 방문한 적이 있습니까? 마이크로 타이포그래피가 아닌 매크로 타이포그래피에 주의를 기울일 때 일어나는 일입니다.

6. 디자인뿐만 아니라 내용을 알기

아시다시피 좋은 웹사이트에는 흐름이 있습니다. 그 중 일부는 페이지에 있는 콘텐츠의 가독성입니다. 우리는 이미 이것이 세리프와 같은 것들에 의해 어떻게 영향을 받는지 논의했고, 디자인의 후반 단계에서 더미 텍스트가 실제를 대체할 수 없다는 점에 대해 논의했습니다. 아직 끝나지 않았습니다. 콘텐츠가 정말 왕입니다. 콘텐츠를 포함한 최종 디자인이 준비되면 웹 페이지를 읽어야 합니다.

디자인이 끝난 후 내용을 읽어보면 여백이나 줄 바꿈 문제가 있는지 확인할 수 있습니다. 이는 콘텐츠를 혼란스럽게 만들거나 의도하지 않게 콘텐츠의 의미를 변경할 수도 있습니다. 몇 가지 타이포그래피 트릭을 사용하여 이러한 문제를 수정하면 최종 제품이 귀하 또는 귀하의 클라이언트가 의도하는 바를 정확하게 전달할 수 있습니다.

7. 계층 구조의 중요성 이해

계층 구조는 웹사이트를 방문하는 사람들에게 제공하는 로드맵입니다. 이미지, 비디오, 색상 및 (물론) 타이포그래피를 사용하여 해당 계층을 만들 수 있습니다.

방문자가 보기를 원하는 첫 번째 항목에서 다음 항목 등으로 안내하기만 하면 됩니다. 타이포그래피를 사용하면 크기, 글꼴 변경, 간격을 사용하여 사용자가 따라야 하는 계층 구조를 정의할 수 있습니다. 실제로 전환되지 않는 페이지가 있는 경우 변경 사항이 방문자를 클릭 유도문안 버튼으로 안내하는 데 도움이 되는지 확인하기 위해 타이포그래피를 사용하고 싶을 수 있습니다.

8. 창의적이되 색상에 신중을 기하라

글꼴 색상 및 배경 색상 문제로 인해 가독성 문제가 발생하지 않도록 하는 가장 쉬운 방법은 가장 대조적인 색상인 흑백을 사용하는 것입니다. 불행히도, 그것은 꽤 지루한 디자인을 만들 수 있습니다.

색상을 사용하는 것을 두려워하지 마십시오. 실제로 효과가 없을 것 같은 색상 조합을 사용하는 것을 두려워하지 마십시오. 때로는 단순히 한두 가지 색조를 더 밝거나 어둡게 하는 것만으로도 충분합니다. 그런 다음, 당신의 타이포그래피는 읽을 수 없는 상태에서 완벽하게 식별할 수 있고 정말 멋진 모양으로 바뀝니다.

9. 도랑 중심 텍스트

중심 텍스트의 문제는 많습니다. 무엇보다도 웹 페이지가 제대로 디자인되지 않은 전단지처럼 보일 수 있습니다. 이 외에도 거의 항상 이상한 여백과 텍스트가 나타나며 마치 오래된 록 앨범의 시나 라이너 노트인 것처럼 보입니다. 헤드라인에 가운데 텍스트를 사용하는 것은 괜찮지만 일반적으로 아예 사용하지 않는 것이 가장 좋습니다. 왼쪽으로 조정된 텍스트를 사용하면 독자가 콘텐츠를 훨씬 더 읽기 쉽게 찾을 수 있습니다.

10. 텍스트가 어떻게 확대되는지 고려하십시오

엄지와 검지를 사용하든 확대/축소 버튼을 클릭하든 사람들은 텍스트를 더 크게 만들 것입니다. 때때로 그들은 더 작은 화면을 보상하기 위해 이것을 합니다. 다른 경우에는 정상적인 크기로 텍스트를 읽는 것이 어렵기 때문에 단순히 그렇게 합니다.

모든 사람이 의도한 대로 텍스트를 볼 수 있다면 좋겠지만 텍스트를 보기 위해 추가적인 도움이 필요한 베이비붐 세대에게는 불가능합니다. 확대하면 저하되는 서체를 사용하지 않도록 주의하십시오.

유용한 도구 및 리소스

다음은 타이포그래피로 더 많은 작업을 수행하는 데 도움이 되는 몇 가지 유용한 도구와 리소스입니다.

• FontFace Ninja : 이 유틸리티는 인터넷에서 찾은 글꼴을 식별하는 데 도움이 됩니다. 이것은 정말 눈을 사로잡는 글꼴을 만났을 때 사용할 수 있는 훌륭한 도구입니다. 이 Chrome 플러그인을 사용하면 모든 웹사이트에서 볼 수 있는 상업적으로 사용 가능한 글꼴을 식별, 찾고, 구매할 수 있습니다.
• TypePlate : 웹디자이너를 위한 완벽한 타이포그래피 프레임워크입니다. TypePlate는 단락 시작표시문자, 블록 따옴표, 크기 조정, 색상 및 기타 다양한 타이포그래피 관련 문제를 처리할 수 있습니다.
• 모듈식 눈금 : 이상적인 글꼴과 글꼴 크기를 결정할 수 있는 눈금입니다. 또한 제목과 제목의 글꼴 크기와 텍스트에 대해 선택한 글꼴 사이의 균형을 맞추는 데 도움이 됩니다.
• TIFF : 이 도구를 사용하면 두 가지 글꼴을 불러올 수 있습니다. 그런 다음 두 글꼴 각각의 차이점을 표시합니다. 한 글꼴에서 다음 글꼴로 다른 문자와 숫자를 비교할 수도 있습니다.
• TypeWolf : 이 웹사이트를 사용하여 인터넷에서 가장 멋진 글꼴과 가장 영감을 주는 타이포그래피 사용을 수정하십시오. 이것은 정보뿐만 아니라 영감을 주는 훌륭한 소스입니다.
• 글꼴이 중요한 이유, Sarah Hyndman : 글꼴의 중요성과 타이포그래피가 정신 상태에 영향을 미치는 방식을 탐구하는 훌륭한 책입니다. 타이포그래피에 열정적인 사람들뿐만 아니라 올바른 유형의 직업을 선택하는 것의 중요성에 대한 확신이 필요한 사람들에게도 훌륭한 책입니다.

결론

바라건대, 이 기사는 웹 디자이너가 타이포그래피에 대해 조금 더 생각하고 디자인에서 더 효과적이고 창의적으로 활자를 사용하는 방법을 찾는 데 영향을 미치기를 바랍니다.