서체 이야기

제목의 선택

2022. 2. 24. 12:14

제목과 소제목은 독자를 텍스트로 초대하고 안내합니다. 때문에 큰 제목을 효과적으로 사용하여 눈길을 끌어야합니다. 작은 부제목은 특정 섹션을 읽을지 여부를 결정하는 데 도움이 됩니다. 제목은 구성을 고정하는 데 도움이 되도록 눈에 띄어야 합니다.

 

동일한 서체 사용

헤드라인에 본문 서체를 두 배 또는 세 배 크기로 사용하도록 시작할 수 있습니다. 간격, 두께, 정렬 및 대소문자 또는 색상까지 테스트를 해보아야 합니다. 동일한 바디 서체를 재사용하면 시각적인 조화를 이룰 뿐만 아니라 로드되는 글꼴 수가 줄어들어 성능이 향상됩니다. 일반적으로 불필요한 글꼴 파일을 제거하면 사이트 로드 속도가 빨라집니다. 가능하면 가변 글꼴을 활용해야합니다.

 

서체 결합

더 독특한 제목을 원하면 시선을 사로잡는 동시에 본문 텍스트를 보완할 수 있는 서체를 찾아야 합니다. 대부분의 경우 두 개의 세리프체 또는 두 개의 산세리프체를 페어링하는 것은 좋은 생각이 아닙니다. 근본적으로 비슷하지만 여전히 다른 두 개의 서체가 어색해 보일 수 있습니다. 서체를 결합하는 데 권장되는 방법 중 하나는 클래스가 다르지만 유사한 구조를 공유하는 서체인 슈퍼패밀리를 유지하는 것입니다. 예를 들어 본문에 Source Sans Pro를 사용하는 경우 제목에 Source Serif Pro를 사용하여 보완할 수 있습니다. 또 다른 제안은 같은 디자이너의 서체를 사용하는 것입니다. 예를 들어, 두 면 모두 Tobias Frere-Jones가 디자인했으며 서로를 보완하므로 Exchanged와 Retina를 페어링할 수 있습니다. 서체 혼합에 대한 정해진 규칙은 없음을 항상 염두해두어야 합니다. 두 가지 보완적인 서체 또는 완전히 독특한 서체를 선택할 수 있습니다. 자신의 본능에 따라 프로젝트에 대한 균형 잡힌 조합을 찾아야 합니다.

 

제목에 Em 사용하기

제목용 CSS를 작성할 때 px 단위보다 em 단위를 선호합니다. Em은 font-size 속성에서 계산된 상대 단위입니다. 예를 들어, 본문 텍스트를 100%(또는 16px)로 설정하면 1em은 16px, 2em은 32px, 2.5em은 40px입니다. 제목에 em을 사용하는 장점 중 하나는 텍스트 크기를 변경해야 할 때 한 곳에서 변경할 수 있다는 것입니다. 예를 들어, 본문 텍스트를 100%(16px)에서 83.1%(13px)로 변경하면 모든 제목도 그에 따라 조정됩니다. 많은 디자이너들이 크기를 파악하기 쉽기 때문에 px 단위를 선호한다는 것을 이해합니다. 수학을 수행하지 않고 px를 em으로 변환하려면 PX에서 EM으로 변환기가 북마크 도구에 유용합니다. Sass를 사용하는 경우 변환을 수행하는 함수는 다음과 같습니다.

@function calc-em($target-px, $context) {
  	@return ($target-px / $context) * 1em;
 	 }
h1 {font-size: calc-em(32px, 16px);}  // Outputs 2em

 

모듈식 스케일

웹에서는 모두 사용할지 여부에 관계없이 최소 6개 수준의 제목(h1 ~ h6)이 필요합니다. 콘텐츠 관리 시스템(CMS)에서 사용할 타이포그래피 시스템을 설계하는 경우 WYSIWYG 편집기에서 CMS 사용자가 선택할 제목 수준을 결코 알 수 없기 때문에 모두 정의하는 것이 안전합니다. 제목이 브라우저의 기본 설정으로 돌아가 계층 구조를 엉망으로 만드는 것을 원하지 않습니다.

 

제목에 적합한 크기를 선택하기 위해 CSS에서 em 단위를 실험한 다음 페이지를 다시 로드하여 실시간 결과를 확인하는 경우가 많습니다. 미리 계산된 모듈식 저울을 사용하는 이점 중 하나는 비율을 선택하는 데 도움이 된다는 것입니다. 모듈식 저울은 조화로운 관계로 서로 연결되는 일련의 숫자를 기반으로 합니다. 예를 들어, 피보나치 수열에서 각 수는 이전 두 수를 더한 결과입니다. 기본 크기가 16px이고 황금 섹션에 따라 제목을 선택하려는 경우 크기 척도에는 16, 26, 42, 68, 110, 178 등이 포함됩니다.

 

다양한 척도의 값을 계산하는 데 도움을 주기 위해 Tim Brown과 Scott Kellum은 Modular Scale이라는 유용한 도구를 개발했습니다. 이를 사용하려면 기본 텍스트 크기(1em 또는 16px가 기본값)와 다른 기본 크기(제목용)를 입력하고 축척 비율을 선택하기만 하면 됩니다. 예를 들어, 텍스트 크기에 16px, 가장 큰 제목에 50px를 입력하고 황금 섹션을 선택하면 1em, 1.194em, 1.618em, 1.931em, 2.618em 및 3.125em 값을 받게 됩니다. 그런 다음 해당 숫자를 CSS에 입력할 수 있습니다. 

h1 {font-size: 3.125em;}
h2 {font-size: 2.618em;}
h3 {font-size: 1.931em;}
h4 {font-size: 1.618;}
h5 {font-size: 1.194em;}
h6 {font-size: 1em;}

'서체 이야기' 카테고리의 다른 글

브라우저에서 서체 유형의 설정  (0) 2022.02.18
본문용 서체를 선택하는 방법  (0) 2022.02.17
웹 폰트의 제공  (0) 2022.02.15
전문적인 웹 타이포그래피  (0) 2022.02.14
타이포그래피로의 모험  (0) 2022.02.12
댓글