서체

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

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

하지만 텍스트가 화면에 표시된다고 해서 읽기 편안한 것은 아닙니다. 좋은 서체는 텍스트를 적절한 방식으로 표시하는 데 있습니다. 타이포그래피는 적합한 글꼴을 선택하는 것 이상입니다. 사용자 환경설정, 텍스트 크기, 줄 길이, 텍스트 줄 간격을 고려해야 합니다.

텍스트 크기

웹의 텍스트 크기를 알기가 어렵습니다.

작은 화면을 사용하는 경우 화면이 눈에서 손 한 뼘 정도 떨어져 있을 가능성이 높습니다.

하지만 화면이 점점 커지면서 이러한 연결을 만들기가 어려워집니다. 노트북 크기의 화면은 시청자와 상당히 가까울 수 있지만 와이드스크린 데스크톱 모니터는 텔레비전 화면과 크기가 비슷합니다. 사람들은 데스크톱 화면에서 팔 길이만큼 떨어진 곳에 앉지만 텔레비전에서는 훨씬 더 멀리 떨어져 앉습니다.

하지만 화면에서 얼마나 떨어져 있는지 확실히 알 수는 없으므로 적절한 텍스트 크기를 사용해 보세요. 작은 화면에는 작은 텍스트 크기를 사용하고 큰 화면에는 큰 텍스트 크기를 사용합니다.

미디어 쿼리를 사용하여 화면 크기가 넓어짐에 따라 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자는 텍스트 크기의 세리프 텍스트 서체로 설정된 단일 열 페이지에 적합한 줄 길이로 널리 간주됩니다. 문자와 공백을 모두 포함하여 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;
}

하지만 추가하는 모든 웹 글꼴 파일은 페이지 로드 시간을 늘려 사용자 환경을 저하시킬 수 있습니다. 디자인은 최종 픽셀의 모양에만 관한 것이 아닙니다. 이러한 픽셀이 얼마나 빨리 그려지는지는 사용자 환경에서 매우 중요합니다. 빠르게 느껴지는 환경이 좋은 사용자 환경입니다.

글꼴 로드

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

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

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

CSS font-display 속성을 사용하여 브라우저에 시스템 글꼴에서 웹 글꼴로 전환하는 방법을 알립니다. 웹 글꼴이 로드될 때까지 텍스트를 전혀 표시하지 않도록 선택할 수 있습니다. 시스템 글꼴을 즉시 표시한 다음 로드되면 웹 글꼴로 전환할 수 있습니다. 두 전략 모두 단점이 있습니다. 웹 글꼴이 다운로드될 때까지 기다렸다가 텍스트를 표시하면 사용자가 답답할 정도로 오랫동안 빈 페이지를 보게 될 수 있습니다. 시스템 글꼴로 텍스트를 먼저 표시한 다음 웹 글꼴로 전환하면 사용자가 페이지에서 콘텐츠가 갑자기 이동하는 것을 경험할 수 있습니다.

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

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

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

텍스트가 렌더링된 후 시스템 글꼴을 유지하려면 font-display 값을 fallback로 사용하세요.

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

가변 글꼴

동일한 서체의 다양한 두께나 스타일을 많이 사용하는 경우 각 두께나 스타일마다 별도의 글꼴 파일이 필요하므로 많은 별도의 글꼴 파일을 사용하게 될 수 있습니다.

가변 글꼴은 하나의 파일을 사용하여 이 문제를 해결합니다. 일반, 굵게, 엑스트라 볼드 및 기타 변형에 별도의 파일이 있는 대신 가변 글꼴 파일은 반응형입니다. 다양한 가중치 또는 스타일로 표시하는 데 필요한 모든 정보가 포함되어 있습니다.

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

웹에서 좋은 서체는 디자이너가 선택하는 서체에만 국한되지 않습니다. 반응형 서체는 사용자의 기기와 네트워크 연결을 존중하는 것이기도 합니다. 최종 결과는 어떻게 보든 적절한 디자인입니다.

이제 반응형 텍스트를 익혔으니 반응형 이미지를 살펴보겠습니다.

이해도 테스트

서체에 대한 지식 테스트