최신 웹 사이트를위한 웹 타이포그래피 모범 사례

모든 모범 사례를 다루는 반응 형 웹 타이포그래피 가이드 & 사이트의 콘텐츠를 읽을 수 있도록 글꼴 스타일 크기 규칙 & 바라 보는 기쁨.


타이포그래피 모범 사례

화가는 붓이 있습니다. 조각가에게는 점토가 있습니다. 웹 디자이너들은 그들의 글꼴을 가지고 있습니까? 올리버 리히 슈타인이 유명하게 쓰여진:“웹 정보의 95 %가 언어입니다.” 사이트의 맞춤 그래픽, 아이콘, 예쁜 메뉴 및 깔끔한 인터페이스를 신중하게 고려한 후에는 웹 타이포그래피의 중요한 구성 요소를 염두에 두어야합니다..

걱정하지 마십시오. 매끄럽고 효과적인 텍스트를 만들기 위해 마스터 디자이너 일 필요는 없습니다. 웹 타이포그래피는 신뢰할 수있는 지침과 원칙을 준수함으로써 사용자가 간절히 읽기 쉽고 신중하게 디자인 한 방식으로 사용자가 원하는 정보를 전달합니다..

시각적 계층 설정

좋은 웹 타이포그래피의 가장 중요한 목표는 계층 한 요소에서 다음 요소로 시각적으로 흐르는 콘텐츠 제목, 소제목 및 본문 텍스트, 다양한 글꼴 가중치 및 스타일, 텍스트 블록 사이에 충분한 공백이 있으면 쉽게 읽을 수있는 환경을 조성하는 요소가됩니다..

타이포그래피 비주얼 계층 구조 예제

강체 구축

비즈니스의 첫 번째 순서는 사이트의 기본을 정리하는 것입니다 신체 텍스트는 방문자가 대부분의 시간을 읽는 데 사용하기 때문입니다. 목표는 긴 단락에 걸쳐 건강한 리듬을 불러 일으키고 큰 단락에 자연스럽게 흐르는 텍스트를 만드는 것입니다..

  • 본문 텍스트의 가장 일반적인 글꼴 크기는 16px또는 더 나은 아직, 1em (나중에 더 자세히 설명).
  • 양쪽의 고르지 않은 가장자리로 인해 눈에 띄지 않게 텍스트를 중앙 정렬하지 마십시오. 대신 왼쪽과 오른쪽을 설정하십시오 여유 텍스트 컨테이너의 자동 더 바람직한 효과를 달성하기 위해.
  • 정당화 텍스트는 웹 페이지가 아닌 신문에 적합합니다. 유동적 인 레이아웃의 특성은 단어 사이의 간격을 예측할 수 없게 만들 수 있습니다.
  • 고르다 대비가 낮은 높은 글꼴. 같은 글꼴 디 도트 점보 헤드 라인 또는 대형 인쇄에 적합하지만 굵은 선과가는 선 사이의 높은 대비로 인해 웹 사이트에서 작은 크기로 읽기가 어렵습니다..
  • 조심해 읽기 쉬움. 많은 산세 리프 글꼴에서 대문자 “I”와 소문자 “l”문자는 정확히 똑같아 불필요한 혼란을 야기 할 수 있습니다.
  • 최적 선 높이 단락 텍스트의 글꼴 크기는 1.25–1.5 ×입니다. 선택한 서체에 따라 적절하게 조정.

성공을위한 제목

더 좋든 나쁘 든 대부분의 독자는 페이지의 페이지를 훑어 볼 수 있습니다. 제목 본문을 귀찮게하지 않고도. 따라서 헤드 라인의 타이포그래피가 눈에 잘 띄도록주의를 기울이고 더 읽을 것을 권장하는 것이 중요합니다..

  • 제목 텍스트의 평균 글꼴 크기는 36px또는 더 나은 2.25em (우리는 이것에 도달 할 것이다).
  • 주의는 항상 본문 전에 제목으로 가야합니다. 본문에서 제목 텍스트가 너무 두꺼운 글꼴 무게로 인해 너무 강하지 않은지 확인하십시오..
  • 헤드 라인이 독자의 기대치를 충족하는지 확인하십시오. 하위 단락 사이에 충분한 간격이있는 상당히 큰 텍스트는 주제의 변경을 의미하지만 단락에 훨씬 가까운 헤드 라인은 내용이 관련되어 있음을 나타냅니다..
  • 헤드 라인이 다음 줄로 줄 바꿈되는 경우 선 높이 제목입니다 적게 본문에 대한 것보다.

