언제나 완벽한 타입 디자인을위한 10 가지 규칙

일부 프로젝트는 훌륭한 유형으로 빛을 발하는 것 같습니다. 일부 디자이너는 모든 프로젝트에 완벽한 타이포그래피를 디자인 할 수 있습니다.

당신도 할 수 있습니다. 몇 가지 간단한 규칙을 사용하면 모든 프로젝트에서 디지털 및 인쇄물로 타이포그래피의 모양과 디자인을 향상시킬 수 있습니다. 서체를 고르거나 서체를 고르는 데 어려움을 겪는다면, 이 규칙은 매번 완벽한 서체를 디자인하는 데 도움이됩니다. (그냥 따라야합니다.)

Envato Elements 살펴보기

1. 프로젝트 목표 설정

좋은 타이포그래피는 프로젝트가해야 할 일을 제대로 이해하는 것으로 시작됩니다. Google Fonts 또는 Typekit을 탐색하기 전에 몇 가지 질문에 대한 답변을 적어 두십시오.

  • 이 프로젝트로 누구와 연락하려고합니까?
  • 사용자는 디자인과 어떤 관계가 있습니까?
  • 전환점은 무엇입니까?
  • 프로젝트의 분위기는 어떻습니까?
  • 다른 디자인이나 브랜딩과 일치하거나 조정해야합니까?

답은 어떤 종류의 타이포그래피를 찾고 있는지 이해하는 데 도움이됩니다. (디자인 프로젝트에서 서체의 의미와 분위기에 대한 안내서입니다.)

2. 비슷한 모양을 찾으십시오

디자인에서 여러 서체를 일치시킬 때 글자 모양만큼 단순한 글꼴 조합을 만들거나 끊을 수 있습니다.

어떻게 당신이 그것을 확인하는 방법?

모양이 비슷한 서체를 찾으십시오. 각 서체가 더 둥글거나 타원인지, 두껍거나 얇거나 x 높이가 짧거나 크거나 경사 또는 기울기를 포함하는지 생각해보십시오.

원하는 기본 또는 본문 서체를 선택한 다음 비슷한 모양의 보완 서체와 일치시킵니다.

  • 각 유형 군에서 소문자“o”를보십시오. 안쪽의“그릇”은 둥글거나 타원형입니까? "o"의 내부가 동일한 서체를 찾습니다.
  • 두꺼운 서체와 얇은 서체를 페어링해도됩니다. 두껍거나 얇고 규칙적인 서체를 사용하는 것이 좋습니다.
  • x 높이가 유사한 서체 (“x”의 세로 크기)를 찾으십시오.
  • 다른 유형의 스타일을 혼합하고 일치시키는 것을 두려워하지 마십시오. serif와 sans serif 조합을 ​​사용해보십시오. 한 서체가 복잡한 경우 다른 서체가 단순해야합니다. 또한 본문과 같이 가장 광범위한 응용 프로그램에 간단한 서체를 사용하십시오.
  • 기울어 진 기울임 꼴에주의하십시오. (“o”의 중심을 다시 지침으로 볼 수 있습니다.) 기울어 진 서체를 두 개 이상 사용하지 말고 반대 방향으로 기울어 진 서체 쌍을 피하십시오. 그것들은 사용자를 혼란스럽게 할 수 있습니다.

아직도 확실하지 않습니까? 다음은 서체 혼합에 대한 안내서입니다.

3. 크기 조정을위한 유형 스케일 설정

글자 크기는 프로젝트를 만들거나 깨뜨릴 수 있습니다. 텍스트가 너무 크면 일시 정지 및 중지가 너무 부 자연스러운 읽기 패턴이됩니다. 텍스트가 너무 작 으면 눈이 피로 해져 사용자가 디자인을 떠날 수 있습니다.

텍스트가 올바른 경우 사용자는 단어를 자유롭게 움직입니다.

올바른 크기의 텍스트에는 프로젝트의 다양한 크기에 대한 배율이 함께 제공됩니다. 본문은 하나의 크기이고 제목은 다른 크기이며 하위 제목은 또 다른 크기입니다. 그리고 모든 크기와 사용은 디자인 전체에서 일관되어야합니다.

이것이 사용자를 위해하는 일은 모든 것을보다 쉽게 ​​읽을 수있게하는 것입니다.

  • 텍스트 크기는 중요도에 따라 정보를 우선 순위로 둡니다. 더 큰 유형이 더 중요하며 대부분의 사용자가 감추고있을 가능성이 높습니다.
  • 배율은 사용자가 텍스트를 빠르게 볼 수 있도록 텍스트의 스캔 가능성을 높입니다.
  • 관련 항목의 모양이 동일합니다.
  • 하위 머리글과 같은 더 큰 텍스트 요소는 긴 텍스트 블록을 분리하여 쉽게 읽을 수 있도록합니다.

4. 간격에주의

유형 자체는 아니지만 유형 간격이 중요합니다.

커닝, 리딩, 트래킹 및 패딩은 유형을 아름답게 만들거나 핫 엉망으로 만들 수 있습니다.

적절한 간격을 두는 데에는 훌륭한 예술이 있습니다. 그리고 많은 것이 실제 문자 조합, 크기 및 서체에 따라 다릅니다. 필요할 때 수행하는 것 외에는 커닝 규칙이 없으며 텍스트 및 기타 요소에 대한 완벽한 패딩이 없습니다.

