콘텐츠
- 01. 타이포그래피를 확장하기
- 02. 샘플 페이지
- 03. 가장 작은 화면부터 먼저 확인
- 04. 위로 이동
- 05. 위로 그리고 멀리!
- 06. 요약하자면
- 07. 추가 읽기
- 마음에 드 셨나요? 읽어보세요!
- 필요한 지식 : 기본 CSS 및 HTML 지식. 타이포그래피에 대한 지식
- 요구 사항 : 좋아하는 텍스트 편집기와 브라우저
- 프로젝트 시간 : 약 30 분
지원 파일 1
우리는 ems 또는 백분율을 사용하여 기본 글꼴 크기에 비해 상대적으로 유형의 크기를 조정하는 데 익숙합니다. 반응 형 웹 디자인을 통해 많은 규칙을 작성하고 레이아웃이 다양한 화면 크기에 맞도록 중단 점을 선택합니다. 유형은 매우 유동적이지만 한 가지 크기로 모든 것을 다룰 수있는 것은 아닙니다. 기기 나 화면 너비에 관계없이 레이아웃에 잘 맞도록 타이포그래피를 얻을 수있는 몇 가지 빠른 팁을 살펴 보겠습니다.
물론 하나의 튜토리얼에서 다룰 수있는 것보다 더 많은 방법이 있습니다. 따라서 아래에 유용한 리소스도 많이 있습니다.
01. 타이포그래피를 확장하기
아, 반응 형 웹 디자인! 놀랍도록 유동적 인 그리드와 미디어 쿼리를 통해 우리의 디자인은 모든 크기의 화면에 적합합니다. 운 좋게도 유형은 거의 끝없이 확장되고 우리가 제공하는 모든 크기의 컨테이너로 리플 로우됩니다. 반응 형 레이아웃에 대해 다시 생각할 필요가 거의 없습니다. 이상적으로는 전체 레이아웃이 확장 될 때 유형도 확장되어야합니다. 여기에 한 가지 방법이 있습니다.
02. 샘플 페이지
이 예에서는 Alice 's Adventures in Wonderland의 처음 몇 단락을 콘텐츠로 사용하여 데모에 사용할 매우 간단한 페이지를 준비했습니다. 귀하의 사이트에 조금 더 많은 내용이 포함되어있을 것이지만 단순함은이 데모에 대한 우리의 요구에 완벽하게 부합하며 동일한 기술을 더 복잡한 페이지에 적용 할 수 있습니다.
소스를 살펴보고 내부에 무엇이 있는지 살펴 보겠습니다. 제목에 대한 H1과 포함하는 div로 래핑 된 몇 개의 단락은 편리하게 랩 클래스를 할당했습니다. 이 예에서는이 컨테이너를 사용하여 선 길이를 관리합니다. 자신의 작업을 위해이 컨테이너의 너비는 그리드와 반응 형 동작에 의해 결정되지만 동일한 아이디어가 적용됩니다.
CSS를 빠르게 살펴보면 본문 글꼴 크기를 100 %로 설정했음을 알 수 있습니다 (참조 용으로 약 16px). 그리고 각 텍스트 요소의 크기는 ems입니다. 친절하고 친척! 우리는 좋은 출발을하고 있습니다.
신체 {
글꼴 크기 : 100 %;
줄 높이 : 1.6875;
font-family : Georgia;
}
기본 타이포그래피 스케일이 모두 설정되었으므로 이제 다양한 화면 크기에서 이것이 어떻게 유지되는지 살펴 보겠습니다.
03. 가장 작은 화면부터 먼저 확인
화면 너비가 약 320 픽셀 인 매우 작은 화면 너비에서 레이아웃을 살펴 보겠습니다. 인기있는 모바일 기기에서 볼 수있는 것 같습니다.
처음에는이 좁은 너비에서 줄 길이가 일반적으로 허용되는 최적 길이 인 45 및 75 자보다 약간 짧습니다. 또는 문자 세기를 좋아하지 않는 경우 줄이 짧아서 텍스트를 따라 가기가 더 어려워 질 수 있습니다. 개인적으로 나는 독서를하지 않는 것보다 더 많이 느끼는 경향이 있습니다.
편안한 선 길이를위한 공간을 조금 더 확보하기 위해 유형의 전체 크기를 줄이거 나 컨테이너를 조금 더 크게 만들 수 있습니다. 이것은 크기 조정 유형에 대한 튜토리얼이므로 전자를 사용하지만 후자는 완전히 허용되는 옵션입니다.
이를 처리하기 위해 최대 너비 400 픽셀에 대한 미디어 쿼리를 작성해 보겠습니다. 예, 정확히 320 픽셀은 아니지만 특정 기기 측정이 아니라 디자인에서 필요로하는 위치를 기준으로 중단 점을 설정하는 것을 선호합니다.
모든 유형의 크기를 변경하는 가장 쉬운 방법은 우리에 할당 된 크기를 변경하는 것입니다. 몸>의 글꼴 크기 속성 :
@ 미디어 전용 화면 및 (최대 너비 : 400px) {
본문 {font-size : 90 %;}
}
처음에는 ems를 사용하여 모든 유형의 크기를 조정했기 때문에 한 줄로 전반적으로 이러한 변경을 수행 할 수 있습니다. 예, 상대 유형 크기 조정을 위해!
04. 위로 이동
웹 디자이너처럼 브라우저 창 크기를 계속 크게 조정하면 상대적으로 크기가 큰 컨테이너가 계속 커지고 텍스트가 리플 로우됩니다. 당신이 기대하는 그대로. 그러나 선 길이를 주시하십시오. 언제부터 보이고 너무 오래 느껴지기 시작합니까?
전체 브라우저 창 크기의 약 800 픽셀 너비에서 줄 길이가 불편할 정도로 길게 보이기 시작합니다. 우리 유형에 다른 중단 점을 추가하기에 좋은 시간 인 것 같습니다.
@ 미디어 전용 화면 및 (최대 너비 : 800px) {
본문 {font-size : 100 %;}
}
@media only screen and (max-width : 1100px) {
본문 {font-size : 120 %;}
}
다음은 800 ~ 1100 픽셀 너비의 창 너비에서 페이지가 표시되는 모습입니다. 작업 할 공간이 조금 더 생겼고 이제 유형이 좀 더 멋지게 채 웁니다.
이번에는 두 가지 미디어 쿼리를 작성합니다. 최대 너비가 800 픽셀이고 본문 글꼴 크기가 100 %로 설정되어 창 너비 500 픽셀과 창 너비 800 픽셀 사이의 모든 것을 포함하고 두 번째는 창 너비가 800 픽셀 이상일 때 증가 할 수 있습니다. 기본 글꼴 크기입니다.
너비가 800 픽셀을 넘으면 기본 글꼴 크기를 120 %로 늘려서 원하는 위치에서 선 길이를 조금 더 늘 렸습니다. 물론 이것은 약간 주관적이며 콘텐츠 자체와 주변 콘텐츠에 따라 다릅니다. 자신과 디자인에 맞는 중단 점과 크기 변경 사항을 선택하십시오. 편안한 독서와 균형 잡힌 레이아웃이 여기서 목표입니다. 크기가 조정 된 데스크톱 브라우저 이상에서 레이아웃을 테스트하면 최적의 위치에 도달하는 데 도움이됩니다.
05. 위로 그리고 멀리!
다음에 무슨 일이 있을지 짐작하실 수 있습니다. 저는 계속해서 브라우저 창을 더 넓게 만들고 어떤 일이 일어나는지 볼 것입니다. 당연히 선 길이가 길어지고 약 1,100 픽셀에 다시 가까워지기 시작합니다. 다른 중단 점을위한 시간? 우리는 계속해서 이런 식으로 계속할 수 있지만 그렇게 영리 해 보이지 않을 것입니다. 끝이 없어 보이기 시작했습니다!
기술적으로, 당신의 유형은 계속해서 끝없이 확장 될 수 있습니다. 그러나 기회는 레이아웃이고 이미지는 그렇지 않습니다. 어느 시점에서 우리는 휴식을 취해야합니다. 이 간단한 데모에서는 포인트가 1,100 픽셀이라고 결정했습니다.
마지막 유형 관련 미디어 쿼리는 작성해야합니다. 선 길이가 늘어나는 것을 막을 수있는 무언가를 원합니다. 그래서 우리가 허용 가능한 선 길이가있는이 시점에서 사물을 고정시킬 수 있습니다. 그렇게하는 가장 쉬운 방법은 텍스트가 포함 된 div에 최대 너비를 지정하는 것입니다.
먼저 포함하는 div의 대략적인 너비를 픽셀 단위로 결정해야합니다. 브라우저 창 너비가 1,100 픽셀이고 랩 div의 너비가 70 % 인 경우 약간의 수학을 통해 div의 너비가 약 770 픽셀임을 알 수 있습니다. (1,100 *. 7x).
이를 통해 마지막 미디어 쿼리를 다음과 같이 편집합니다.
@media only screen and (min-width : 1100px) {
본문 {font-size : 120 %;}
.wrap {max-width : 770px;}
}
우리가 결정한만큼의 데모 유형은 다음과 같습니다.
거기에 있습니다. 다양한 화면 크기에서 읽을 수 있도록 유형을 멋지고 편안하게 유지하는 간단한 기술입니다.
06. 요약하자면
이 간단한 예에서도 줄 길이를 제어하기 위해 유형에 중단 점을 추가하는 위치에 대해 훨씬 더 자세하게 설명 할 수 있음을 알 수 있습니다. 그렇다면 선행과 계층은 어떻습니까? 컨테이너 및 유형 크기가 변경 될 때도 영향을받습니다. 고려해야 할 것이 너무 많습니다!
유형을 주시하고 레이아웃과 프로젝트에 적합한 위치에서 조정하십시오. 추가하는 미디어 쿼리 또는 중단 점 수는 중요하지 않습니다. 당신과 그것을 사용하는 모든 사람들을 위해 디자인을 견고하게 만드는 것입니다.
07. 추가 읽기
이 간단한 데모는 빙산의 일각에 불과합니다. 반응 형 웹 디자인을위한 타이포그래피에 대해 자세히 알아보고 싶은 경우 다음과 같은 몇 가지 권장 사항을 읽어보십시오.
- Tim Brown은 멋진 웹 유형에 대해 생각할 기술과 것들을 수집하는 훌륭한 일을합니다.
- 웹에서 크기 유형에 대한 옵션과 관련하여 백분율과 ems 이상이 있습니다. Ethan Marcotte는 Typekit 블로그에서 모든 것을 설명합니다.
- 수직 리듬을 세우는 것에 대해 수다를 떨치지 않고는 유형을 말하기가 어렵습니다. 이 고전적인 24 가지 방법 기사는 아이디어에 매우 적합합니다.
Val Head는 인터넷이 최대한 멋지게 유지되는 것을 좋아하는 디자이너이자 컨설턴트입니다. 그녀는 Web Design Day를 운영하고 있으며 CreativeJS에 글을 쓰고 valhead.com에서 블로그를 작성합니다.
마음에 드 셨나요? 읽어보세요!
- 타이포그래피 란 무엇입니까?
- 최고의 무료 글꼴 다운로드
- 무료 그래피티 글꼴 선택
- 디자이너를위한 무료 문신 글꼴
- 디자이너를위한 최고의 무료 웹 글꼴