사이의 공간

페이지의 요소를 분리하는 공간의 양은 서로의 관계에 대해 많은 것을 말하며 간과 할 수없는 디자인 원칙입니다. 흰색 바다로 둘러싸인 지배적 인 헤더는 단락에 밀접하게 연결된 작은 헤더와는 다른 맥락을 제공합니다 (우리는 시각적 계층).

일반적으로 충분하지 않은 것보다 공백이 너무 많으면 잘못하는 것이 좋습니다. 넉넉한 공백이있는 깔끔한 레이아웃이 최신 웹에서 선호됩니다..

줄에 빠지는

고해상도 27 인치 모니터에서 화면 양쪽 가장자리에 걸쳐 텍스트를 읽는다고 상상해보십시오. 한 단락 만 지나면 눈이 피로해진다!

눈이 중심점에 집중되도록 본문의 각 줄을 특정 문자 수로 제한하는 것이 중요합니다. 대중적인 합의는 데스크탑 이다 60 ~ 75 자. 에 대한 모바일 화면, 눈을 가늘게 뜨고 지나치게 응축 된 텍스트를 피하고 싶은 경우이 숫자는 한 줄에 35–40 자.

스케일 팁

많이 쓰여졌다 본문과 제목 글꼴 크기 사이의 배율에 대한 주제 Body 텍스트가 1em이라면 그 완벽한 H2 크기는 얼마입니까? 본문 텍스트와 H1-H6 제목 사이에서 가장 미학적으로 즐거운 비율을 결정하는 것은 운이 좋게도 많은 타이포 그래퍼가 이미 해독 한 것입니다. 또한이 수학적 비율은 사용자의 화면 크기에 따라 조정되어야합니다.

Jason Pamental이 제공하는 디자이너 유용한 차트 다양한 미디어 장치에서 가장 최적의 글꼴 크기라고 생각합니다. 그에 동의하는 경향이 있습니다. 기본적으로 데스크톱의 이상적인 H1 크기는 본체 크기의 3 배일 수 있지만 모바일 화면에서는 너무 과장되어 표시되므로 작은보기 영역에 맞도록 크기를 축소해야합니다..

다양한 미디어 장치에서 최적의 글꼴 크기 차트

빠른 참고 사항 : 시각적 계층 구조가 좋은지 어떻게 알 수 있습니까?? 화면에 곁눈질 모든 텍스트가 흐려질 때까지. 레이아웃이 섹션을 구분하지 않고 비정질 형태로 나타나는 경우 계층 구조가 실패했을 수 있습니다. 그러나 텍스트 블록과 헤드 라인 사이의 분리를 쉽게 식별하고 눈이 어디로 이동해야하는지 명확하게 알 수 있다면 훌륭한 모양입니다.!

반응 형 텍스트 유지

응답 성이 뛰어난 웹 디자인은 요즘 필수 관행입니다. 특히 점점 더 많은 사람들이 인터넷을 탐색하는 기본 수단으로 모바일 장치를 사용함에 따라 픽셀이 아닌 백분율로 디자인하면 이미지와 여백이 유체 폭에 적응하는 방식에 혁명을 가져 왔지만 반응 형 웹 타이포그래피는 불행히도 깨지기 힘든 난자를 유지했습니다..

웹 사이트의 모든 텍스트를 타겟팅하기 위해 여러 미디어 쿼리를 탐색해야하므로 여러 장치에서 글꼴 크기를 최적화하는 것이 어려울 수 있습니다. 그러나 선택한 단위를 빠르게 조정하면 모든 유형의 화면에 적합한 글꼴 크기를 더 쉽게 찾을 수 있습니다..

픽셀 이상

사이트의 타이포그래피를 단순화하려면 픽셀을 버리고 사용을 시작하십시오 ems. Em을 사용하면 사이트의 글꼴 크기 사이의 크기를 쉽게 이해할 수 있으며 작은 단위는 두 자리 수의 픽셀보다 관리하기가 쉽습니다..

