서체

텍스트 스타일을 지정하지 않으면 브라우저에서 자체 기본 스타일을 적용합니다. 이를 사용자 에이전트 스타일시트라고 하며 브라우저마다 다를 수 있습니다. 사용자는 자신의 텍스트 표시 환경설정을 설정할 수도 있습니다.

줄 길이를 지정하지 않으면 브라우저에서 텍스트 줄을 화면 가장자리로 줄바꿈합니다. 따라서 웹의 텍스트는 기본적으로 반응형이며 사용자의 표시 영역에 맞게 흐릅니다.

하지만 텍스트가 화면에 맞다고 해서 가독성이 좋은 것은 아닙니다. 좋은 서체의 핵심은 텍스트를 적절한 방식으로 보여주는 것입니다. 사용하기에 적합한 글꼴을 선택하는 것 외에도 서체가 더 중요합니다. 사용자의 선호도, 텍스트 크기, 줄 길이, 텍스트 줄 사이의 거리를 고려해야 합니다.

텍스트 크기

웹상의 텍스트 크기를 알기란 쉽지 않습니다.

작은 화면을 사용하는 사람인 경우 손이 닿는 만큼의 눈과 상당히 가까이에 있으면 안전할 수 있습니다.

하지만 화면이 점점 커질수록 연결하기가 더 어려워집니다. 노트북 크기의 화면은 뷰어 가까이 있을 수 있지만 와이드스크린 데스크톱 모니터는 텔레비전 화면과 비슷한 크기입니다. 사람들은 데스크톱 화면에서는 팔 길이만큼 떨어져 앉아 있지만 텔레비전에서는 훨씬 멀리 앉아 있습니다.

사용자가 화면에서 얼마나 멀리 떨어져 있는지 알 수는 없지만 적절한 것으로 판명될 수 있는 텍스트 크기를 사용해 볼 수는 있습니다. 작은 화면에는 작은 텍스트 크기를 사용하고 큰 화면에는 큰 텍스트 크기를 사용합니다.

화면 크기가 커짐에 따라 미디어 쿼리를 사용하여 font-size 속성을 변경할 수 있습니다.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

텍스트 크기 조정

특정 중단점에서 고정 텍스트 크기 간에 전환하는 것이 상당히 불안정합니다. 더 반응성 있는 접근 방식은 사용자의 기기 너비가 텍스트 크기에 영향을 주도록 하는 것입니다.

CSS의 vw 단위는 '표시 영역 너비'를 나타냅니다. 글꼴 크기를 표시 영역의 너비는 브라우저 너비에 비례하여 텍스트가 증가하고 축소됨을 의미합니다. 따라서 특정 너비에서 텍스트 크기가 얼마인지 예측하기는 어렵지만, 텍스트 크기가 사용자의 브라우저 너비에 적합하다는 점은 알고 있습니다.

글꼴 크기 선언에서 vw 자체를 사용하지 않는 것이 중요합니다.

html {
  font-size: 2.5vw;
}

이렇게 하면 사용자가 텍스트 크기를 조정할 수 없습니다. em, rem, ch와 같은 상대 단위를 함께 사용하면 텍스트의 크기를 조절할 수 있습니다. 이때 CSS calc() 함수가 적합합니다.

html {
  font-size: calc(0.75rem + 1.5vw);
}

브라우저에서 자동으로 계산해 줍니다. 따라서 특정 너비에서 텍스트 크기가 얼마인지 정확히 예측하기는 어렵지만, 텍스트 크기가 올바른 범위에 속한다는 것은 알고 있습니다. 사용자의 브라우저는 정확한 텍스트 크기를 계산합니다.

하지만 텍스트가 좁은 화면에서는 너무 작아지고 넓은 화면에서는 너무 커질 가능성이 있습니다.

텍스트 고정

텍스트가 극단적으로 축소되거나 커지는 것을 원하지 않을 것입니다. CSS clamp() 함수를 사용하여 확장 시작 및 종료 위치를 제어할 수 있습니다. 이렇게 하면 배율이 특정 범위로 '고정'됩니다.

clamp() 함수는 calc() 함수와 같지만 세 개의 값을 사용합니다. 중간값은 calc()에 전달하는 값과 동일합니다. 여는 값은 최소 크기(이 경우 1rem)를 지정하여 사용자가 선호하는 글꼴 크기보다 작아지지 않도록 합니다. 종룟값은 최대 크기를 지정합니다.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

이제 텍스트 크기가 사용자의 화면에 비례하여 축소되고 커지지만 텍스트 크기는 1rem보다 작아지거나 2rem 이상으로 늘어나지 않습니다.

행 길이

웹은 인쇄물이 아닙니다. 하지만 인쇄 세계에서 배울 수 있는 교훈을 웹에 적용할 수 있습니다.

로버트 브링허스트는 고서 서체 스타일의 요소(The Elements of Typographic Style)에서 선 길이(또는 측정)에 대해 이렇게 언급했습니다.

45~75자(영문 기준)는 텍스트 크기로 Serif 텍스트 면에 설정된 단일 열 페이지에 적합한 줄 길이로 널리 알려져 있습니다. 문자와 공백을 모두 세는 66자 줄이 이상적인 것으로 널리 알려져 있습니다. 여러 열 작업의 경우 더 나은 평균은 40~50자(영문 기준)입니다.

CSS에서 직접 줄 길이를 설정할 수 없습니다. line-length 속성이 없습니다. 하지만 컨테이너의 너비를 제한하면 텍스트가 너무 넓어지는 것을 방지할 수 있습니다. max-inline-size 속성이 이 경우에 적합합니다.

