CSS로 사용자 환경설정에 맞게 서체 조정

사용자가 콘텐츠를 최대한 편안하게 읽을 수 있도록 글꼴을 사용자 환경설정에 맞게 조정하는 방법입니다.

Adam Argyle

사용자를 설계 프로세스에 참여시키는 것은 사용자, 디자이너, 개발자 모두에게 흥미로운 시간이었습니다. 사용자는 환경에 도착하여 콘텐츠를 원활하게 소비할 수 있으며, 환경의 디자인 결과에 사용자의 환경설정이 풍부하게 통합됩니다.

이 블로그 게시물에서는 가변 글꼴과 CSS 미디어 쿼리를 사용하여 읽기 환경을 더욱 맞춤설정하는 방법을 살펴봅니다. 글꼴 등급과 두께는 font-variation-settings로 맞춤설정할 수 있으므로 어두운 모드나 고대비 선호와 같은 다양한 환경설정과 컨텍스트에 따라 미세 조정할 수 있습니다. 이러한 환경설정을 사용하여 해당 사용자 환경에 맞게 가변 글꼴을 맞춤설정할 수 있습니다.

  • 어두운 모드의 그라데이션이 약간 감소합니다.
  • 고대비에는 더 굵은 글꼴이 사용됩니다.
  • 대비가 낮으면 글꼴이 더 얇아집니다.
https://codepen.io/argyleink/pen/mdQrqvj

이 의미 있는 순간을 가능하게 하는 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;
  }
}

지금까지의 데모 스크린샷 미리보기입니다. 이제 어두운 테마와 밝은 테마 모두에서 글꼴이 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에서 확인할 수 있습니다.