더 중요한 것은 ems를 사용하면 모든 것이 부모 컨테이너와 관련이 있다는 것입니다. 설정하면 선 높이 컨테이너의 글꼴 크기를 변경하더라도 줄 높이는 올바른 비율로 유지됩니다. 픽셀을 사용하면 시각적 일관성을 유지하기 위해 글꼴 크기가 변경 될 때마다 컨테이너의 선 높이 속성을 지속적으로 조정해야합니다.

이 원칙은 여유, , 문자 간격, 사이트의 텍스트에 적용 할 수있는 대부분의 다른 스타일 모든 미디어 쿼리에 대해 콘텐츠의 패딩에 픽셀을 더 이상 넣지 않아도됩니다. 초기 상태를 ems로 설정하면 원래 비율로 자동 조정됩니다.!

Ems 사용

가장 먼저 할 일은 사이트의 글꼴 크기에 대한 기본 참조를 설정하는 것입니다. 당신의 스타일 시트, 이것을 입력하십시오 :

신체 {
글꼴 크기 : 100 %;
}

이렇게하면 사이트 콘텐츠의 상대적 글꼴 크기가 설정됩니다. 1em, 대부분의 브라우저는 16px. 이제 모든 제목 크기 (2.25em, 1.5em 등)는 기준선 1em의 직접 배수입니다..

중요 사항: Ems는 계단식— 크기를 의미하는 것은 부모의 확립 된 가치에 상대적입니다. 예를 들어 : Body의 font-size를 1.25em으로 설정 한 다음 하위 컨테이너의 font-size를 1.25em으로 설정하면 두 글꼴의 크기가 동일하지 않습니다! 오히려 하위 컨테이너의 텍스트는 1.25x 원래 1.25em 부모 크기입니다..

훌륭한 웹 타이포그래피를위한 추가 팁

다음은 훌륭한 웹 타이포그래피를위한 몇 가지 팁입니다.

과용하지 마십시오

웹 사이트의 타이포그래피를 2–3 글꼴 많으면. 일반적으로이 글꼴은 제목의 글꼴, 기본 텍스트의 글꼴 및 필요한 경우 하위 제목 글꼴입니다. 너무 많은 글꼴을 사용하면 지저분하고 초점이 맞지 않은 레이아웃을 만들 수 있습니다. 다음 지점에서 설명하는 것처럼 사이트의 로딩 시간에도 영향을 줄 수 있습니다..

필요한 것만 포함

귀하의 사이트에 가장 필요한 것만 고려하고 나머지는 제외하십시오. 당신이 필요하다는 것을 안다면 정규병, 굵게이탤릭체 주어진 글꼴에 스타일을 적용한 다음 해당 선택 사항 만 포함하고 얇은, 검정 스타일. 각 개별 스타일은 별도의 서버 요청이므로 필요 이상의 스타일을로드하면 사이트 리소스에 큰 타격을 줄 수 있습니다..

디자인 단계에서 창의성을 제한하지 않으려면 모든 것을 포함하십시오. 사이트를 시작하기 전에 초과 스타일을 제거해야합니다..

읽을 수 없으면 사용하지 마십시오

이것은 큰 문제입니다. 꽃이 많은 동안 필기체 글꼴 “g”또는 “y”에 관계없이 약간의 혼동이있는 경우에는 사용하고 싶은 유혹이있을 수 있습니다. 읽을 수없는 글꼴을 해독하려고 애쓰는 것보다 독자에게 더 실망스러운 것은 없습니다.

‘Lorem Ipsum’보다 실제 텍스트 선호

모든 디자이너는 로렘 ipsum 프로젝트 레이아웃을 계획 할 때 빈 내용 영역을 채우는 더미 텍스트. 그러나 실제 내용을 사용하는 것이 타이포그래피의 모양과 느낌에 미치는 영향에 놀랄 수도 있습니다. ‘Lorem ipsum’은 완전히 감정이없고 지능적으로 속이 비어 있습니다. 그것은 당신의 말과 당신의 성격이 서체를 통해 어떻게 표현 될 것인지에 대한 실마리를 제공하지 않습니다. 따라서 사이트 디자인을 마무리하기 전에 가능한 빨리 실제 콘텐츠를 사이트에 연결하십시오..

