Typekit에서 고급 웹 글꼴을 사용하여 코드를 작성하지 않고도 멋진 웹 사이트를 디자인하는 방법을 살펴봅니다.

Creative Cloud 멤버십에 가입하면 Typekit에서 제공하는 수천 개에 달하는 고품질의 고급 웹 글꼴 중에서 원하는 글꼴을 다운로드하여 데스크탑 및 모바일 디자인에 사용할 수 있습니다.

1. Typekit의 웹 글꼴 추가

beautiful-web-typography.zip 파일을 다운로드하고 Ike's_Bikes_before.mu 파일을 엽니다. 디자인 모드로 전환하고 텍스트 툴을 클릭합니다. Services 머리글 아래의 텍스트를 선택합니다. 텍스트 패널에서 글꼴 팝업을 클릭하고 메뉴에서 + 웹 글꼴 추가를 선택합니다.

웹 글꼴 추가

2. 글꼴 선택

시작을 클릭한 다음 웹 글꼴 추가 창에서 Typekit 탭을 클릭합니다. Adelle을 검색하고 이를 글꼴 브라우저에서 선택한 다음 확인을 클릭합니다.

텍스트가 선택된 상태에서 글꼴 팝업 메뉴에서 Adelle Light를 선택합니다.

참고: 유료 Creative Cloud 멤버십에서 제공되는 Typekit의 확장된 웹 글꼴 라이브러리를 이용할 수 있습니다. 이 튜토리얼에서는 웹 사이트에 모양을 적용하기 위해 확장된 라이브러리에서 글꼴을 사용했습니다.

글꼴 검색

3. 제목과 단락에 적합한 글꼴 선택

제목 및 단락에 사용되는 다양한 글꼴을 신중하게 선택하여 사이트를 깔끔하고 세련된 모양으로 만들 수 있습니다. 

1단계 프로세스를 통해 Prenton Ultra Condensed 글꼴을 추가합니다. 그런 다음 텍스트 툴을 사용하여 Services 머리글을 선택합니다. 컨트롤 패널에서 글꼴 팝업 메뉴를 클릭하고 Prenton Ultra Condensed > Regular를 선택합니다.

Prenton Ultra Condensed 글꼴 추가

4. 단락 스타일 재정의

헤드라인 텍스트가 선택된 상태에서 단락 스타일 패널을 열면 H1 + 스타일이 강조 표시됩니다. 스타일 재정의 아이콘을 클릭하여 모든 머리글에 새로운 글꼴을 적용합니다.

Services 머리글 아래의 단락을 선택하면 단락 스타일 패널에서 Body + 스타일이 강조 표시됩니다. 스타일 재정의 아이콘을 클릭하여 스타일을 다시 지정합니다. 이제 모든 본문 텍스트에 Adelle Light가 사용됩니다.

팁: 스타일을 마우스 오른쪽 버튼으로 클릭한 다음 스타일 재정의를 선택하여 스타일을 업데이트할 수 있습니다.

스타일 재정의 아이콘

5. 머리글을 모두 대문자로 처리

텍스트 툴을 사용하여 Point Services 머리글을 선택합니다. 텍스트 패널(창 > 텍스트)을 열고 대문자 아이콘을 클릭합니다.

텍스트 패널 열기

6. 위 첨자 적용

93 Point Service 머리글 아래에 있는 가격에서 00을 선택합니다. 텍스트 패널에서 위 첨자 아이콘을 클릭합니다. 페이지의 다른 모든 가격에도 동일하게 적용합니다.

위 첨자 적용

7. 목록에서 글머리 기호 변경

각 글꼴에는 기본 글머리 기호가 설정되어 있지만 독특한 모양을 위해 글머리 기호가 있는 목록에 서로 다른 글꼴의 글머리 기호를 적용할 수 있습니다.  1단계 프로세스를 통해 Franklin Gothic URW Extra Condensed 글꼴을 추가합니다. 

글머리 기호를 엽니다(창 > 글머리 기호). 텍스트 툴을 사용하여 67 Point Service 머리글 아래의 목록을 선택합니다. 글머리 기호 목록 버튼을 클릭하여 목록을 생성합니다. 

글머리 기호 패널에서 글머리 기호가 있는 목록 메뉴 옆의 옵션 버튼을 클릭한 다음 + 새 문자를 클릭합니다. 그런 다음 글꼴 팝업 메뉴를 클릭하고 Franklin Gothic URW Extra Condensed > Book을 선택합니다. 다이아몬드 글머리 기호를 클릭한 다음 추가 및 확인을 클릭합니다.

텍스트를 선택한 상태에서 글머리 기호 패널 열기
글머리 기호 변경

8. 새 글머리 기호 적용

이제 글머리 기호 패널에서 다이아몬드를 클릭하여 목록에 적용할 수 있습니다.

: 새 글머리 기호 스타일을 저장할 수 있습니다. 글머리 기호 스타일 패널을 열고 새 스타일 아이콘을 클릭합니다. 그런 다음 페이지의 다른 모든 목록에 글머리 기호 스타일을 적용할 수 있습니다. 

새 글머리 기호 적용

9. 합자 사용

합자를 지원하는 글꼴을 선택하여 "ff" 또는 "fi"와 같이 두 개 또는 세 개의 쌍을 이루는 문자가 사용될 경우 문자가 겹쳐지지 않도록 문자의 모양을 향상시킬 수 있습니다.

본문 스타일로 적용된 Adelle 글꼴에 합자 글머리 기호가 포함되어 있지만 최신 브라우저에서 합자가 표시되는지 확인하려면 파일 > 사이트 속성을 열고 컨텐트 탭을 클릭합니다. 웹 글꼴 문자 메뉴를 클릭한 다음 모두를 선택합니다. 

합자 사용

 

이상입니다. 이제 모든 작업이 끝났습니다. 이 튜토리얼에 대한 여러분의 의견을 보내주십시오.

 

02/14/2017
Ali Pordeli
이 페이지가 도움이 되었습니까?
아니요