Divi 5로 글꼴 및 글꼴 크기 관리

글꼴과 타이포그래피는 사이트의 톤을 설정합니다. 올바르게 얻으면 브랜드에 도움이되고 가독성을 향상시킬 수 있습니다. Divi 5는 글꼴로 작업하면 빠르고 쉽게 작업합니다. 디자인 변수 및 옵션 그룹 사전 설정과 같은 Divi의 새로운 기능을 사용하면 글꼴 설정이 쉬워집니다.

이 게시물은 Divi 5에서 글꼴과 글꼴 크기를 관리하는 방법을 알려주고 장치 전체에서 아름답게 비늘을 비축하는 반응 형 타이포그래피를 만듭니다.

Divi 5는 새로운 웹 사이트 빌드를위한 준비가되었지만 우리는 뒤로 호환성 시스템에 마무리 터치를하고 있습니다. 그 동안 D4에 구축 된 업데이트 사이트를 유지하십시오. 그 변화가 언제 발생하는지 알려 드리겠습니다.

새로운 웹 사이트 글꼴을 통해 생각할 때 고려 사항

새 사이트를 시작할 때 글꼴 선택은 사용자의 첫인상을 형성합니다. 타이포그래피가 콘텐츠를 지원하는지 확인하기 위해이 점을 고려하십시오.

• 가독성 : 특히 신체 텍스트에 대해 명확한 글꼴을 선택하십시오.
• 일관성 : 글꼴을 제한하십시오 - 2 ~ 3 개가 가장 잘 작동하며 제목에는 하나 이상, 신체 텍스트 용은 하나 이상입니다.
• 응답 성 : 글꼴이 다양한 화면 크기 (이상적으로 320px ~ 1440px)에 적응해야합니다.
• 호환성 : 디스플레이 문제를 피하기 위해 웹 안전 또는 인기있는 글꼴을 선택하십시오.

Divi 5에서 글꼴 및 글꼴 크기를 관리하는 방법

Divi의 도서관에서 미리 메이드 레이아웃을 사용해 봅시다. 우리는“비즈니스 CV”팩에서 방문 페이지 레이아웃을 선택하고 Divi 5의 새로운 기능을 사용하여 타이포그래피를 개조합니다. 기존 Divi 5 사이트가 있지만 타이포그래피를 개선하려면이 레이아웃을 사용하지 않고도 동일한 단계를 따를 수 있습니다.

1 단계 : 글꼴 페어링 선택

좋은 글꼴 페어링 블렌드 스타일과 가독성. Google Fonts는 Divi에 내장되어 있고 사용하기 쉽기 때문에 안전한 내기입니다.

아래 예제에서는 레이아웃 팩의 제목 및 바디 텍스트에 Poppins 사용을 고수합니다. Lora와 Roboto도 페어링 할 수 있습니다.

2 단계 : 1 차 헤더 및 본문의 글꼴 설정

이제 글꼴을 선택 했으므로 Divi를 사용하여 웹 사이트에 추가 할 수 있습니다. 비주얼 편집기에서 왼쪽 상단에서 변수 관리자를 엽니 다. Divi의 디자인 변수를 사용하면 웹 사이트에서 글꼴을 전 세계적으로 제어 할 수 있습니다.

기본 제목 및 신체 글꼴에는 두 가지 기본 글꼴 변수가 있습니다. 글꼴 섹션으로 이동하여 " Poppins "를 제목 글꼴로, " Roboto "를 바디 글꼴로 설정하십시오.

디자인 및 브랜드 요구 사항과 일치하는 모든 것에 대한 글꼴 설정

이 시점에서 브랜드 색상이 설계 변수로 설정되어 있는지, 특히 텍스트에서 해당 색상을 사용할 계획 이라면도 좋은 생각 일 수도 있습니다.

입력 완료시 변수를 저장하십시오.

3 단계 : 글꼴 크기 생성

이제 더 많은 참여 부분을 위해. 모든 장치 크기에서 타이포그래피를 잘 보이게하는 방법을 생각하는 것이 가장 좋습니다. Divi 5에는 두 가지 옵션이 있습니다. 첫 번째이자 선호되는 옵션은 clamp ()를 사용하는 것입니다. 두 번째는 다양한 중단 점에서 글꼴을 여러 번 설정하는 것입니다.

각 제목 레벨, 차체 및 기타 텍스트 상황에 대한 글꼴 크기를 만드는 방법은 전적으로 귀하에게 달려 있습니다.

clamp ()가있는 유체 타입.

클램프 ()를 사용하면 최소값, 선호 값 및 최대 값을 설정할 수 있습니다. 다른 게시물에서는 clamp ()에 대해 깊이 들어가서 해당 값을 쉽게 파악할 수있는 방법을 제공합니다. 그러나 예는 다음과 같습니다.

이 레이아웃에는 기본 H1 크기와 첫 번째 섹션에서 사람의 이름에 대한 고유 한 (및 더 큰) H1 크기가 있습니다. 우리는 위의 크기 차트에서 동일한 원리를 수행하고 더 작은 바디 글꼴 변화를 추가했습니다.

간단한 HTML 문서에서 글꼴 크기를 테스트하여 분리 된 것을 볼 수 있습니다 (Divi 내부에서도 수행 할 수도 있음). 다음은 글꼴 페어링으로 위의 글꼴 크기가 어떻게 보이는지입니다.

글꼴 크기에 익숙하면 설계 변수로 추가 할 수 있습니다. 식별 할 수있는 이름을 부여하고 오른쪽에 값을 붙여 넣으십시오.

중단 점이있는 고정 장치

