동적 타이포그래피를 위한 가변 글꼴

다양한 두께와 스타일에 대한 여러 글꼴 파일을 추적하는 것이 지루하다고 생각하시나요? 일반 글꼴, 굵은 글꼴, 기울임꼴 글꼴 및 기타 글꼴 변형에 대한 고유한 파일을 만드는 것은 웹 디자이너에게 어려울 수 있습니다. 이는 창작 과정을 복잡하게 만들고 작업 흐름을 방해합니다. 이 모든 변형을 하나의 파일로 결합하는 것은 어떻습니까?

여기서 가변 글꼴이 등장합니다. 가변 글꼴은 하나의 글꼴 파일에 일반 글꼴, 굵은 글꼴, 기울임꼴 등 다양한 변형을 포함할 수 있는 OpenType 글꼴 기술의 획기적인 발전입니다. 이는 디자이너가 필요한 모든 다양한 두께, 스타일 및 너비에 액세스하려면 하나의 파일로 작업하면 된다는 것을 의미합니다. 이 발명품을 사용하면 무게, 너비, 기울기와 같은 특성을 지속적이고 쉽게 수정할 수 있어 디자인 프로세스가 간소화되고 창의적인 자유가 촉진됩니다.

Kyiv Sans 글꼴을 예로 사용하여 이 기사에서는 CSS에서 다양한 글꼴의 관련성을 살펴보고 두께와 심지어 MIDL과 같은 비표준 글꼴 변형과 같은 품질이 얼마나 중요한지 보여줍니다. 이러한 도구를 사용하여 CSS에서 역동적이고 미학적으로 멋진 타이포그래피를 생성하는 방법을 배웁니다.

가변 글꼴 소개

가변 글꼴 기술 아키텍처를 통해 디자이너와 개발자는 CSS를 사용하여 이러한 인쇄상의 특성을 즉시 제어할 수 있으므로 프로젝트의 특정 요구 사항에 맞게 정확한 변경이 가능합니다. 이는 로드 시간을 크게 줄이고 많은 정적 글꼴 파일을 단일 가변 글꼴 파일로 대체하여 웹 성능을 향상시킵니다.

기존의 정적 글꼴 파일에서는 볼 수 없었던 유연성과 정확성을 갖춘 가변 글꼴은 인쇄 기술의 주요 발전을 이루었습니다. 모든 스타일과 두께에 대해 별도의 파일이 필요한 기존 글꼴과 달리 가변 글꼴은 확장 가능한 하나의 파일 내에 여러 스타일을 캡처합니다. 이는 무게, 너비, 시각적 크기 등 하나 이상의 축을 따라 지속적인 변화를 허용하는 OpenType 글꼴 스타일을 사용하여 수행됩니다.

CSS에서 가변 글꼴의 이점

이러한 도구를 사용하여 역동적이고 미적으로 보기 좋은 CSS 타이포그래피를 만드는 방법을 안내해 드리겠습니다. 몇 가지 예를 살펴보겠습니다.

효율성: 가변 글꼴은 여러 글꼴 스타일을 단일 파일로 결합하여 HTTP 요청을 최소화하고 페이지 로드 속도와 전반적인 효율성을 높입니다.

유연성: 디자이너는 wght와 같은 속성과 MIDL 및 CONT와 같은 사용자 정의 속성을 세밀하게 제어할 수 있으므로 다양한 디자인 상황과 사용자 선호도에 맞게 서체를 정확하게 수정할 수 있습니다.

부드러운 전환: 가변 글꼴을 사용하면 글꼴 스타일을 동적으로 변경할 수 있어 개별 글꼴 파일 간의 갑작스러운 전환을 방지할 수 있습니다. 결과적으로 글꼴 스타일 간의 전환이 부드럽고 유동적입니다.

반응형 타이포그래피: 가변 글꼴을 사용하면 뷰포트 크기나 기타 사용자 정의 매개변수를 기반으로 조정이 가능해 다양한 기기에서 최적의 가독성과 미적 매력을 보장함으로써 반응형 타이포그래피가 가능해집니다.

동적 타이포그래피: 가변 글꼴은 사용자 상호 작용이나 환경 조건에 따라 실시간 변화를 제공하므로 동적을 지원하고 사용자 참여를 향상하며 몰입형 경험을 생성합니다.

접근성: 다양한 인쇄 옵션을 통해 텍스트를 사용자 정의하고 수정할 수 있으므로 다양한 장치와 사용자 기본 설정에 따른 가독성과 가독성이 보장됩니다.

미학: 웹에서 가변 글꼴은 창의적인 디자인 아이디어에 영감을 주고 인쇄상의 경계에 도전하여 인쇄상의 표현과 실험을 위한 새로운 기회를 열어줍니다.

