가변 글꼴 : 모든 것을 바꿀 수 있고 성능에 좋은 글꼴입니다.

글꼴이 많기 때문에 웹이 천천히로드됩니까? 웹이 발생하는 고전적인 문제

우리가 아름답게 디자인하려는 웹 사이트를 느낀 적이 있습니까? 다양한 글꼴을 사용하여 치수처럼 보이게합니다. "배우"로 판명되어 웹 사이트가 믿을 수 없을 정도로 느리게 다운로드 할 수 있습니까? 우리는 대담한 주제 (대담한), 일반 내용 (일반) 및 약간의 가벼운 단어를 원하지만 옛날에는 그렇게하기를 원합니다. 즉, 3 개의 글꼴 파일 (.woff, .woff2, ttf) 이상을 다운로드하려면 사용자의 브라우저를 주문해야합니다. 각 파일에서 자체 크기가 충분하고 스타일의 무게가 많을수록로드해야 할 파일 수가 더욱 곱해집니다. 이것은 사용자가 좌절 할 때까지 오랫동안 기다릴 수있는 성능 문제의 "시작점"입니다. 우리가 준비한 아름다움을보기 전에 웹 사이트를 닫을 수 있습니다.

‍

삽화를위한 프롬프트 : 웹 사이트 디자인 공연은 컴퓨터 앞 사원에 앉아 있습니다. 화면에는 적색으로 상승하는 로딩 속도 그래프가 있습니다. 그리고 파일이 화면에서 떠오르는 많은 글꼴 파일 아이콘이 있습니다. 무게와 하중 부담을 나타냅니다

왜 웹을 느리게 만들기 위해 많은 스타일의 글꼴을 사용합니까?

이 문제의 주요 원인은 매우 간단합니다. 정적 글꼴의 세계에서 오랫동안 익숙해 온 "전통적인 글꼴"아키텍처는 각 "스타일"또는 각 "무게"는 완전히 별도의 파일에 저장됩니다. (700) 4 개의 다른 글꼴 파일을 다운로드해야합니다. 누군가가 우리 웹 사이트에 갈 때마다 상상해보십시오. 그의 브라우저는 해당 파일을 다운로드하려면 서버에 요청을 4 번 제출해야합니다. 더 많은 요청과 더 큰 파일 크기. 페이지로드를 다운로드하는 데 사용되는 시간 (페이지로드 시간)은 그림자로 더 길어집니다. 렌더 블로킹 리소스를 유발하는 주요 원인 중 하나입니다 . 이것이 Google Pagespeed Insights가 좋아하지 않는 것입니다. 그리고 그것은 우리 웹 사이트의 성능에 직접 부정적인 영향을 미칩니다.

‍

그림을위한 프롬프트 : 왼쪽의 간단한 인포 그래픽 비교, 4 개의 상자 (빛, 일반, 중간, 대담함)가있는 "정적 글꼴", 오른쪽 브라우저로 전송됩니다. 화살이 시간이 덜 걸리는 것을 지적하면서

글꼴이 많아서 웹 사이트를 느리게하십시오. 예상보다 더 심각한 결과를 초래할 것입니다

글꼴 파일로 인해 웹 사이트의 느린 다운로드는 사용자가 귀찮게 만드는 작은 문제가 아닙니다. 그러나 그것은 우리의 비즈니스 목표의 체인에 영향을 미칩니다. 상상해보십시오 : 1. 사용자 경험 파괴 : 아무도 기다리는 것을 좋아하지 않습니다. 많은 연구에 따르면 1-3 초만 적재 할 수 있으며 30%이상의 수익률을 증가시킬 수 있습니다. 2. SEO 순위 : 페이지 속도 (페이지 속도)는 Google이 오랫동안 순위를 매기는 중요한 요소 중 하나입니다. 느린 웹 사이트는 품질이 낮은 것으로 간주됩니다. 검색 결과에서 높은 순위를 매기는 어렵습니다. 3. 전환율 감소 : 사용자가 좌절하고 웹 사이트를 먼저 눌렀을 때. 그를 고객으로 바꿀 수있는 기회. (구매, 양식 작성 또는 회원 신청에 관계없이) 즉시 0이됩니다. 4. 이유에 의한 자원 낭비 : 환경 친화적이고 에너지 웹을 만드는 데 중점을 둔 지속 가능한 웹 디자인 과 반대쪽으로 많은 파일을 다운로드해야합니다 이 문제를 만성적으로하는 것은 우리가 매일 무료로 고객과 비즈니스 기회를 모두 잃는 것과 같습니다.

‍

삽화를위한 프롬프트 : "느린 글꼴로드"에서 시작하여 부정적인 영향을 나타내는 Dai Gram 이미지는 "잘못된 사용자 경험"(임의의 얼굴)으로 이어지고 "높은 바운스 속도"(화살표가 웹 사이트에서 튀어 나왔음) 및 "낮은 SEO RANNKING & CONVERION"으로 이어집니다.

솔루션은 "가변 글꼴"입니다. 모든 것을 할 수있는 유일한 글꼴입니다.