Clamp ()는 글꼴 크기에 가장 다재다능한 옵션이지만 많은 사용자는 여전히 픽셀이나 REM과 같은 고정 값을 사용합니다. Divi의 사용자 정의 가능한 중단 점과 함께 사용하여 필요에 따라 글꼴을 위아래로 확장 할 수 있습니다.

위의 10 Clamp () 값 대신에 유사한 효과에 대한 값 수는 트리플 트리플이므로 30 개 개별 값이됩니다). 이 값으로 변수 관리자를 채우는 것이 반드시 권장되는 것은 아니지만 원하는 경우 할 수 있습니다.

각 중단 점에 대한 크기 구조를 구축하고 다음 단계로 전달할 수 있습니다. 설계 변수로 배치하는 대신 옵션 그룹 및 요소 사전 설정에 직접 적용 할 수 있습니다.

5 단계 : 가변 관리자에서 사전 설정으로 글꼴 크기 추가

숫자 변수가 설정되거나 최소한 공식화되면 사전 설정에 적용 할 때입니다. 옵션 그룹 사전 설정에 가장 적합한 사용 사례 중 하나는 타이포그래피입니다. 제목/제목 필드 (예 : 제목, 블러 브, 아코디언 및 사람 모듈)를 사용하는 모든 모듈에 사용할 수있는 7 개의 제목/제목 옵션 그룹 사전 설정을 만들 수 있습니다.

텍스트 옵션 그룹에 대해서도 마찬가지입니다. 나는 두 개의 (2) 사전 설정을 설정할 수 있으며 (정상과 작은 신체 텍스트를위한 하나)를 설정할 수 있으며 텍스트 옵션 그룹을 사용하는 모든 모듈은 해당 스타일을 사용할 수 있습니다. 제목 및 텍스트 스타일의 경우 전체 웹 사이트 전체에서 사용할 수있는 모든 다양한 모듈에 요소 사전 설정으로 해당 스타일을 적용하는 것보다 훨씬 효율적입니다.

고정 값을 중단 점에 할당합니다

아래 비디오는 여러 중단 점에서 고정 값을 선택한 기본 단계를 보여줍니다. 텍스트 모듈을 클릭하고 디자인 탭으로 이동하여 텍스트 옵션 그룹 위로 이동하고 OG 아이콘을 클릭하고 새 사전 설정을 만들고 각 중단 점에서 스타일을 적용합니다. 오른쪽 사이드 바의 하단으로 스크롤하여 사전 설정을 저장하십시오 ( 매우 중요합니다 ). 당신이 생각해 낸 것만 큼 많은 텍스트 변형에 대해 이것을 반복하십시오 (작고 규칙적이며 큰 옵션과 같이).

OG 사전 설정을 할당 해당 옵션 그룹의 기본 사전 설정 으로 가장 많이 사용할 것으로 예상됩니다. 옆에 별 이 표시되면 현재 기본값입니다 (다른 모듈 스타일이나 요소 사전 설정이 적용되지 않는다고 가정하면 사이트에 적용됩니다).

클램프 () 함수 할당 (더 쉬운)

Clamp () 함수와 함께 설계 변수를 사용할 때 프로세스가 유사하지만 훨씬 쉽습니다. 아래의 예제에서 옵션 그룹 레벨에서 두 가지 제목 크기를 설정했습니다. 위의 유일한 차이점은 값을 붙여 넣지 않고 이전에 설정 한 변수를 사용한다는 것입니다. OG 사전 설정을 설정하는 동안 기본 글꼴을 선택하고 원하는대로 색상을 설정하십시오. 어떤 사람들은 대신 모듈 레벨에서 색상을 설정하는 것을 좋아하지만 당신에게 달려 있습니다.

각 H1-H6 제목 레벨을 새로운 사용자 정의 옵션 그룹 사전 설정 으로 설정합니다.

생성 한 옵션 그룹 사전 설정을 사용 하여이 사전 설정을 레이아웃 제목에 적용하십시오. 옵션 그룹 사전 설정의 장점은 텍스트, 블러 브 및 헤더 모듈과 같은 해당 옵션 그룹 내 모듈에서 작동한다는 것입니다.

Divi 5의 글꼴 모범 사례

타이포그래피를 극대화하려면이 팁을 명심하십시오.

• 항상 글로벌 글꼴 변수를 조기에 설정하십시오.
• 일관된 간격과 크기를 사용하십시오 (예, 문자 간격 및 라인 높이를 설계 변수로도 설정할 수 있습니다).
• 스크린 크기에 걸쳐 반응 형 뷰를 정기적으로 미리보기.
• 너무 많은 글꼴이나 글꼴 무게를 피하십시오.

Divi 5의 타이포그래피는 신선한 공기의 숨결입니다.

이제 Divi의 최신 기능 덕분에 완전한 타이포그래피 시스템을 소유하고 있습니다.

글꼴은 디자인 변수로 사용됩니다. 클램프 ()를 사용할 때 글꼴 크기와 동일합니다. 또는 맞춤형 브레이크 포인트 7 개를 모두 운동하려면 해당 경로도 사용할 수 있습니다.

옵션 그룹 사전 설정은 전체 사이트에서 이러한 선택을 쉽게 적용합니다. 건물 전체에서 글꼴 크기를 조정하는 것은 설계 변수로 설정되므로 더 쉽습니다. 어쨌든 디자인은 날카 로워지고 빌드 시간이 줄어 듭니다.

Divi 5는 디자인 시스템을 업그레이드하는 많은 새로운 기능을 출시했습니다. 오늘 Divi 5에 새 사이트를 구축하여 모든 최신 기능을 활용하십시오. 기존 웹 사이트를 Divi 5로 마이그레이션하기 위해 조금 더 기다리는 것이 좋습니다.