가변 글꼴은 고급 맞춤형 글꼴 기술입니다. Adobe Fonts 가변 글꼴 패널을 통해 가변 글꼴 모양을 조정하고 프로젝트에 가장 적합한 스타일을 선택할 수 있습니다. 현재 가변 글꼴을 지원하는 Creative Cloud 앱은 Photoshop, InDesign 및 Illustrator입니다.
가변 글꼴이란 무엇입니까?
가변 글꼴은 사용 가능한 모든 스타일에 별도 파일을 사용하는 고정 글꼴이 아니라 한 개의 파일을 사용하여 여러 글꼴 스타일을 저장합니다. 이를 통해 글꼴의 각 디자인 축에 대한 값을 지정하여 고정 글꼴이 제어할 수 없는 글꼴 모양을 제어할 수 있습니다.
기존 고정 글꼴을 사용하려면 프로젝트에 사용하려는 각 스타일을 추가하거나 설치해야 합니다. 예를 들어 Acumin Pro를 사용하면 Acumin Pro Regular, Acumin Pro Italic과 액세스하려는 다른 스타일을 추가할 수 있습니다. Acumin Variable에는 모든 스타일의 Acumin이 포함되어 하나의 글꼴만 추가하면 됩니다.
가변 글꼴의 각 구성을 인스턴스라고 합니다. 인스턴스는 빠른 액세스를 위해 생성된 사전 설정 스타일입니다. 위 그림의 가변 글꼴 패널은 Acumin Variable이 기본 인스턴스로 설정되어 있는지 보여 줍니다. 이는 모든 가변 글꼴이 사용자 정의되기 전에 적용되는 미리 정의된 설정입니다.
패널 아래에는 축 컨트롤이 있습니다. 축은 일련의 스타일 변형을 나타냅니다. 하나의 가변 글꼴에는 여러 축이 포함될 수 있습니다. 축을 최소 또는 최대 범위 내의 숫자로 사용자 정의할 수 있습니다. Acumin Variable의 예에서 축은 기울기, 두께 및 폭입니다.
Adobe Fonts 웹 사이트에서 가변 글꼴을 사용하는 방법
Adobe Fonts 웹 사이트의 가변 글꼴 모음 세부 정보 페이지에는 글꼴을 원하는 스타일로 사용자 정의할 수 있는 인터랙티브한 텍스트 도구와 패널이 포함됩니다. 사전 설정 인스턴스를 선택하여 나만의 인스턴스를 빠르게 조작하거나 만들 수 있습니다.


웹 프로젝트에 가변 글꼴 추가
가변 글꼴을 웹 프로젝트에 저장하려면 모음 페이지의 가변 글꼴 패널 위에 있는 웹 프로젝트에 추가를 선택합니다. 올바른 글꼴이 선택되었는지 확인합니다. 일부 가변 글꼴 모음에는 추가된 글꼴이 있습니다.
패널 하단의 CSS 복사를 선택하여 만든 사용자 정의 인스턴스에 해당하는 코드를 가져옵니다. 사용자 정의 설정이 없는 경우 코드는 기본 인스턴스를 반영합니다.
가변 글꼴을 사용자 정의하고 나서 브라우저 URL을 책갈피 표시하여 나중에 마지막 사용자 정의 설정을 복습하거나 URL 복사를 선택하여 구성을 공유하거나 저장할 수 있습니다.
사용 중인 가변 글꼴
가변 글꼴의 사용자 정의 가능한 특성으로 인해 글꼴이 디지털 그래픽부터 제품 패키지 또는 차량 래핑에 이르기까지 다양한 애플리케이션에 적합합니다. 폭을 조정하여 불규칙한 표면에서도 계속 읽을 수 있도록 글꼴을 배열할 수 있습니다.
크리에이티브 가변 글꼴 설정은 브랜드 개성을 강조하거나 종종 1/3 그래픽에 적합하지 않는 긴 제목을 채울 수 있습니다.
기울기, 두께 및 폭 축을 사용하여 자동차 도어 패널에 맞게 Obviously Variable을 조정합니다. Acumin Variable은 긴 1/3 제목에 사용합니다.
가변 글꼴을 사용하여 빌보드와 포스터의 시각적 계층 구조를 만들거나 패키지 디자인의 작은 공간과 비정상적인 모양에 맞게 가변 글꼴을 조정할 수 있습니다.
단락 맞춤에서 보다 간편하게 줄바꿈을 만들어 가변 글꼴을 표현합니다. 특히 폭 축을 사용하여 단어 간격을 보다 효율적이고 시각적으로 만들 수 있습니다.
가변 글꼴 기능을 사용하면 반응형 웹 디자인에서 제대로 잘 작동할 수 있습니다. 하나의 가변 글꼴을 사용하여 화면 크기를 조정하면 작은 파일 크기를 유지하고 로딩 시간을 줄이는 데 도움이 됩니다.
가변 글꼴이 애니메이트하고 소리, 주변광 또는 컴퓨터 시스템 테마에 반응하도록 코드 스니펫을 CSS에 추가할 수 있습니다. 또한 가변 글꼴 축을 사용하여 가변 글꼴을 더 쉽게 애니메이트할 수 있습니다.


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