사용자가 콘텐츠를 최대한 편안하게 읽을 수 있도록 글꼴을 사용자의 환경설정에 맞게 조정하는 방법입니다.
사용자를 디자인 프로세스에 참여시키는 것은 사용자, 디자이너, 개발자 모두에게 흥미로운 일입니다. 사용자는 환경에 도달하여 콘텐츠 소비를 원활하게 시작할 수 있으며, 사용자의 환경설정이 디자인 결과에 풍부하게 통합됩니다.
이 블로그 게시물에서는 가변 글꼴과 함께 CSS 미디어 쿼리를 사용하여 독서 환경을 더욱 조정하는 방법을 살펴봅니다. 글꼴 등급과 두께는 font-variation-settings
로 맞춤설정할 수 있으므로 어두운 모드 또는 고대비 모드와 같은 다양한 환경설정과 컨텍스트에 따라 미세 조정할 수 있습니다. 이러한 환경설정을 사용하여 사용자 환경에 맞게 가변 글꼴을 조정할 수 있습니다.
- 어두운 모드에서는 그라데이션이 약간 떨어집니다.
- 고대비를 사용하면 글꼴이 더 굵어집니다.
- 대비가 낮을수록 글꼴이 더 얇아집니다.
이 의미 있는 순간을 가능하게 하는 CSS 및 가변 글꼴의 각 부분을 알아보세요.
설정하기
CSS 및 글꼴 변형 설정 값에 집중할 수 있도록 하면서 읽고 볼 수 있는 자료도 제공할 수 있도록 다음은 작업을 미리 보는데 사용할 수 있는 마크업입니다.
<h1>Variable font weight based on contrast preference</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
labore aliquid ex, dicta corporis.
</p>
CSS를 추가하지 않아도 글꼴 크기는 이미 사용자 환경설정에 맞게 조정됩니다.
다음은 font-size
를 픽셀로 설정하면 모든 사용자 환경설정이 무시되는 방식과 글꼴 크기를 rem으로 설정해야 하는 이유를 보여주는 다른 데모 동영상입니다.
마지막으로, 다음과 같이 CSS를 사용하여 데모를 중앙에 배치하고 지원합니다.
@layer demo.support {
body {
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
h1 {
text-wrap: balance;
}
}
이 데모 설정을 사용하면 이 깔끔한 서체 UX 기능을 테스트하고 구현할 수 있습니다.
Roboto Flex 가변 글꼴 로드
적응형 전략은 맞춤설정을 위한 의미 있는 축이 있는 가변 글꼴에 따라 달라집니다. 특히 GRAD
및 wght
가 필요합니다. 이 도움말의 타겟팅 적응형 사용자 환경설정은 색 구성표와 대비에 관한 것으로, 둘 다 사용자의 원하는 환경설정에 맞게 이러한 축을 조정합니다.
CSS의 @font-face
API를 사용하여 가변 글꼴을 로드합니다.
@font-face {
font-family: "Roboto Flex";
src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}
그런 다음 일부 콘텐츠에 글꼴을 적용합니다. 다음 CSS는 모든 항목에 적용됩니다.
@layer demo.support {
body {
font-family: Roboto Flex;
}
}
CSS 맞춤 속성 및 미디어 쿼리로 성공을 거두세요
글꼴을 로드하면 사용자 환경설정을 쿼리하고 이에 맞게 가변 글꼴 설정을 조정할 수 있습니다.
환경설정이 없는 경우의 설정(기본값)
다음 초기 스타일은 기본 스타일이 되거나 다른 방식으로 볼 수 있는 환경설정이 없는 사용자를 위한 스타일입니다.
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
}
고대비 환경설정이 적용된 경우의 설정
시스템 설정에서 고대비를 선호한다고 표시한 사용자의 경우 --base-weight
값을 400
에서 700
로 늘립니다.
@layer demo {
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
}
이제 읽을 때 대비가 더 높아졌습니다.
저대비를 선호하는 경우의 설정
시스템 설정에서 낮은 대비를 선호한다고 표시한 사용자의 경우 --base-weight
값을 400
에서 200
로 줄입니다.
@layer demo {
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
}
이제 읽을 때 대비가 줄어듭니다.
어두운 모드 환경설정이 적용된 경우의 설정
@layer demo {
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
이제 어두운 배경에 밝은 색상과 밝은 배경에 어두운 색상의 인식적 차이가 고려되었습니다.
총정리
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
또는 재미를 위해 CSS 중첩을 함께 사용해 보세요.
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
@media (prefers-contrast: more) { --base-weight: 700 }
@media (prefers-contrast: less) { --base-weight: 200 }
@media (prefers-color-scheme: dark) { --base-grade: -25 }
}
}
그 결과 사용자의 환경설정에 맞게 글꼴을 조정하는 독서 환경이 만들어집니다. 전체 소스 코드는 아래의 Codepen에서 확인할 수 있습니다.