텍스트에 스타일을 지정하지 않으면 브라우저에서 고유한 기본 스타일을 적용합니다. 이를 사용자 에이전트 스타일시트라고 하며 브라우저마다 다를 수 있습니다. 사용자는 텍스트 표시 방식을 직접 설정할 수도 있습니다.
줄 길이를 지정하지 않으면 브라우저는 화면 가장자리에서 텍스트 줄을 줄바꿈합니다. 따라서 웹의 텍스트는 기본적으로 반응형이며 사용자의 표시 영역에 맞게 움직입니다.
하지만 텍스트가 화면에 딱 맞다고 해서 읽기 편한 것은 아닙니다. 좋은 서체를 사용하면 텍스트를 적절하게 표현할 수 있습니다. 서체에는 적절한 글꼴을 선택하는 것이 전부가 아닙니다. 사용자의 환경설정, 텍스트 크기, 줄 길이, 텍스트 줄 사이의 거리를 고려해야 합니다.
텍스트 크기
웹에 있는 텍스트의 크기를 알기란 쉽지 않습니다.
작은 화면을 사용하는 사용자의 경우 화면을 눈과 매우 가까이에서 두 손만큼 떨어질 수 있습니다.
하지만 화면이 점점 커지면 이러한 연관성은 더 어렵습니다. 노트북 크기의 화면은 뷰어와 상당히 가깝지만 와이드스크린 데스크톱 모니터는 텔레비전 화면과 거의 비슷한 크기입니다. 사람들은 데스크톱 화면에서 팔 길이만큼 떨어져 있지만 TV에서는 훨씬 더 멀리 떨어져 있습니다.
사용자가 화면에서 얼마나 멀리 떨어져 있는지는 알 수 없지만 적절한 텍스트 크기를 사용해 볼 수 있습니다. 작은 화면에는 작은 텍스트 크기를, 큰 화면에는 큰 텍스트 크기를 사용합니다.
화면 크기가 넓어짐에 따라 미디어 쿼리를 사용하여 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를 넘지 않습니다.
행 길이
웹은 인쇄되지 않지만 인쇄의 세계에서 교훈을 얻어 웹에 적용할 수 있습니다.
로버트 브링허스트는 저서 서체 스타일의 요소에서 줄 길이 (또는 측정)에 대해 이렇게 이야기했습니다.
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 속성을 사용하여 시스템 글꼴에서 웹 글꼴로의 전환을 관리하는 방법을 브라우저에 알립니다. 웹 글꼴이 로드될 때까지 텍스트를 전혀 표시하지 않도록 선택할 수 있습니다. 시스템 글꼴을 즉시 표시하고 로드되면 웹 글꼴로 전환할 수 있습니다. 두 전략 모두 단점이 있습니다. 웹 글꼴이 다운로드될 때까지 기다렸다가 텍스트를 표시하면 사용자가 당혹스러울 정도로 빈 페이지를 보고 있을 수 있습니다. 텍스트를 시스템 글꼴로 먼저 표시한 다음 웹 글꼴로 전환하면 페이지의 콘텐츠가 부자연스럽게 이동할 수 있습니다.
좋은 방법은 텍스트를 표시하기 전에 잠시 기다리는 것입니다. 이 시간이 다 되기 전에 웹 글꼴이 로드되면 콘텐츠 이동 없이 웹 글꼴을 사용하여 텍스트가 표시됩니다. 시간이 경과한 후에도 웹 글꼴이 로드되지 않으면 사용자가 최소한 콘텐츠를 읽을 수 있도록 시스템 글꼴을 사용하여 텍스트가 표시됩니다.
웹 글꼴이 최종적으로 로드될 때마다 웹 글꼴이 시스템 글꼴을 대체하도록 하려면 swap의 font-display 값을 사용합니다.
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
텍스트가 렌더링된 후에도 시스템 글꼴을 유지하려면 font-display 값을 fallback로 사용합니다.
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
가변 글꼴
동일한 서체의 다양한 두께나 스타일을 사용하는 경우 여러 개별 글꼴 파일(두 두께 또는 스타일마다 별도의 글꼴 파일)을 사용하게 될 수 있습니다.
가변 글꼴은 하나의 파일을 사용하여 이 문제를 해결합니다. 일반, 굵게, 추가 굵게 등을 위한 별도의 파일을 갖는 대신 가변 글꼴 파일은 반응형입니다. 여기에는 다양한 두께나 스타일에 걸쳐 표시하기 위해 필요한 모든 정보가 포함되어 있습니다.
즉, 단일 가변 글꼴 파일이 단일 일반 글꼴 파일보다 크지만 단일 가변 글꼴 파일은 여러 일반 글꼴 파일보다 작을 수 있습니다. 다양한 두께를 사용하는 경우 가변 글꼴을 사용하면 성능을 크게 높일 수 있습니다.
웹에서 좋은 서체는 디자이너가 선택한 서체에 국한되지 않습니다. 반응형 서체는 사용자의 기기와 네트워크 연결을 존중하는 것도 중요합니다. 결과적으로 어떤 식으로 보아도 잘 어울리는 디자인을 얻을 수 있습니다.
반응형 텍스트에 대해 알아보았으니 이제 반응형 이미지에 대해 알아보겠습니다.
학습 내용 확인하기
서체에 관한 지식 테스트
표시 영역 내에서 텍스트를 줄바꿈하려면 스타일을 추가해야 합니다.
clamp()는 유동적인 서체에 유용한 이유는 다음과 같습니다.
calc() 함수를 쉽게 삽입할 수 있습니다.clamp()를 사용하는 것은 좋지 않습니다.clamp()를 사용하는 것은 좋지 않습니다.이 가이드에서 어떤 유형의 line-height 값이 권장되었나요?
24pxline-height에 픽셀 값을 사용하지 말라고 명시되어 있습니다.2rem1.52vwline-height로 인해 문제가 발생할 수 있습니다.font-display의 기능은 무엇인가요?
block 또는 inline-block로 설정하도록 허용합니다.