확장성: 가변 글꼴은 반응형 디자인에 적합하며 품질 손실 없이 확장 가능하므로 모든 크기나 해상도에서 텍스트가 명확하고 읽기 쉽도록 보장합니다.

가변 글꼴을 활용한 반응형 및 동적 타이포그래피 개념 소개

현대 웹 디자인을 통해 디자이너는 글꼴 변경과 반응형 및 동적 타이포그래피를 사용하여 더욱 유연하고 매력적인 타이포그래피 경험을 만들 수 있습니다. 아이디어를 분석해 보겠습니다.

글꼴의 변수: 가변 글꼴은 wght 및 특수 속성 MIDL 및 CONT를 포함하여 서체의 여러 변형이 포함된 단일 글꼴 파일입니다. 가변 글꼴은 모든 스타일에 대해 고유한 파일이 필요하고 이러한 변형 간의 유연한 전환을 가능하게 하는 기존 글꼴보다 타이포그래피 디자인에 더 많은 자유와 효율성을 제공합니다.

반응형 타이포그래피: 다양한 화면 크기, 해상도, 보기 환경에 쉽게 맞도록 텍스트를 디자인하는 것을 반응형 타이포그래피라고 합니다. 대형 데스크톱 컴퓨터부터 휴대폰 및 그 사이의 모든 것에 이르기까지 다양한 장치에서 최고의 가독성과 미적 아름다움을 보장합니다. 동적 글꼴 크기, 줄 간격 및 기타 타이포그래피 변경은 반응형 타이포그래피가 사용자 경험과 접근성을 향상시키는 데 도움이 됩니다.

동적 타이포그래피: 동적 타이포그래피는 상호 작용과 애니메이션을 타이포그래피 디자인에 통합하여 반응형 타이포그래피를 향상시킵니다. JavaScript 및 CSS(Cascading Style Sheets)는 디자이너가 콘텐츠 변경, 사용자 상호 작용 또는 스크롤 동작에 적합한 서체를 개발하는 데 도움이 됩니다. 다이내믹 타이포그래피는 wght, MIDL, CONT와 같은 구성 요소를 사용하여 시각적 매력과 상호 작용성을 생성하여 사용자의 관심을 끌고 사로잡습니다.

디자이너는 역동적이고 유연한 타이포그래피 방법을 다양한 글꼴과 결합하여 풍부하고 다양하며 몰입도가 높은 온라인 타이포그래피 경험을 만듭니다. 사용자 활동에 따라 서체를 동적으로 변경하거나, 중요한 정보를 강조하기 위해 텍스트 요소에 애니메이션을 적용하거나, 화면 크기에 따라 글꼴 두께와 크기를 조정하는 등 이러한 접근 방식은 디지털 디자인에서 창의성과 창의성을 발휘할 수 있는 많은 기회를 제공합니다.

Kyiv Sans의 다양한 글꼴 속성을 통해 디자이너는 흥미롭고 완벽한 타이포그래피 전환을 만들 수 있습니다. 이는 미적 매력과 유용성을 높여 웹 자료의 상호 작용과 사용자 친화성을 향상시킵니다.

가변 글꼴 속성 이해

다양한 서체는 기존의 정적 글꼴에는 없는 다양한 새로운 특성을 제공합니다. 변경 가능한 서체의 잠재력을 최대한 활용하려면 이러한 특성을 아는 것이 필요합니다. 다음은 몇 가지 기본 사항입니다.

무게(wght): 가변 서체는 연속적인 축을 따라 두께를 변화시킴으로써 여러 두께 수준 간에 원활한 전환을 가능하게 합니다. 디자이너는 단일 글꼴 파일 내에서 가벼운 것부터 매우 굵은 것까지, 그리고 그 사이의 모든 지점까지 다양한 두께를 표시할 수 있습니다.

중간 레이어 효과(MIDL): 이 사용자 정의 축을 사용하면 디자이너가 서체 내에서 중간 레이어 효과를 변경할 수 있습니다. 이를 통해 텍스트에 독특한 시각적 스타일을 부여할 수 있을 뿐만 아니라 디자인의 자유도와 독창성을 더욱 높일 수 있습니다.

대비(CONT): 또 다른 사용자 정의 축은 글꼴의 대비를 변경할 수 있는 CONT입니다. 디자인 요구 사항에 따라 대비를 동적으로 변경함으로써 텍스트의 가독성과 시각적 매력을 극대화하는 데 도움이 될 수 있습니다.

이러한 특성을 이해하고 적용하면 디자이너가 시각적으로 인상적인 서체를 제작하는 데 도움이 됩니다. 다양한 글꼴 특성을 갖춘 Kyiv Sans는 웹 타이포그래피의 유용성과 모양을 개선하는 특별한 사용자 정의 옵션을 제공합니다.