배경과 대조

평범한 흰색 배경에 어두운 글꼴은 항상 최상의 가독성을 제공합니다. 어둡거나 흐린 이미지에 대한 흰색 텍스트도 요즘 인기를 얻고 있습니다. 배경이 너무 복잡하거나 상세하지 않아 전경 텍스트를 압도 할 수 있습니다..

텍스트 배경 위에 텍스트의 잘못된 타이포그래피 예“텍스트 위에 텍스트”배경을 사용하는 잘못된 타이포그래피 연습의 예.

짝짓기 글꼴 – 같은 매력

완전히 다른 성격의 글꼴을 페어링하면 혼동 된 신호가 나타납니다. 둘은 문체 적으로 대조적 일 수 있지만 감정적으로는 동일한 메시지를 제공해야합니다..

글꼴 연결 – 가족에게 유지

가장 간단한 솔루션이 가장 좋습니다. 때때로 가장 좋은 페어링은 동일한 글꼴 패밀리 내에서 변형 (분리, 대체 중량, 슬래브)을 사용하여 발생합니다..

하이퍼 링크

일반적이고 예상되는 연습은 밑줄 호버 이벤트에 대한 밑줄을 제거하십시오. 이 길을 갈 때 강조 표시된 텍스트가 기울임 꼴이거나 대담한 혼동을 피하기 위해 밑줄 대신.

그러나 요즘에는 고정 된 텍스트가 대체로 색상이 지정되며 마우스를 가져 가면 전환 효과가 적용됩니다. 디자인 관점에서 볼 때 이것은 확실히 더 나은 옵션이지만 일관성을 유지해야합니다.!

알아야 할 CSS

문자 사이의 거리에 영향을줍니다. 헤드 라인 강조에 유용.

글자 간격 : x.xxem;

이것은 단어 사이의 거리에 영향을 미칩니다.

단어 간격 : x.xxem;

이것은 강조를위한 모든 대문자의 대안을 제공합니다. 약어에도 유용.

글꼴 변형 : 작은 대문자;

이것은 당신의 모든 텍스트를 CAPITALIZE합니다.

텍스트 변환 : 대문자;

텍스트의 첫 글자를 대문자로.

텍스트 변환 : 대문자;

텍스트에 취소 선이 생깁니다.

텍스트 장식 : 라인 스루;

이것은 최신 브라우저에서 글꼴 표시를 향상시킵니다.

텍스트 렌더링 : optimizeLegibility

글꼴 파일 형식 이해

글꼴이 다양한 브라우저에서 올바르게로드되도록 여러 파일 형식을 포함하는 것이 좋습니다. 이들은 당신이 가장 염려해야 할 것들입니다 :

트루 타입

TTF는 Mac 및 Windows에서 가장 일반적인 형식이며 모든 주요 브라우저에서 지원됩니다..

개방형

OTF도 광범위하게 지원되며 별도의 글꼴을 포함하지 않고도 작은 대문자 및 대체 문자와 같은 추가 기능을 사용할 수 있습니다..

내장형 개방형

EOT는 Internet Explorer에서만 지원되며 이전 버전의 IE를 사용하는 사용자에 대해 걱정하지 않는 한이를 제외하는 것이 가장 좋습니다..

웹 열기 글꼴 형식

WOFF와 그 후계자 인 WOFF2는 도시의 새로운 왕입니다. 주요 브라우저에서의 지원과 압축 기능은 최신 파일 형식을 선택합니다..

파일 형식을 변환해야 함?

한 가지 유형의 글꼴 파일 만 있고 다른 형식으로 변환해야하는 상황이 발생할 수 있습니다.. FontSquirrelFont2Web 그렇게 할 온라인 도구를 제공.

결론

당신은 이미 알고 함유량 귀하의 웹 사이트에서 가장 중요한 부분입니다. 잘 만들어진 콘텐츠는 잘 만들어진 타이포그래피를받을 가치가 있습니다. 읽기 어렵거나 구조가 어려운 텍스트로 사이트 방문자를 실망시키지 마십시오. 인쇄상의 모범 사례를 준수하는 신중하게 계획된 시각적 계층 구조를 통해 창의적 사고를 창의적으로 표현할 수 있습니다. 행복한 타이핑!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map