그리고 기술은 우리에게 탈출구를 주었다. 그것은 ** 가변 글꼴 ** 또는 "변경"할 수있는 글꼴입니다. 그것의 개념은 글꼴의 혁명입니다. 모든 무게와 모든 스타일에 대해 별도의 파일을 갖는 대신. 가변 글꼴은 ** "하나의 파일"**에 모든 것을 포함합니다! 이 천재 파일은 글꼴의 주요 핵심 데이터를 유지합니다. 디자이너 또는 개발자는 CSS 코드를 통해 독립적으로 "값 조정"을 할 수 있습니다. 축 (축). 일반적인 조정은 다음과 같습니다.

• 무게 (wght) : 캐릭터의 두께는 얇은 곳에서 검은 색으로 지속적으로.
• 너비 (wdth) : 너비를 조정할 수 있습니다.
• 경사 (SLNT) : 문자 텍스트를 조정합니다 (이탤릭체와 유사하지만 정도를 조정할 수 있음).
• 광학 크기 (OPSZ) : 다양한 크기의 디스플레이에 적합하도록 문자의 세부 사항을 조정하십시오.

변수 글꼴로 변경한다는 것은 브라우저가 하나의 파일 글꼴 파일 만 다운로드하려면 HTTP 요청 수를 만들고 거대한 파일 크기를 줄이려는 것을 의미합니다. 최신 웹 사이트 디자인 트렌드 와 일치하는 변화이며, 동시에 아름다움과 최고 성능을 모두 강조합니다.

‍

그림을위한 프롬프트 : 유일한 'A'문자를 보여주는 아름다운 그래픽이지만 무게, 너비, 경사, 광학 크기의 4 가지 슬라이더 컨트롤이 있습니다.

실제 예제 : 뉴스 웹 사이트가 변수 글꼴로 전환 할 때

더 명확하게하기 위해 메인 헤드 라인 (Black 900), Bold 700), 카테고리 500 이름 (중간 500) 및 뉴스 내용 (일반 400)을 포함하여 첫 번째 페이지에서 정적 글꼴을 사용하는 데 사용되는 온라인 뉴스 웹 사이트를 생각해보십시오. 특히 인터넷이 아닌 휴대 전화에서 개발 팀은 원래 패밀리 글꼴의 가변 글꼴로 전환하여 새로운 웹 사이트 인 다시 시작하기로 결정했습니다. 파일 크기는 120kb로만 감소합니다! 결과는 다음과 같습니다. 1. 페이지로드 시간은 거의 2 초 동안 감소했습니다. 처음부터 사용자에게 깊은 인상을줍니다. 2. Google Pagespeed Performance Section에서 55에서 92까지의 통찰력 : SEO를 명확하게. 3. 바운스 속도가 15%감소했습니다. 웹의 사용자가 더 길어졌습니다. 더 많은 뉴스와 4. 디자인 팀은 더 자유입니다. 그들은 650 (반대)의 무게와 같은 디자인에 "맞는"글꼴 무게를 만들 수 있습니다. 두껍고 싶지 않은 부분의 경우, 대담한 대담한 것은 매체보다 더 두드러 지므로 정적 글꼴에서는 불가능합니다.

‍

삽화를위한 프롬프트 : 왼쪽의 뉴스 웹 사이트에 들어가는 휴대 전화 화면의 전 및 후 화면의 이미지를 비교 (이전)에는 피벗로드와 PagesPeed 그래프가 있습니다. 올바른 점수 (후) 컨텐츠는 전체 결과를 보여주고 PagesPeed 그래프는 녹색 점수가 높습니다.

가변 글꼴을 사용하고 싶습니까? 무엇을해야합니까? (즉시 시작)

가변 글꼴의 시작은 어렵지 않습니다. 특히 CSS에 이미 익숙한 사람들에게. 이것은 간단한 단계입니다. 즉시 따라갈 수 있습니다.

1. 올바른 변수 글꼴을 찾으십시오. 시작의 가장 좋은 소스는 Google Fonts . "가변 글꼴 만 표시"채널을 선택하십시오. 무료로 제공되는 많은 양질의 글꼴을 찾을 수 있습니다. 또는 신뢰할 수있는 다른 출처에서 시도 할 것입니다.
2. CSS의 글꼴 발표 : @글꼴을 사용하여 글꼴을 실행하십시오. 그러나 각 파일을 발표하는 대신 하나의 파일 만 발표하고 지원하는 축 범위를 지정합니다. 예 : @font-face {
font-family : inter vf ';
src : url ( 'inter-variable.wof2') 형식 ( 'woff2-varivests');
중량
: nmal;
}
3. 시트 스타일로 전화 : 발표 후 글꼴과 같은 정적 글꼴과 같은 무게를 실행할 수 있습니다 : 700; 또는 자격 글꼴 변량 설정을 다른 코어를 제어합니다. H1 {
Font-Family : 'Inter VF', Sans-Serif;
글꼴 중량 : 800; / * 두께 조정 * /
}
p {
font-family : inter vf ', sans-serif;
글꼴 중량 : 450; 벌금 * /
font -variation : '-5; / * 약간 조정 * /
}
4. 글꼴 로딩 계획 : 최상의 성능을 얻으려면 글꼴 드리 스플레이 사용과 같은 글꼴 로딩 전략을 가변 글꼴로드를 기다리는 동안 백업 글꼴로 메시지를 표시하려면