가변 글꼴에서 사용할 수 있는 추가 축 및 변형 개요

기존의 무게, 너비, 시각적 크기 수정을 뛰어넘어 가변 글꼴은 광범위한 개인화 선택을 제공합니다. 다음은 사용 가능한 축 및 변형에 대한 요약입니다.

가변 글꼴 디자이너가 사용할 수 있는 여러 등록 축은 OpenType 사양에 의해 정의됩니다.

• 너비(wdth): 이 축은 글꼴의 가로 확장 또는 축소를 제어하여 디자이너가 문자 너비를 수정할 수 있도록 합니다. 디자이너는 이 축을 조정하여 전체 높이를 변경하지 않고도 더 좁거나 더 넓게 나타나는 글꼴을 만들 수 있으므로 압축 스타일부터 확장 스타일까지 유연한 범위를 허용합니다.

• 기울기(slnt): 이 축을 사용하면 디자이너는 문자 형태의 구조를 변경하지 않고 문자에 이탤릭체와 같은 기울기를 적용할 수 있습니다. 경사 축은 일반적으로 전통적인 이탤릭체 효과를 모방하지만 수직 문자 형태를 유지하므로 다양한 스타일을 만드는 데 유용합니다.

• 기울임꼴(ital): 기울임꼴 축은 서체의 수직 버전과 기울임꼴 버전 간에 전환됩니다. 글자만 기울어지게 만드는 경사축과 달리 이탤릭체는 필기체 특성을 반영하여 글자를 완전히 새롭게 디자인하여 더욱 정통적인 이탤릭체 스타일을 제공합니다.

• 광학적 크기(opsz): 이 축은 다양한 크기에서 가독성을 최적화하기 위해 글꼴 디자인을 조정합니다. 예를 들어, 크기가 작을수록 획이 더 두꺼워지고 가독성이 높아지도록 카운터가 더 많이 열리는 반면, 크기가 클수록 더 세련되고 섬세할 수 있습니다. 이 축은 다양한 미디어의 반응형 타이포그래피에 특히 유용합니다.

• 등급(GRAD): 등급 축을 사용하면 전체 간격에 영향을 주지 않고 글꼴의 획 두께를 미세하게 조정할 수 있습니다. 무게를 조금만 늘리거나 줄여도 대비와 선명도가 향상되는 다양한 인쇄나 화면 환경에서 가독성을 높이는 데 유용합니다.

• 대비(CNTR): 이 축은 글꼴 내에서 굵은 획과 가는 획 간의 대비를 수정합니다. 디자이너는 대비를 조정하여 낮은 대비의 휴머니스트 스타일부터 고대비의 현대적인 디자인에 이르기까지 다양한 수준의 강조와 시각적 효과를 갖춘 글꼴을 만들 수 있습니다.

• X 높이(xhgt): 이 축은 글꼴의 대문자를 기준으로 소문자의 높이를 조정합니다. x 높이를 높이면 작은 크기에서 가독성을 높이거나 모던한 느낌을 연출할 수 있고, 높이를 낮추면 전통적이거나 격식 있는 느낌을 줄 수 있습니다.

등록된 축 외에도 가변 글꼴 작성자는 자신만의 맞춤 축을 지정할 수 있습니다. Kyiv Sans 관련: 다음으로 구성됩니다.

• 중간 레이어 효과(MIDL): 이 사용자 정의 축은 디자이너에게 더 많은 디자인 유연성을 제공하고 서체 내부의 특정 중간 레이어 효과를 변경하여 독창적인 스타일 측면을 추가할 수 있도록 해줍니다.

• 대비(CONT): 이 사용자 정의 축은 글자체에서 굵은 획과 가는 획 사이의 대비를 제어하는 ​​데 도움이 됩니다. 디자이너는 이 특성을 동적으로 변경하여 부드러운 대비부터 보다 명확한 차이까지 다양한 수준의 인쇄상의 표현력을 얻을 수 있습니다.

