Fluid Typography: 그것이 무엇인지, 왜, 어떻게 사용하는지 이해하기
게시 됨: 2022-10-26반응형 타이포그래피는 화면 크기의 다양성이 증가함에 따라 점점 더 중요해지고 있습니다. 그러나 기존의 반응형 디자인 기술에는 한계가 있으므로 더 많은 사람들이 웹사이트에 유동적인 타이포그래피를 구현합니다.
이 게시물에서는 유동적인 타이포그래피, 작동 방식 및 WordPress에서 구현되는 방식을 살펴봅니다.
플루이드 타이포그래피란?
Fluid typography는 텍스트가 화면 크기에 따라 자동으로 조정되는 반응형 타이포그래피 기술입니다. 화면 크기가 커질수록 글꼴 크기, 줄 높이, 문자 간격과 같은 활자체 값이 증가합니다. 마찬가지로 화면 크기가 작아지면 값이 줄어듭니다.
플루이드 타이포그래피와 전통적인 반응형 타이포그래피
전통적으로 디자이너는 중단점을 사용하여 글꼴 크기를 결정합니다. 예를 들어 웹 사이트는 모바일, 태블릿 및 데스크톱의 세 가지 중단점을 활용할 수 있습니다. 중단점은 장치 유형이 아니라 브라우저 너비에 따라 결정됩니다.
이 접근 방식의 문제는 화면 크기가 기기에 따라 크게 다르다는 것입니다. 따라서 중단점 사이 또는 그 부근의 화면 크기는 종종 디자인에 문제를 일으킬 수 있습니다. 예를 들어 거의 데스크탑 너비의 넓은 태블릿 화면이 너무 작게 보이는 타이포그래피로 끝날 수 있습니다.
이러한 문제를 해결하기 위해 설계자는 더 많은 중단점을 구현할 수 있지만 이는 유지 관리가 어려운 더 복잡한 코드로 이어집니다.
플루이드 타이포그래피의 작동 원리
Fluid typography는 최소값으로 시작하여 화면 너비가 커질수록 설정된 최대값에 도달할 때까지 증가합니다. 고속도로의 제한 속도와 같은 값을 생각해 보십시오. 최소 45mph의 속도를 유지해야 합니다. 상한선은 65mph이며 교통 흐름에 따라 속도를 선택합니다.
CSS 클램프 기능
Fluid typography는 CSS 클램프 기능을 사용하여 자동 크기 조정을 구현합니다. 클램프 함수에는 최소값, 기본 설정값, 최대값의 세 가지 값이 필요합니다. 기본 값은 계산된 숫자입니다. 이 기능은 최소값과 최대값 사이를 유지하면서 화면 크기에 상대적으로 필요한 기본 값을 결정합니다.
클램프 문은 다음과 같습니다.
클램프( 최소 , 선호 , 최대 );
글꼴 크기와 함께 작동하는 방법을 살펴보겠습니다.
클램프(1.5rem, 2vw + 1rem, 2.25rem);
최소값과 최대값에 rem 값을 사용하고 있습니다. Rem 값에 더 쉽게 액세스할 수 있습니다. 누군가가 브라우저를 확대하여 텍스트 크기를 늘리는 경우 유동적인 타이포그래피는 픽셀 단위로 값을 지정한 경우보다 적절하게 조정되어야 합니다.
기본 값은 계산입니다. "vw"는 뷰포트를 나타내므로 2vw는 뷰포트 너비의 2%입니다.
루트 글꼴 크기가 16px이고 뷰포트 너비가 800px인 경우 선호하는 텍스트 크기는 32픽셀 또는 2rem입니다.
800px x .02 = 16픽셀(또는 1rem)
1rem + 1rem = 2rem(또는 32픽셀)
괜찮아요. 계산을 할 필요가 없습니다. CSS 기능이 알아서 처리합니다.
또한 스타일시트를 작성할 때 대수학 기술을 터뜨릴 필요가 없습니다. 현대적인 유체 타이포그래피 편집기 와 같은 도구를 사용하여 클램프 문을 작성하는 것을 고려하십시오.
도구의 차트는 기본 값이 최소값과 최대값 사이에서 어떻게 변하는지 보기 위한 훌륭한 시각적 개체입니다.
Fluid Typography 사용 시 고려 사항
Fluid typography는 결함이 없는 것이 아닙니다. 일부 디자이너는 더 전통적인 방법으로 비슷한 결과를 얻을 수 있기 때문에 설정 가치보다 더 많은 문제가 있다고 주장합니다. 사용 여부와 사용 방법을 결정할 때 이러한 고려 사항을 염두에 두십시오.
플루이드 타이포그래피를 사용해야 하는 경우
Fluid typography는 제목 및 표시 텍스트에 탁월합니다. 카피만큼이나 디자인 요소인 거대한 텍스트 처리는 유동적인 타이포그래피의 완벽한 사용 사례입니다. 텍스트의 크기와 시각적 효과가 화면 크기와 일치하도록 하고 싶습니다.
플루이드 타이포그래피를 사용하지 말아야 할 때
반대로 최소값과 최대값의 차이가 크지 않으면 유동적인 타이포그래피가 잘 작동하지 않습니다. 본문, 태그, 작성자 이름 및 게시 날짜와 같은 텍스트 요소는 화면 크기 전반에 걸쳐 꽤 표준적일 것입니다. 클램프 기능을 구현하는 대신 기존 CSS로 처리할 수 있습니다.
항상 대체 값 설정
유동적인 타이포그래피를 사용할 때마다 브라우저가 클램프 기능을 지원하지 않는 경우를 대비하여 항상 대체 값을 포함해야 합니다. 모든 최신 브라우저는 클램프 기능을 지원하지만, 여전히 Internet Explorer가 고집스럽게 버티는 경우를 대비하여 폴백 값은 추가 보안을 제공합니다.
WordPress의 유동적인 타이포그래피
Fluid typography 지원은 Gutenberg 13.8에 추가되었으며 WordPress 6.1 에 포함될 예정입니다. 유동적인 타이포그래피 기능은 테마 작성자가 theme.json 파일에서 확장 가능한 글꼴 크기를 정의할 수 있는 기능을 제공합니다.
이 기능은 아직 개발 중이므로 베타 버전에 액세스하려면 Gutenberg 플러그인 을 다운로드해야 합니다. Make WordPress Themes 팀의 이 게시물에서 새로운 유동적인 타이포그래피 옵션을 테스트하고 구현하는 방법에 대해 자세히 알아볼 수 있습니다.
WordPress에서 유동적인 타이포그래피를 구현하는 것은 테마 수준에서 가장 쉽습니다. 자신만의 테마를 구축했다면 구텐베르크 플러그인을 다운로드하고 테스트를 시작하세요. 자신만의 테마를 만들거나 유동적인 타이포그래피 스타일시트를 작성하는 것이 귀하의 기술 수준을 조금 넘어서더라도 걱정하지 마십시오. 더 많은 테마가 블록과 전체 사이트 편집을 수용하는 것처럼 유동적인 타이포그래피가 새로운 테마 릴리스의 일부가 될 것으로 기대할 수 있습니다.
WordPress에서 새 사이트 및 타이포그래피 스타일 구축 및 테스트
웹 디자이너와 개발자는 유동적인 타이포그래피와 같은 새로운 아이디어와 디자인을 테스트할 공간이 필요합니다. Pressable에서는 이해합니다. 이것이 우리가 모든 고객에게 무제한 스테이징 사이트 를 제공하는 이유입니다. 새 테마 빌드를 테스트하거나 WordPress의 최신 베타 기능을 사용해 볼 수 있도록 필요한 만큼 만들 수 있습니다. 시작하는 것은 간단합니다. 계획을 선택하기 만 하면 클릭 몇 번으로 사이트를 만들 수 있습니다.
