웹용 타이포그래피 이해하기
웹 디자인에서 사용자 경험의 모든 영역을 고려할 때 활판 인쇄의 주제가 중요합니다. 모든 웹 사이트에는 텍스트가 필요하며 뛰어난 레이아웃을 만들기 위해 따라야 할 가이드 라인이 있습니다. 눈금 선, 레터링, 글꼴 높이, 텍스트 간격, 색 구성표 및 기타 유사한 속성을 모두 고려해야합니다..
이 기사에서는 웹 타이포그래피의 영역을 탐구하고 싶습니다. 우리가 조사 할 것이다. 신뢰할 수있는 웹 페이지 텍스트 디자인의 인기 아이디어. 그 길을 따라 몇 가지를 소개하겠습니다. 유용한 CSS3 속성 디자이너들은 종종 잊는다..
나는 웹에 대한 이론과 이데올로기에 더 초점을 맞추려고 노력했다. 이렇게하면 일반적으로 디지털 텍스트에 더 많은 초점을 맞출 수 있으며 웹 디자이너는 어떤 스타일을 어떤 용도로 적용할지 선택할 수 있습니다. 컨텍스트는 항상 중요하며 작업 할 각 프로젝트에 대해 적절하게 결정해야합니다. 이 안내서를 참조 패킷 전체가 행성 전역의 인쇄술 혁신 자들로부터 현대 웹 트렌드로 가득 차 있다고 생각하십시오.
단락 측정
이런 종류의 측정을 위해 야드 스틱을 파열 할 필요는 없습니다. 사실 타이포그래피와 관련된 측정은 페이지의 특정 단락의 너비 (가로 방향)를 나타냅니다. 항상 논의되는 주제가 아니지만 콘텐츠의 가독성에 영향을 미칩니다. 엄지 손가락의 일반적 규칙으로 75-85 문자 길이의 한 줄을 제한하고자합니다 (공백을 반드시 포함 할 필요는 없습니다).
자, 이것은 좀 더 넓은 레이아웃을 위해 약간의 스트레치처럼 보일 수 있습니다. 특히 디자인이 유동적이어서 사용자가 브라우저 창 크기를 조정할 때 적응할 수있는 경우. 당신은 항상 CSS를 설정할 수 있습니다. 최대 너비 기본 콘텐츠 div의 속성 픽셀이 아닌 확장 가능한 단위 (백분율, em)로 마진 및 글꼴 크기를 코딩하면 모든 레이아웃에서 이러한 유연성을 얻을 수 있습니다.
주의 할 최대 측정 단위는 없습니다. 문장에 내용과 형식 단어를 쓰는 방법은 각 줄의 너비보다 훨씬 중요합니다. 그러나 더 긴 문장은 짧고 간결한 문장에 비해 읽기가 훨씬 어렵다는 점을 명심하십시오.
선도적 인 설명
단락 측정과 함께 설계 할 때, 주요한. 단어가 발음됩니다. “주도”, 연필로 사용되는 납 등. 이 이름은 옛날의 기계식 조판에서 유래 한 것으로, 납의 띠가 텍스트 줄 사이에 놓여있는 곳입니다.
Leading은 여전히 웹 디자인에서 매우 중요한 개념이며 단락 측정과 함께 사용됩니다. 단락 폭이 커지면 앞선 금액을 똑같이 늘려야합니다. 텍스트 줄 사이의 간격. 이 여분의 공간으로 독서가 훨씬 쉬워집니다..
매우 단단하게 감은 텍스트를 보지 않으려면 한 줄에 집중하는 것이 어려울 수 있습니다. 이 경우 CSS를 사용하여 유도 량을 늘리십시오. 선 높이 재산. 항상 단어 사이보다는 텍스트 행 사이에 더 많은 공간이 필요합니다. 그렇지 않으면 텍스트 블록이 신문 인쇄물로 나타날 수 있으며 사용하기가 쉽지 않을 것입니다..
탄탄한 기술은 원래 필요한 것보다 더 많은 공간을 적용하고 필요한 경우 공간을 줄이는 것입니다. 모든 텍스트가 평등하게 생성되는 것은 아니며 굵은 글씨, 앵커 링크, 밑줄 등과 같은 다양한 내부 서식이있는 단락이 반드시 필요합니다. 일부 추가 기능을 사용하면 이러한 변경 사항이 다른 텍스트와 비교할 때 너무 느려지지 않을 것입니다.
자연 글꼴 크기 사용
평균 크기보다 작은 글꼴 크기를 고수하기로 선택한 소수의 웹 사이트가 아직도 있습니다. 11px-12px는 더 많은 “표준 전문가” 비즈니스 레이아웃 용. 그러나 이러한 크기는 특정 정보를 찾는 대부분의 방문자를 돕지 않습니다..
CSS 규칙을 적용하지 않으면 웹 브라우저는 기본적으로 16px로 기본 설정됩니다. 큰 텍스트를 수용하기 위해 레이아웃에 여유 공간이있는 경우에도 이보다 조금 작다고 간주 될 수 있습니다. 글꼴 크기가 클수록 상대방의 키워드를 더 쉽게 볼 수 있으며 더 쉽게 찾을 수 있습니다. Serif 글꼴은 종종 단락 재질로 선택되지 않지만 여전히 사라질 수 있습니다. 가독성을 높이고주의를 끌기 위해 serif 기반 글꼴에 훨씬 더 큰 텍스트 크기를 사용하는 것이 좋습니다..
사용자 환경에 대응
다른 글꼴 군과 크기를 시도해 보면 내용 영역이 그에 따라 적응해야합니다. 내가 붙인 표준 단위는 전자 사용 가능한 공간 및 화면 해상도에 따라 쉽게 크기를 재조정 할 수 있습니다. 이렇게하면 사용자의 가장 중요한 성능을 최적화 할 수 있습니다..
그러나 내용이 매우 유연 할 때 레이아웃이 버그 투성이가되는 경향이 있습니다. 바닥 글 또는 사이드 바 영역의 내용이 일부 브라우저에서 왜곡되거나 균형을 잃을 수 있습니다. 또는 본문 내에서 이미지 나 다른 형태의 미디어를 정렬하는 데 어려움이있을 수 있습니다. 고정 스타일 레이아웃이 필요한 경우 em을 사용하는 다른 방법이 있습니다. 그러나 어느 솔루션을 사용하여 가장 적합한 제품인지 확인하십시오.
고정 너비 및 단락 크기는 디자인의 많은 설정에서 고정됩니다. 고정 된 미적 효과를 많이 포함하는 콘텐츠에 적합합니다. 배경 이미지 또는 많은 측면 사이드 바 위젯을 생각하십시오. 또한 오른쪽 열의 고정 된 세로 막대를 사용하여 왼쪽 열에 유체 내용 영역을 만드는 간단한 과정입니다..
문맥에 기반한 스타일
정말 깔끔한 CSS 트릭이 주류 디자인에 숨겨져 있습니다. 특히 적절한 상황에서 적용될 수있는 인쇄 작업에서 복사 된 경향이 있습니다.
많은 웹 디자이너들은 텍스트 들여 쓰기 CSS 속성을 사용한 적이 없습니다. 이 규칙의 대상으로 지정된 단락의 첫 행을 들여 쓰기 할 값을 제공합니다. 단위는 픽셀, 점, 크기, 백분율 등의 표준 텍스트 옵션을 따르며, 대부분의 블로그에서 볼 수있는 추세는 아닙니다. 그러나 큰 텍스트 블록을 읽는 동안 멋진 페이지 리듬을 제공합니다..
CSS 선택기의 또 다른 유형은 의사 요소. 이렇게하면 모든 콘텐츠 선택기의 특정 부분을 타겟팅 할 수 있습니다. CSS3 : 첫 번째 문자 의사 선택기는 중요한 단락에 환상적인 스타일을 만드는 데 적합합니다. 당신은 각 단락의 시작 편지를 상당히 이야기적인 이야기 책과 비슷하게 굵게, 기울임 꼴 또는 활자체를 사용하여 재즈로 연주 할 수 있습니다. 활용할 수있는 몇 가지 추가 CSS 코드가 포함 된 드롭 캡의 아름다운 예를 확인하십시오..
글자 간격으로 재생하기
나는 많은 사람들이 '추적'이라는 말을 듣기 전에 아직 CSS 문자 간격 속성과 같은 생각을하지 못했다고 확신합니다. 이 두 개념은 인쇄와 디지털 타이포그래피와 관련된 하나의 개념입니다. 단위는 한 줄의 텍스트 내에서 글자 사이의 간격과 관련이 있습니다. 이것은 헤더와 심지어 사이트 내의 일부 더 작은 콘텐츠 블록에 적용하는 정말 깔끔한 효과입니다.
letter-spacing과 kerning을 혼동하지 않는 것이 중요합니다. 둘 다 서체와 문자 사이의 거리와 관련이 있습니다. 그러나 커닝은 단어의 두 글자 사이의 거리를 의미합니다. 문자 간격 속성은에 적용됩니다. 전체 요소 단어 또는 단락 또는 머리글 또는 앵커 링크 일 수 있습니다. 스타일에 대한 새로운 아이디어를 가지고 놀고있을 때이 점을 명심하십시오..
나는 종종 머리말에 모든 대문자와 함께 몇 픽셀 / 포인트의 문자 간격을 사용합니다. 이렇게하면 개별 문자가 일부 추가 공간으로 나뉘며 매우 정의 된 것으로 나타납니다. “표제” 보기. 부정적인 문자 간격은 올바른 상황에서도 효과적입니다. 나는 일반적으로 더 작은 단위, 아마도 -0.03em 또는 -0.1em에 붙어 있습니다..
서체 결합 및 일치
웹 타이포그래피의 디자인 개념은 분명히 예술의 한 형태이지 과학이 그다지 중요하지는 않습니다. 따라 할 수있는 지침이 있지만 제한이없는 확고한 규칙은 없습니다. 즉, 사용자가 액세스 할 수있는 다양한 글꼴을 혼합하고 검색 할 수있는 엄청난 자유가 있음을 의미합니다..
지금까지 가장 많이 사용되는 서체의 조합에는 머리글과 단락 내용을위한 serif / sans-serif 분할이 있습니다. 둘 다 전환하고 싶지만 헤더 섹션에 serif 글꼴을 사용하는 경우가 더 많습니다. 각 글자에 여분의 표식과 획이 표시되어 지배적 인 페이지 텍스트보다 더 아첨하게 보입니다..
또한 sans-serif 글꼴은보다 깨끗하고 쉽게 문장에서 함께 훑어 볼 수 있습니다. 그것은 serif 글꼴이 단락에서 작동하지 않는다고 말하는 것이 아닙니다. 사실 많은 좋은 예가 있습니다! 그러나 x-height라고하는 조금 알려진 개념은 서체의 복잡성을 구별하는 데 결정적으로 중요합니다. 몇 마디의 기준선을 보면서 그런 글꼴이 어떻게 될지 생각해볼 것입니다. “딱 맞다” 서로 서로 함께.
또한이 다른 요소들 사이에 공간의 중요성에 주목할 가치가 있습니다. 2 개 또는 3 개의 다른 머리글 스타일을 사용하게 될 것이므로 각각의 머리글 스타일이 다르게 나타날 것입니다. 내 h2 / h3 요소를 다음 단락 블록에 조금 더 가깝게 유지하는 경향이 있습니다. 이는 콘텐츠 사이에 상관 관계가 있음을 의미하기 때문입니다..
이 상관 관계는 완전히 다른 두 서체를 서로 바로 사용할 때 특히 유용합니다. 나는 한 세트의 컨텐트마다 3 가지 이상의 다른 폰트 패밀리를 추천하지 않는다. 너무 많은 사용자 정의 후 단어가 함께 뒤죽박죽으로 나타나고 전체 페이지가 오해 된 글꼴의 혼란처럼 보입니다..
결론
이 개념들이 디지털 타이포그래피의 복잡한 주제에 대해 밝혀 주길 바랍니다. 특히 전체 주제가 당신에게 외국 인 경우에, 디자이너로 일로 진짜로 들어가기는 어려울 수 있습니다. 그러나 공부를 계속하고 전체 무리를 연습해야합니다.!
다음주: 우리가 몇 가지를 들여다 보면서 계속 지켜봐주십시오. 유용한 도구 및 리소스 더 나은 웹 타이포그래피.
더…
타이포그래피 관련 게시물이 많이 있습니다.
- 아름다운 타이포그래피로 웹 디자인 쇼케이스
- 현대 웹 사이트를위한보다 나은 타이포그래피
- 타이포그래피 퀵 가이드 : 배우고 영감을 얻어보세요.