등록된 축 외에도 새 축을 구성하는 옵션을 통해 글꼴 디자이너는 글꼴의 모양과 특성에 대한 높은 수준의 사용자 정의와 정교한 제어를 달성할 수 있습니다. 예를 들어 MIDL 및 CONT와 같은 사용자 정의 축을 사용하면 디자이너는 글꼴의 특별한 품질을 맞춤화하여 유연하고 표현력이 풍부한 타이포그래피를 얻을 수 있습니다. 가변 글꼴 등록과 결합된 이러한 사용자 정의는 다양한 인쇄 효과를 생성할 수 있는 다양한 방법을 제공합니다. 예를 들어, MIDL(중간 레이어 효과) 축을 사용하면 디자이너는 서체 내의 고유한 중간 레이어를 변경하여 예술적 자유를 향상시키는 독특한 시각적 품질을 추가할 수 있습니다. 반면에 대비(CONT) 축은 굵은 획과 가는 획 사이의 변화를 제어하여 미묘한 대비부터 뚜렷한 대비까지 동적으로 조정할 수 있습니다. 디자이너는 Weight 및 Middle Layer Effect와 같은 축과 상호 작용하여 다양한 두께와 고유한 스타일을 갖춘 텍스트를 생성하여 서체 모양을 정밀하게 제어할 수 있습니다. 마찬가지로, 가중치와 대비의 변형을 결합하면 시각적 효과와 가독성의 균형을 유지하면서 다양한 정도의 굵기와 획 대비를 갖춘 텍스트를 생성할 수 있습니다. 이러한 예는 등록된 축과 사용자 정의 축이 모두 제공하는 비교할 수 없는 자유로움을 보여주며, 디자이너가 특정 미적 선호도와 디자인 목표에 맞게 서체를 정렬할 수 있도록 해줍니다.

CSS에서 가변 글꼴 구현

이제 변경 가능한 글꼴의 가능성에 매료되었으므로 CSS 기반 웹 프로젝트에 글꼴을 적용하는 방법을 조사해 보겠습니다. CSS는 이러한 적응형 서체의 기능을 적절하게 사용할 수 있는 수단을 제공합니다. 다양한 글꼴 파일과 그 특성을 제공할 수 있는 @font-face를 사용하여 먼저 글꼴을 정의하세요. 글꼴이 설정되면 다양한 CSS 속성을 사용하여 글꼴 축을 동적으로 변경할 수 있으므로 다양한 글꼴이 제공하는 가능성을 극대화할 수 있습니다.

글꼴 얻기

먼저 프로젝트에 원하는 가변 글꼴을 다운로드해야 합니다.
인터넷의 일부 웹사이트에서는 다양한 글꼴 파일에 액세스할 수 있습니다. 가장 자주 사용되는 글꼴 웹사이트는 다음과 같습니다.

• 네트워크 유형
• 글꼴 다람쥐
• Adobe 글꼴
• 폰트 스프링
• 구글 글꼴
• Vfonts.com

이 예에서는 Vfonts.com으로 이동하여 Kyiv Sans 가변 글꼴을 다운로드하겠습니다. ttf 또는 woff2 파일 형식은 잘 작동하지만 이 데모에서는 ttf를 사용합니다. 글꼴 파일을 ttf에서 woff2로 변환해야 하는 경우 everythingfonts.com으로 이동하세요:

위 스크린샷은 Vfont에 도착하면 보게 될 모습입니다.

우리는 프로젝트를 다음 단계로 나눕니다.

1. vfont 탐색: 가변 글꼴 리소스를 이용할 수 있는 웹사이트를 방문하세요.

2. Kyiv* 유형 선택: Kyiv* 유형 글꼴을 선택하면 해당 글꼴이 호스팅되는 Behance.net으로 리디렉션됩니다.

3. 다운로드 링크에 액세스: Behance 페이지에서 아래로 스크롤하여 글꼴을 다운로드할 수 있는 링크를 찾습니다.

4. Google 드라이브에서 다운로드: 다운로드 링크를 클릭하면 Google 드라이브 폴더로 이동됩니다. 거기에서 글꼴 파일을 다운로드하세요.

5. 파일 압축 풀기: 다운로드한 후 파일의 압축을 풀어 내용에 액세스하세요.

6. 글꼴 옵션 검토: 압축을 푼 폴더에는 선택할 수 있는 여러 옵션이 포함되어 있습니다.

   • 아이콘
   • 변수 없음
   • 변수

7. 가변 글꼴 선택: 가변 글꼴이 포함된 파일을 집중적으로 살펴보세요.

   • 세리프
   • 틸팅
   • 샌즈

8. Sans 글꼴 사용: Sans 버전의 글꼴을 설정하고 사용합니다. Sans 글꼴 가중치 파일은 360KB이며 이는 8개의 비변수 글꼴 파일을 사용하는 것과 동일합니다.

9. 장점 평가: 프로젝트에 가변 글꼴을 사용할 가치가 있는지 고려하세요. 일반, 굵은 글꼴, 기울임꼴 스타일만 필요한 경우 가변 글꼴을 사용할 필요가 없을 수도 있습니다. 그러나 변형에 대한 고급 제어가 필요한 경우 가변 글꼴이 매우 유용할 수 있습니다.

참고: 위의 파일은 TTF 형식입니다.