px와 같은 고정 단위로 선 길이를 설정하지 마세요. 사용자는 글꼴 크기를 확대 및 축소할 수 있으며 이에 따라 행 길이가 조정됩니다. rem 또는 ch과 같은 상대 단위를 사용하세요.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

너비에 ch 단위를 사용하면 새 줄이 해당 글꼴 크기로 66번째 문자에서 줄바꿈됩니다.

행 간격

CSS에는 line-length 속성이 없지만 line-height 속성은 있습니다.

텍스트 행이 짧을수록 line-height 값이 더 커질 수 있습니다. 그러나 긴 텍스트 줄에 큰 line-height 값을 사용하면 독자의 시선이 한 줄의 끝에서 다음 줄의 시작으로 이동하기 어렵습니다.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

line-height 선언에는 단위가 없는 값을 사용하세요. 이렇게 하면 행 높이가 font-size를 기준으로 합니다.

line-height: 24px;

line-height: 1.5;

조합 및 확장

명확성과 페이지 흐름을 개선하기 위해 사용자 인터페이스를 구축할 때 계층 구조에 우선순위를 두어야 합니다. 이렇게 하는 좋은 방법은 디자인 시스템에 내장된 서체 크기를 사용하는 것입니다.

웹 글꼴

글꼴은 말의 음성과 같습니다. 웹이 가장 긴 시간 동안 글꼴 옵션은 거의 없었습니다. 시스템 글꼴이 유일한 옵션이었습니다. 그러나 이제 콘텐츠의 느낌에 맞는 웹 글꼴을 선택할 수 있습니다.

@font-face를 사용하여 브라우저에 웹 글꼴 파일을 찾을 위치를 알립니다. woff2를 웹 글꼴 형식으로 사용합니다. 잘 지원되고 성능이 가장 좋습니다.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

하지만 웹 글꼴 파일을 추가할 때마다 페이지 로드 시간이 길어져 사용자 환경이 저하될 수 있습니다. 디자인은 최종 픽셀의 모양만이 아니라는 점을 기억하세요. 픽셀이 페인트되는 속도는 사용자 경험에서 중요한 부분입니다. 빠르게 느껴지는 환경이 좋은 사용자 환경입니다.

글꼴 로드 중

브라우저가 글꼴 파일 다운로드를 최대한 빨리 시작하도록 요청할 수 있습니다. 웹 글꼴 파일을 참조하는 문서의 head에 link 요소를 추가합니다. 값이 preload인 rel 속성은 브라우저에 파일의 우선순위를 지정하도록 지시합니다. 값이 font인 as 속성은 브라우저에 이 파일의 종류를 알려줍니다. type 속성을 사용하면 더 구체적으로 지정할 수 있습니다.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

글꼴 파일을 직접 호스팅하는 경우에도 crossorigin 속성을 포함해야 합니다.

CSS font-display 속성을 사용하여 시스템 글꼴에서 웹 글꼴로의 전환을 관리하는 방법을 브라우저에 알립니다. 웹 글꼴이 로드될 때까지 텍스트를 표시하지 않도록 선택할 수 있습니다. 시스템 글꼴을 즉시 표시하고 로드가 완료되면 웹 글꼴로 전환할 수 있습니다. 두 전략 모두 단점이 있습니다. 웹 글꼴이 다운로드될 때까지 기다렸다가 텍스트를 표시하면 사용자는 빈 페이지를 오랫동안 쳐다봐야 할 수도 있습니다. 텍스트를 시스템 글꼴로 먼저 표시했다가 웹 글꼴로 전환하면 사용자가 페이지에서 콘텐츠가 부자연스럽게 변동될 수 있습니다.

좋은 절충안은 텍스트를 표시하기 전에 잠시 기다리는 것입니다. 이 시간이 다 되기 전에 웹 글꼴이 로드되면 콘텐츠가 바뀌지 않고 웹 글꼴을 사용하여 표시됩니다. 이 시간이 지난 후에도 웹 글꼴이 로드되지 않으면 최소한 사용자가 콘텐츠를 읽을 수 있도록 텍스트가 시스템 글꼴을 사용하여 표시됩니다.

웹 글꼴이 최종적으로 로드될 때마다 웹 글꼴이 시스템 글꼴을 대체하도록 하려면 font-display 값 swap를 사용합니다.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

텍스트가 렌더링된 후 시스템 글꼴을 유지하려면 fallback의 font-display 값을 사용합니다.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

가변 글꼴

동일한 서체에 다양한 두께 또는 스타일을 많이 사용하는 경우 개별 글꼴 파일(각 두께 또는 스타일마다 별도의 글꼴 파일)을 많이 사용하게 될 수 있습니다.

가변 글꼴은 파일 하나를 사용하여 이 문제를 해결합니다. 일반, 굵게, 아주 굵게 등에 대해 별도의 파일을 사용하는 대신 가변 글꼴 파일이 반응형입니다. 여기에는 스펙트럼의 가중치 또는 스타일에서 표시해야 하는 모든 정보가 포함되어 있습니다.

즉, 단일 가변 글꼴 파일은 단일 일반 글꼴 파일보다 크지만 단일 가변 글꼴 파일은 여러 일반 글꼴 파일보다 작을 수 있습니다. 다양한 두께를 사용하는 경우 가변 글꼴을 사용하면 성능이 크게 향상될 수 있습니다.

웹에서 좋은 서체는 디자이너가 선택하는 유형만의 문제가 아닙니다. 반응형 서체는 사용자의 기기와 네트워크 연결을 존중하는 것도 중요합니다. 그 결과, 이를 통해 어떤 화면을 보든 적절한 디자인을 얻을 수 있습니다.

이제 반응형 텍스트를 마스터했으므로 반응형 이미지에 대해 자세히 알아보겠습니다.

이해도 확인

서체에 관한 지식 테스트