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에서 확인할 수 있습니다.