이제 바닐라 vite 프로젝트를 사용할 VSCode로 이동하겠습니다.
프로젝트 작업을 시작하려면 필요한 패키지를 설치해야 합니다. 아래 단계를 따라야 합니다:

1. 새 터미널을 엽니다.

2. 명령어 실행
   

   npm create vite@latest
   

3. 프로젝트 이름을 지정하세요.

4. 패키지 이름을 지정하세요.

5. 바닐라 프레임워크를 선택하세요.

6. JavaScript 변형을 선택하세요.

7. npm install을 실행하면 프로젝트를 협상하고 필요한 모듈을 설치하는 데 도움이 됩니다.

8. 종속성을 설정한 후 다음 명령을 사용하여 애플리케이션을 시작합니다.
   

   npm run dev
   

9. 브라우저에서 실행 중인 프로그램에 액세스하려면 http://localhost:your-port-number를 방문하세요.

프로젝트가 완료되면 원하는 애플리케이션을 구축하기 위해 수정할 수 있는 풍부한 모의 코드를 얻게 됩니다. 다운로드한 가변 글꼴은 공용 폴더에 있는 글꼴 폴더에 넣어야 합니다. style.css, main.js,  및 index.html에서 불필요한 모의 코드를 모두 교체할 예정입니다.

index.html 코드는 다음과 같아야 합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

이제 위 코드에서 무슨 일이 일어나고 있는지 설명해 보겠습니다.

본문 기본 글꼴 설정:

npm create vite@latest

• 목적: 전체 문서의 기본 글꼴을 'Kyiv Sans'로 설정합니다.
• 영향: 더 구체적인 스타일로 재정의되지 않는 한 본문 내의 모든 텍스트 요소는 이 글꼴을 상속합니다.

사용자 정의 글꼴 정의:

npm run dev

• 목적: @font-face 규칙을 사용하면 사용자 정의 글꼴을 정의할 수 있습니다.
• 글꼴 이름: 글꼴 이름은 'Kyiv Sans'입니다.
• 출처: 글꼴 파일은 /font/KyivTypeSans-VarGX.ttf에 있습니다.
• 글꼴 두께 범위: 이 글꼴은 0부터 1000까지의 두께 범위를 지원하여 가변 글꼴입니다.
• 글꼴 표시: 스왑을 사용하면 사용자 정의 글꼴이 로드될 때까지 대체 글꼴을 사용하여 텍스트가 즉시 표시됩니다.

요소:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