당신은 그것을 안구해야합니다.

시험은 느낌입니다. 정확하게 찾을 수없는 방식으로 디자인이 "꺼져"있다고 느끼면 문제가되는 간격이 탓할 수 있습니다. 제대로하기 위해서는 연습이 필요합니다.

5. 읽기 위해 왼쪽 정렬

영어와 다른 언어로 사용자는 왼쪽에서 오른쪽으로 읽습니다. 그것은 또한 복사 블록 내에서 가독성을 최적화하기위한 이상적인 정렬입니다.

메뉴 요소 또는 히어로 헤드 라인과 같은 작은 텍스트는 빠르게 읽을 수 있으므로 왼쪽에 정렬 할 필요가 없습니다. 문장보다 더 많은 양의 사본은 정렬 된 상태로 두어야합니다. (정확하지 않으면 약간의 간격 문제가 발생할 수 있지만, 정당성은 논쟁의 여지가 있습니다.)

6. 두 종류의 가족 선택

이 규칙은 이미 당신의 머릿속에 들어갔을 것입니다 : 프로젝트에 두 개의 서체 만 사용하십시오.

이 규칙에주의를 기울이는 디자이너가 거의 없기 때문에 여기에서 다시 언급됩니다. 웹이나 포트폴리오 웹 사이트를 스캔하면 "글꼴이 사라졌습니다!"라는 많은 프로젝트를 볼 수 있습니다.

이 규칙을 어기려면 다시 생각하십시오. 믹스에 다른 서체를 추가하여 얻는 것은 무엇입니까? 대신, 선택한 서체를보고 다른 스타일 (굵은 체 또는 굵은 체 또는 이탤릭체)이 더 나은 솔루션인지 확인하십시오.

7. 글꼴을 변경하지 마십시오

절대 서체를 늘리거나 비틀거나 기울이지 마십시오. 가지고있는 것과 다른 것이 필요하면 다른 옵션을 선택하십시오.

형식 디자이너는 제시된대로 작동하는 글자를 만드는 데 많은 시간을 소비합니다. 글자의 형태를 변경하면 가독성이 떨어지고 원래 크기보다 큰 크기를 사용할 때 사진이 픽셀 화되는 방식으로 글꼴이 "분리"될 수 있습니다.

8. 대비를 많이 사용

디자이너가 어려움을 겪게하는 것 중 하나는 이미지 나 배경 요소에 타이핑하는 것입니다. 요소를 구분하고 가독성을 보장하기 위해 요소간에 대비가 충분한 경우에만 작동합니다.

글자에 그림자를 추가해야 할 경우 대비가 충분하지 않습니다.

어두운 곳이나 어두운 곳에서 빛이 가독성을 보장 할 수 있습니다. 또한 규칙적으로 또는 더 넓은 스트로크로 서체를 사용하는 데 도움이됩니다.

그러나 항상 그런 것은 아닙니다. 사진에 밝고 어두운 공간이 있거나 두껍고 얇은 선이 포함될 수 있습니다.

옵션은 권투 텍스트, 더 무거운 서체 선택 또는 이미지에 색상 오버레이 추가를 포함합니다. 이러한 기술은 모두 대비를 높이고 텍스트를 더 읽기 쉽게 만듭니다. (또한 텍스트와 이미지가 이동하는 여러 반응 형 중단 점에서 사용될 때 유지되는 경향이 있습니다.)

9. 모바일 타이포그래피 기억

웹의 타이포그래피와 관련하여 모바일 가독성이 가장 중요합니다. 문자에 패턴이나 질감을 추가하는 것과 같은 재미있는 기술은 인쇄 및 일부 데스크탑 화면에서 작동 할 수 있지만 작은 장치에서는 부족합니다.

모든 용도에서 서체가 어떻게 렌더링되는지 생각해야합니다. 타이포그래피 스케일로 돌아가 크고 작은 화면에 유형에 대한 사양을 포함해야합니다.

모바일 타이포그래피는 종종 약간 크며 데스크탑의 타이포그래피보다 약간 더 간격이 있습니다. 또한 단락이 짧아지면 여러 스크롤을 사용하여 읽는 텍스트 블록으로 끝나지 않아 사용자를 위협 할 수 있습니다.

10. 스타일 가이드에 충실

프로젝트에서 유형이 어떻게 보이는지 확실하게 알고 나면 사용에 대한 정확한 규칙을 모두 갖춘 스타일 가이드를 만드십시오.

복사하십시오. 접근하기 쉬운 위치에 온라인으로 두십시오. 디자인을 변경할 때마다 사용하십시오.

일관성은 완벽한 타이포그래피 디자인의 핵심 요소입니다.

결론

좋은 대 나쁜 타이포그래피에 관한 것은 대부분의 사용자가 서로를 식별 할 수 있다는 것입니다. 디자인이 옳지 않은 경우에만 알 수 있습니다.

완벽한 타이포그래피를 만드는 데있어 주요 관심사는 가독성입니다. 유형은 읽고 이해하기 쉬워야합니다. 사본의 분위기와 일치해야합니다. 그리고 사용자에게는 거의 보이지 않습니다. 생각할 필요가없고 쉽게 읽을 수있을 때 작동합니다.

© Copyright 2021 | computer06.com