Adobe Fonts에서 가변 글꼴 사용

가변 글꼴은 고급 맞춤형 글꼴 기술입니다. Adobe Fonts 가변 글꼴 패널을 통해 가변 글꼴 모양을 조정하고 프로젝트에 가장 적합한 스타일을 선택할 수 있습니다. 현재 가변 글꼴을 지원하는 Creative Cloud 앱은 Photoshop, InDesign 및 Illustrator입니다.

 

Adobe Fonts의 가변 글꼴 검색

가변 글꼴이란 무엇입니까?

가변 글꼴은 사용 가능한 모든 스타일에 별도 파일을 사용하는 고정 글꼴이 아니라 한 개의 파일을 사용하여 여러 글꼴 스타일을 저장합니다. 이를 통해 글꼴의 각 디자인 축에 대한 값을 지정하여 고정 글꼴이 제어할 수 없는 글꼴 모양을 제어할 수 있습니다. 

기존 고정 글꼴을 사용하려면 프로젝트에 사용하려는 각 스타일을 추가하거나 설치해야 합니다. 예를 들어 Acumin Pro를 사용하면 Acumin Pro Regular, Acumin Pro Italic과 액세스하려는 다른 스타일을 추가할 수 있습니다. Acumin Variable에는 모든 스타일의 Acumin이 포함되어 하나의 글꼴만 추가하면 됩니다. 

그래픽 사용자 인터페이스, applicationDescription 자동으로 생성
Acumin Pro는 18개 이상의 개별 스타일이 포함된 고정 글꼴로 사용하려면 각각 추가해야 합니다. 또는 Acumin Variable에는 한 번의 글꼴 추가로 사용자 정의할 수 있는 기울기, 두께 및 폭 축이 있습니다.

가변 글꼴의 각 구성을 인스턴스라고 합니다. 인스턴스는 빠른 액세스를 위해 생성된 사전 설정 스타일입니다. 위 그림의 가변 글꼴 패널은 Acumin Variable이 기본 인스턴스로 설정되어 있는지 보여 줍니다. 이는 모든 가변 글꼴이 사용자 정의되기 전에 적용되는 미리 정의된 설정입니다.  

패널 아래에는 축 컨트롤이 있습니다. 은 일련의 스타일 변형을 나타냅니다. 하나의 가변 글꼴에는 여러 축이 포함될 수 있습니다. 축을 최소 또는 최대 범위 내의 숫자로 사용자 정의할 수 있습니다. Acumin Variable의 예에서 축은 기울기, 두께입니다.  

Adobe Fonts 웹 사이트에서 가변 글꼴을 사용하는 방법 

Adobe Fonts 웹 사이트의 가변 글꼴 모음 세부 정보 페이지에는 글꼴을 원하는 스타일로 사용자 정의할 수 있는 인터랙티브한 텍스트 도구와 패널이 포함됩니다. 사전 설정 인스턴스를 선택하여 나만의 인스턴스를 빠르게 조작하거나 만들 수 있습니다.  

그래픽 사용자 인터페이스, applicationDescription 자동으로 생성

웹 프로젝트에 가변 글꼴 추가 

가변 글꼴을 웹 프로젝트에 저장하려면 모음 페이지의 가변 글꼴 패널 위에 있는 웹 프로젝트에 추가를 선택합니다. 올바른 글꼴이 선택되었는지 확인합니다. 일부 가변 글꼴 모음에는 추가된 글꼴이 있습니다.  

그래픽 사용자 인터페이스, applicationDescription 자동으로 생성

패널 하단의 CSS 복사를 선택하여 만든 사용자 정의 인스턴스에 해당하는 코드를 가져옵니다. 사용자 정의 설정이 없는 경우 코드는 기본 인스턴스를 반영합니다. 

그래픽 사용자 인터페이스, applicationDescription 자동으로 생성

가변 글꼴을 사용자 정의하고 나서 브라우저 URL을 책갈피 표시하여 나중에 마지막 사용자 정의 설정을 복습하거나 URL 복사를 선택하여 구성을 공유하거나 저장할 수 있습니다.

사용 중인 가변 글꼴 

가변 글꼴의 사용자 정의 가능한 특성으로 인해 글꼴이 디지털 그래픽부터 제품 패키지 또는 차량 래핑에 이르기까지 다양한 애플리케이션에 적합합니다. 폭을 조정하여 불규칙한 표면에서도 계속 읽을 수 있도록 글꼴을 배열할 수 있습니다.  

크리에이티브 가변 글꼴 설정은 브랜드 개성을 강조하거나 종종 1/3 그래픽에 적합하지 않는 긴 제목을 채울 수 있습니다.  

카메라를 보고 웃고 있는 사람

기울기, 두께 및 폭 축을 사용하여 자동차 도어 패널에 맞게 Obviously Variable을 조정합니다. Acumin Variable은 긴 1/3 제목에 사용합니다. 

가변 글꼴을 사용하여 빌보드와 포스터의 시각적 계층 구조를 만들거나 패키지 디자인의 작은 공간과 비정상적인 모양에 맞게 가변 글꼴을 조정할 수 있습니다. 

도시를 배경으로 한 빌보드
Acumin Variable을 사용하여 시각적 계층을 만듭니다.

텍스트, 화장품, 로션 등이 포함된 사진
Minion Variable의 두께 및 광학 크기 축을 사용하여 시각적 계층을 만듭니다.

단락 맞춤에서 보다 간편하게 줄바꿈을 만들어 가변 글꼴을 표현합니다. 특히 폭 축을 사용하여 단어 간격을 보다 효율적이고 시각적으로 만들 수 있습니다.  

TextDescription
Kepler Variable의 폭 축을 사용하여 단락 맞춤에 표시되는 간격을 줄일 수 있습니다. 빨간색 직사각형은 각 문장에서 줄어든 간격을 보여 줍니다.

가변 글꼴 기능을 사용하면 반응형 웹 디자인에서 제대로 잘 작동할 수 있습니다. 하나의 가변 글꼴을 사용하여 화면 크기를 조정하면 작은 파일 크기를 유지하고 로딩 시간을 줄이는 데 도움이 됩니다. 

텍스트, 잭, 스크린샷이 포함된 사진
웹에서 더 빠르게 로드할 수 있는 하나의 글꼴 파일에는 가변 글꼴이 포함됩니다.

다이어그램, textDescription 자동으로 생성
웹 사이트의 가변 글꼴을 사용하여 화면 크기 변경에 따라 글꼴을 조정할 수 있습니다.

가변 글꼴이 애니메이트하고 소리, 주변광 또는 컴퓨터 시스템 테마에 반응하도록 코드 스니펫을 CSS에 추가할 수 있습니다. 또한 가변 글꼴 축을 사용하여 가변 글꼴을 더 쉽게 애니메이트할 수 있습니다. 

모양이 포함된 그림
축의 값 범위를 통한 가변 글꼴 이동으로 애니메이션 활성화

서체 디자이너는 이 글꼴 기술과 상호 작용하고 기술을 혁신할 수 있는 새로운 방법을 계속 추구하고 있습니다.


관련 리소스 

쉽고 빠르게 지원 받기

신규 사용자이신가요?