• 색상: 텍스트 색상을 빨간색 음영인 #bd0c0c로 설정합니다.
• 높이: 높이는 100vh로 설정되어

  요소는 뷰포트의 전체 높이에 걸쳐 있습니다.

  디스플레이: 그리드를 레이아웃으로 사용하여 그리드 속성을 사용할 수 있습니다.

  콘텐츠 중앙 정렬: place-content: center 콘텐츠를 수직 및 수평 중앙에 배치합니다.

  여백:

  주위의 기본 공백을 제거하려면 여백을 0으로 설정합니다.

  텍스트 정렬: 텍스트가 가로 중앙에 정렬됩니다.

  .variable-font 클래스 스타일 지정:
  

  body {
    font-family: 'Kyiv Sans';
  }
  

  • 글꼴군: 텍스트에 'Kyiv Sans'를 사용합니다.
  • 글꼴 크기: 글꼴 크기를 5rem(루트 요소의 글꼴 크기 기준)으로 설정합니다.
  • 줄 높이: 1.1은 줄 사이에 약간의 간격을 보장합니다.
  • 글꼴 두께: 초기에는 100으로 설정됩니다.
  • 글꼴 변형 설정: 가변 글꼴에 대한 사용자 정의 변형 설정을 활용합니다.
    • 'wght'는 가중치(초기 100)를 제어합니다.
    • 'CONT'와 'MIDL'은 이 글꼴의 사용자 정의 축이며, 초기에는 각각 250과 0으로 설정됩니다.
  • 전환: 500밀리초에 걸쳐 글꼴 변형 설정을 부드럽게 전환합니다.

  .variable-font에 대한 호버 효과 추가:
  

  npm create vite@latest
  

  • Font Weight on Hover: 요소 위에 마우스를 올리면 1000으로 변경됩니다.
  • 호버의 글꼴 변형 설정: 변형 설정을 다음과 같이 업데이트합니다.
    • 'wght'를 1000으로
    • 'CONT'는 250으로 유지됩니다.
    • 'MIDL'이 -1000으로 변경됩니다.
  • 효과: 사용자가 텍스트 위로 마우스를 가져가면 역동적이고 상호작용적인 시각적 효과를 만들어 가변 글꼴의 유연성을 강조합니다.

  마지막에는 다음과 같은 결과가 나올 것입니다.
  

  가변 글꼴을 사용하여 반응형 타이포그래피 만들기

  다양한 글꼴을 사용한 반응형 타이포그래피는 디자이너가 다양한 기기와 화면 크기에 완벽하게 적응할 수 있도록 함으로써 온라인 디자인을 변화시킵니다. 비교할 수 없는 다양성은 단일 글꼴 파일 내에서 두께, 너비 및 대비를 포함한 글꼴 속성을 지속적으로 변경할 수 있는 가변 글꼴에서 비롯됩니다. 디자이너는 CSS 및 미디어 쿼리를 사용하여 이러한 글꼴 속성을 동적으로 변경하여 가독성과 미적 매력을 향상시켜 데스크톱 모니터에서 휴대폰에 이르기까지 모든 장치에서 텍스트가 가장 잘 보이도록 할 수 있습니다. 단일 가변 글꼴이 여러 고정 글꼴 파일을 대체할 수 있으므로 광범위한 글꼴 로딩 필요성이 줄어들고 웹 사이트 성능이 향상됩니다. 이러한 유연성은 사용자 경험을 향상시킬 뿐만 아니라 설계 프로세스도 간소화합니다. 더욱 매력적이고 효율적이며 다양한 글꼴로 액세스할 수 있는 반응형 타이포그래피 없이는 현대적인 웹 디자인이 존재할 수 없습니다.

  미디어 쿼리: 화면 크기 적응의 대가

  미디어 쿼리는 반응형 웹 디자인의 초석이며 화면 크기 적응의 대가 역할을 합니다. 화면 너비, 높이, 해상도, 방향 등 사용자 장치의 기능을 기반으로 디자이너가 특정 CSS 스타일을 적용할 수 있습니다. 미디어 검색은 디자이너가 웹사이트가 노트북과 데스크톱 모니터부터 스마트폰과 태블릿에 이르기까지 다양한 기기에서 최상의 모습과 운영을 할 수 있도록 하는 데 도움이 됩니다.

  미디어 쿼리의 힘은 다양한 화면 크기에 맞는 유연하고 유동적인 레이아웃을 생성하는 능력에 있습니다. 미디어 쿼리를 사용하면 디자이너는 글꼴 크기를 변경하고, 그리드 레이아웃을 변경하고, 뷰포트 측정에 따라 특정 항목을 숨기거나 표시할 수도 있습니다. 이를 통해 사용 중인 장치에 관계없이 소재의 미적 매력과 접근성이 유지됩니다.

  미디어 쿼리는 다양한 화면 크기에 맞게 레이아웃이 조정되는 특정 위치인 중단점을 정의합니다. 다양한 장치를 대상으로 하는 이러한 중단점은 최소 너비, 최대 너비 및 기타 CSS 특성을 사용하여 설정됩니다. 예를 들어 미디어 쿼리는 화면 너비가 768픽셀 이하인 경우 모바일 친화적인 레이아웃을 사용하고 더 큰 디스플레이에는 다른 레이아웃을 사용하도록 지정할 수 있습니다.

  미디어 검색을 웹 디자인에 통합하면 접근성과 사용자 경험이 향상됩니다. 모든 플랫폼에서 미디어 쿼리는 텍스트를 읽을 수 있고 탐색이 직관적이며 자료가 잘 정리되어 있음을 보장하여 포괄적인 디지털 경험을 개발하는 데 도움을 줍니다. 반응형, 적응형, 사용자 친화적인 웹사이트를 만들고자 하는 웹 디자이너라면 다양한 디바이스 사용 시대의 미디어 쿼리를 먼저 배워야 합니다.

  예:
  

  npm create vite@latest
  

  이 예에서는 미디어 쿼리를 사용하여 화면 크기에 따라 글꼴 변형 설정과 글꼴 두께를 조정했습니다. 최대 너비가 600px인 장치의 경우 글꼴 크기가 3rem으로 줄어듭니다. :hover 효과에 따라 가중치 및 기타 변형이 조정됩니다. 너비가 601px에서 1200px 사이인 장치의 경우 글꼴 크기는 가중치와 변형이 조정된 4rem으로 설정됩니다. 너비가 1201px 이상인 기기의 경우 글꼴 크기는 5rem으로 원래 설정을 유지합니다.
  이러한 미디어 쿼리를 통해 글꼴이 다양한 화면 크기에 맞게 조정되어 다양한 장치에서 가독성과 사용자 경험이 향상됩니다.

  

  위 이미지는 소형 화면용 디스플레이입니다

  

  위 이미지는 중형 화면의 디스플레이입니다

  

  위 이미지는 대형 화면용 디스플레이입니다

  뷰포트 단위: 레이아웃을 유동적으로 만들기

  뷰포트 단위는 현대 웹 디자인의 강력한 도구로, 다양한 화면 크기에 원활하게 적응하는 유연하고 반응성이 뛰어난 레이아웃을 생성할 수 있습니다. 뷰포트 단위에는 브라우저의 뷰포트 크기에 상대적인 vw(뷰포트 너비) 및 vh(뷰포트 높이)가 포함됩니다. 하나의 vw는 뷰포트 너비의 1%에 해당하고, 하나의 vh는 뷰포트 높이의 1%에 해당합니다. 이러한 장치는 디자이너가 사용자 화면의 크기에 따라 요소의 크기를 조정하여 보다 역동적이고 적응 가능한 디자인을 생성할 수 있도록 도와줍니다. 예를 들어 뷰포트 단위로 글꼴 크기, 패딩 또는 여백을 설정하면 텍스트와 개체의 크기가 자동으로 조정되므로 여러 장치에서 일관된 모양이 유지됩니다. 이러한 적응성은 사이트가 대형 데스크탑 모니터나 작은 모바일 화면에 표시되는 것과 관계없이 콘텐츠가 읽기 쉽고 미학적으로 만족스러운 상태를 유지하도록 보장함으로써 사용자 경험을 향상시킵니다. 뷰포트 유닛을 사용하면 디자이너는 항상 변화하는 디지털 장치 지형에 맞게 쉽게 움직이는 적응형 레이아웃을 만들 수 있습니다.

  다음은 vw를 사용하여 뷰포트 너비에 따라 글꼴 크기를 조정하는 방법의 예입니다.
  

  npm create vite@latest
  

  이 예에서는 위 코드에서 .variable-font의 글꼴 크기 속성이 뷰포트 너비 vw 단위를 사용하여 설정되어 텍스트 크기가 뷰포트 너비에 반응하도록 만듭니다.

  미디어 검색과 다양한 글꼴 특성의 뷰포트 단위를 결합하여 모든 기기나 화면 크기에 우아하게 맞는 진정한 반응형 타이포그래피를 만들 수 있습니다. 이를 통해 누군가가 웹사이트에 대해 선택하는 액세스 방법과 관계없이 뛰어난 사용자 경험을 제공할 수 있습니다.

  가변 글꼴을 사용한 고급 인쇄 효과

  가변 글꼴을 사용하면 디자이너는 복잡한 타이포그래피 효과의 새로운 영역을 열어 고도로 맞춤화된 동적 텍스트 스타일을 만들 수 있습니다. 디자이너는 이제 두께, 너비, 사용자 정의 축 등의 특성을 지속적으로 조정하여 고정 글꼴로는 어려웠던 원활한 전환과 특이한 시각 효과를 만들 수 있습니다. 글꼴을 조정하여 무게, 대비 및 중간선을 동적으로 변경할 수 있으므로 텍스트 모양을 복잡하게 제어할 수 있습니다. 이러한 적응성은 다양한 화면 크기와 방향에 맞게 서체를 쉽게 조정할 수 있는 반응형 디자인에서 매우 강력합니다. 또한 대화형 애니메이션을 사용하면 텍스트가 마우스를 올리거나 클릭하는 등의 사용자 동작에 반응하여 흥미롭고 몰입감 넘치는 경험을 선사할 수 있습니다. 다양한 글꼴 특성과 결합된 뷰포트 단위는 타이포그래피를 유연하고 확장 가능하게 유지하여 모든 종류의 장치에서 가독성과 모양을 향상시킵니다. 이러한 정교한 기능을 사용하여 디자이너는 기존 타이포그래피의 가능성을 확장하여 시각적으로 인상적인 디지털 자료를 만들 수 있습니다. 온라인 타이포그래피의 경계를 넓힐 수 있는 몇 가지 흥미로운 방법을 살펴보겠습니다.

  유동적인 타이포그래피

  유동적 타이포그래피는 뷰포트 크기에 따라 텍스트 크기가 동적으로 조정되어 다양한 기기에서 원활하고 반응이 빠른 읽기 환경을 제공하는 디자인 방법입니다. 뷰포트 단위, 미디어 검색 및 변경 가능한 글꼴을 사용하면 유동적인 타이포그래피를 통해 화면 크기에 관계없이 텍스트를 이해하기 쉽고 시각적으로 균형 있게 유지할 수 있습니다. 이 방법을 사용하면 고정된 글꼴 크기가 필요하지 않고 원활한 변경이 가능하므로 매우 다양한 디스플레이 조건에 맞는 방식으로 가독성과 모양이 향상됩니다.

  예:
  

  npm run dev
  

  작동 방식:

  calc() 함수: 이 함수는 상대 단위 vw와 고정 값 rem을 결합하여 유동적인 스케일링 효과를 생성합니다. 예를 들어, 글꼴 크기는 calc(2rem 2vw)가 뷰포트 너비에 반응하여 기본 크기를 보장합니다.

  다양한 요소를 위한 유동적 타이포그래피: h1, h2, p와 같은 많은 요소는 유동적 타이포그래피를 사용하여 장치 전반에 걸쳐 텍스트 크기가 적절하게 조정되도록 보장합니다. calc() 함수는 뷰포트 너비에 따라 변경되는 배율 인수로 기본 크기를 제공합니다.

  가변 글꼴: 유동적인 타이포그래피와 변경 가능한 글꼴을 결합하면 뷰포트 크기에 따라 텍스트 속성을 동적으로 변경할 수 있습니다.
  이 방법을 사용하면 다양한 장치와 화면 크기에서 텍스트가 미적으로 보기 좋고 읽기 쉬운 상태로 유지됩니다.

  키네틱 타이포그래피는 애니메이션 텍스트를 통해 텍스트에 생명력을 부여하고 시청자의 마음을 사로잡는 흥미롭고 역동적인 시각 효과를 생성합니다. 이 방법은 JavaScript 및 CSS 애니메이션을 사용하여 텍스트 속성을 변경하여 동작과 상호 작용을 추가합니다. 가변 글꼴을 사용하는 예제에서 글꼴 두께에 애니메이션을 적용하기 위해 :hover 효과를 사용하여 키네틱 타이포그래피를 시연했습니다. 즉, 더 가벼운 두께에서 더 굵은 두께로 원활하게 이동하는 것입니다. 이는 콘텐츠를 강조할 뿐만 아니라 유동적이고 실시간 변경을 통해 다양한 글꼴이 사용자 상호 작용을 어떻게 향상시킬 수 있는지 보여줍니다. 키네틱 타이포그래피를 사용하면 디자이너는 텍스트의 시각적 매력과 유용성을 향상시켜 인터랙티브하고 흥미로운 디지털 환경에서 텍스트의 기본 역할을 강화할 수 있습니다.

  예: 마우스 오버 시 무게 애니메이션

  npm create vite@latest
  

  여기에서는 :hover에서 .variable-font 요소의 가중치를 일반 100에서 굵은 1000으로 애니메이션화하여 미묘하지만 영향력 있는 효과를 만드는 부드러운 전환을 사용합니다.

  이것은 다양한 글꼴이 제공하는 상상력의 기회 중 극히 일부일 뿐입니다. 역동적인 애니메이션부터 유동적인 레이아웃까지 독특하고 흥미로운 서체를 만들 수 있는 기회가 많습니다. 약간의 창의성과 CSS에 대한 이해만 있으면 웹 디자인 표준에 도전하고 놀라운 사용자 경험을 만들어낼 수 있습니다.

  결론

  가변 글꼴 - Kyiv Sans가 가장 잘 보여주는 기능으로 여러 글꼴 스타일을 단일 파일로 그룹화하여 웹의 타이포그래피를 변형합니다. HTTP 쿼리 수를 줄임으로써 본 발명은 프로세스를 단순화하고 설계 유연성을 높이며 성능을 향상시킵니다. 디자이너는 CSS의 변경 가능한 글꼴을 최대한 활용하여 다양한 화면 크기와 사용자 상호 작용에 완벽하게 맞는 반응형, 동적 서체를 생성할 수 있습니다.
  디자이너는 무게, 중간 레이어 효과, 대비와 같은 속성은 물론 미디어 쿼리, 뷰포트 단위와 같은 반응형 접근 방식을 사용하여 시각적으로 매력적이고 쉽게 접근할 수 있는 타이포그래피 경험을 만들 수 있습니다. 가변 글꼴은 유동성이 예술적 표현의 새로운 방향을 제시하므로 현대 웹 디자인에 꼭 필요한 도구입니다.

  자원

  • Netlify에서 호스팅되는 실시간 미리보기를 확인하세요
  • 소스코드 보기

  참고자료

  • 가변 글꼴
  • 오픈타입
  • 키예프 산스
  • 뷰포트
  • 서체
  • 등록된 축
  • 사용자 정의 축
  • @font-face
  • 네트워크 유형
  • 글꼴 다람쥐
  • Adobe 글꼴
  • 폰트 스프링
  • 구글 글꼴
  • Vfonts.com
  • ttf
  • 워프2
  • everythingfonts.com
  • Behance.net
  • 미디어 쿼리
  • 픽셀
  • 렘
  • 폭스바겐
  • 으아
  • 계산()

  위 내용은 동적 타이포그래피를 위한 가변 글꼴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!