MDN Web Docs의 변수 글꼴 가이드를 읽는 것이 좋습니다 이는 개발자의 훌륭한 소스입니다.

‍

삽화를위한 프롬프트 : 단계별 3 단계이 자극 : 1. 배율 아이콘은 Google 글꼴 로고를보고 있습니다. @font-face 및 font-variation-settings를 사용한 코드 코드 . 3.

사람들이 가변 글꼴에 대해 궁금해하는 질문.

Q : 브라우저의 대부분은 가변 글꼴을 지원합니까?
답 : 지원! 오늘날 가장 인기있는 브라우저 (Chrome, Firefox, Safari, Edge). 데스크탑과 모바일 모두 수년간 가변 글꼴을 지원해 왔으며 대부분의 사용자 (95%이상)가 귀하의 웹 사이트를 확실히 볼 수 있다는 확신을 가지고이를 사용할 수 있습니다.

Q : 어떤 글꼴이 가변 글꼴인지 어떻게 알 수 있습니까?
답변 : 관찰하기 가장 쉬운 방법은 글꼴 서비스 제공 업체를 보는 것입니다. Google 글꼴에는 "가변"표시가 있습니다. 또는 일반 파일로 다운로드 한 경우 변수 글꼴 파일에는 'variable', 'vf'또는 축 이름이 있습니다. 파일 이름과 일반적으로 파일 크기는 모든 스타일의 정보를 포함하기 때문에 단일 정적 글꼴 파일보다 큽니다.

Q : 가변 글꼴은 항상 정적 글꼴보다 낫습니까?
답변 : 대부분의 "예", 특히 프로젝트가 가변 글꼴을 사용하여 2-3 개 이상의 스타일을 사용하려는 경우. 하나의 파일은 더 나은 성능을 제공합니다. 그러나 웹 사이트가 매우 쉽고 단 하나의 스타일 만 사용하는 경우 (예 : 일반). 단일 정적 글꼴을 사용하는 것이 약간 더 작을 수 있습니다. 그러나 가변 글꼴을 선택하면 향후 설계를 조정할 수있는 유연성이 향상됩니다.

Q : 가변 글꼴을 사용하면 UI/UX 설계에 영향을 미칩니 까?
답 : 더 나은 방법으로 영향을 미칩니다! 역할 기반 디자이너에게 인쇄물 (타이포그래피)을 구금하는 데있어 자유와 해상도를 제공합니다. 이 최신 기술을 사용하여 최상의 경험을 창출하는 UX/UI 설계 서비스가 필요한 경우 모든 것을 완벽하게 조정할 수 있습니다 이것은 전문가들이 당신을 도울 수있는 것입니다.

‍

그림을위한 프롬프트 : 질문 (?) 및 짧은 답변이있는 정확한 마크 (✓)가있는 Q & A 스타일 이미지. 각 질문마다 이해하기 쉽습니다. 다양한 브라우저 로고 (Chrome, Firefox, Safari, Edge)가 포괄적 인 지원을 전달하는 것을 보여주는 것을 보여줍니다.

요약 : 이제 더 빠르고 더 나은 웹 사이트를 위해 가변 글꼴로 업그레이드 할 때입니다.

이 시점에서 우리는 가변 글꼴이 디자이너를위한 새로운 장난감 일뿐 만 아니라 웹 사이트 성능 문제를 직접 해결하는 데 도움이되는 "게임 변경 도구"라는 데 이미 동의했습니다. 많은 정적 글꼴 다운로드에서 가변 글꼴로 변경됩니다. 로딩 속도, 더 나은 사용자 경험, 높은 SEO 순위 및 가장 중요한 것은 무제한 디자인의 독립성 측면에서 막대한 수익을 제공하는 투자입니다. 모든 당사자에게 좋은 영향을 미치는 결정입니다. 웹 소유자, 개발자, 디자이너 및 특히 "사용자"

타이포그래피의 아름다움을 더 이상 잃어버린 속도로 교환해야합니다. 마음을 열고 가변 글꼴을 사용하여 오늘부터 프로젝트에 적용하십시오. 그리고 "아름다운"과 "빠른"웹 사이트를 만드는 것이 실제로 가능하다는 것을 알게 될 것입니다. 그리고 당신이 생각하는 것보다 쉽습니다!

‍

삽화를위한 프롬프트 : 하늘로 올라가는 로켓을 공연하는 강력한 그래픽에는 "가변 글꼴"이라는 단어가 부착되어 있으며 Heart (사용자 사랑) 및 SEO 순위와 같은 다양한 아이콘을 통과하는 경로가 있습니다.

‍