타이포그래피를 반응형으로 설계하는 방법

반응형 타이포그래피는 주변 공간이 달라져도 제목이 읽기 쉽고 적절히 눈에 띄도록 합니다. 유동형 타이포그래피는 정해진 범위 안에서 크기가 연속적으로 변하고, 브레이크포인트 기반 타이포그래피는 선택한 너비에서 크기가 바뀝니다. 어느 쪽이든 상한과 하한이 필요하며, 텍스트 열의 너비도 콘텐츠에 맞아야 합니다. 휴대전화에서 글자 크기를 줄이는 것은 이 작업의 일부일 뿐입니다. 제목이 컨테이너 안에 들어가더라도 답답해 보이거나 어색한 지점에서 줄이 나뉘거나, 제목을 설명하는 문단을 압도할 수 있습니다.

가상의 제목 “A calmer way to manage complex projects”를 생각해 보세요. 넓은 페이지에서는 두 줄에 걸쳐 안정적으로 보일 수 있습니다. 하지만 좁은 화면에서는 빽빽한 다섯 줄이 되고 “projects”만 맨 아래에 남을 수 있습니다. 그렇다고 곧바로 글자를 줄이는 것이 답은 아닙니다. 열이 불필요하게 좁거나, 글꼴의 글자 폭이 넓거나, 데스크톱용 강제 줄바꿈이 잘못된 형태를 만들고 있을 수 있습니다.

GOV.UK는 큰 제목뿐 아니라 작은 텍스트도 조정했습니다

GOV.UK는 “모바일에서는 모든 글자를 줄인다”는 생각에 유용한 반례를 제공합니다. 현재 타입 스케일에서는 작은 화면에서도 19px 본문 크기를 19px로 유지하는 반면, 특대 제목은 48px에서 32px로 바뀝니다. 읽는 데서 맡는 역할이 다르므로 화면 변화에 대응하는 방식도 다릅니다.

타이포그래피 개정에 관한 설명에서 팀은 작은 텍스트를 축소하는 것과 그로 인해 시각장애인이 받는 영향에 관해 커뮤니티가 우려를 제기했다고 전합니다. 아래 수치를 참고할 때는 현재 구현을 기준으로 삼고, 이전 글은 변경의 동기를 설명하는 자료로 보면 됩니다.

제품 페이지에도 이 사례를 적용할 수 있습니다. 흔히 하나로 묶는 두 가지 결정을 분리하는 것입니다. 화면이 좁아지면 디스플레이용 제목의 시각적 비중을 낮춰야 할 수 있습니다. 하지만 안내, 자격 조건, 본문 문단은 여전히 편안하게 읽을 수 있어야 합니다. 모든 역할에 같은 배율을 적용하면 제목 문제를 해결하는 대신 본문 텍스트에 문제를 만들 수 있습니다.

직접 시험해 볼 수 있는 유동형 타이포그래피 CSS 규칙

디스플레이용 제목의 출발점으로 다음과 같은 규칙을 생각해 볼 수 있습니다.

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

루트 글자 크기가 기본값인 16px일 때, 이 규칙은 뷰포트 390px에서 약 32px, 768px에서 약 43px, 1440px에서 약 63px를 만듭니다. 유용한 점은 텍스트 크기에 하한과 상한이 있다는 것입니다.

계산에서 확인할 만한 전환점은 두 곳입니다. 뷰포트 너비가 400px보다 작으면 최솟값 32px가 적용됩니다. 약 1467px보다 넓으면 최댓값 64px가 적용됩니다. 그 사이에서는 뷰포트 너비가 100px 늘 때 제목 크기가 3px씩 커집니다. 이렇게 이해하면 규칙을 판단하기 쉬워집니다. 예를 들어 900px 부근에서 제목에 어색한 줄이 하나 생긴다면, 다른 모바일 글자 크기를 추측하는 대신 사용 가능한 열 너비와 이 증가율을 비교할 수 있습니다.

이 공식은 검증할 후보로 다루세요. 중간 너비에서는 제목이 열보다 빠르게 커져 화면이 넓어지는데도 줄이 하나 더 생길 수 있습니다. 증가 곡선을 채택하기 전에 가장 긴 실제 제목을 실제 이미지 옆에 놓아 보세요. 중간 상태에서 문제가 생기면 증가율을 줄이거나 열의 공간 배분을 바꾸세요. 제목마다 수동 줄바꿈을 추가하면 유지보수 문제가 생깁니다.

rem이 포함되어 있다고 유동형 규칙이 텍스트 크기 변경 검사를 자동으로 통과하는 것은 아닙니다. 브라우저 확대는 실질적으로 사용할 수 있는 뷰포트 공간과 텍스트 크기를 함께 바꾸며, 뷰포트 단위 항이 크기 증가를 일부 상쇄할 수 있습니다. 확대 기능과 기본 텍스트 크기를 키운 설정에서 실제 렌더링 결과를 시험하세요. 요구되는 것은 스타일시트에 상대 단위가 들어 있다는 사실이 아니라, 콘텐츠를 읽고 이용할 수 있다는 결과입니다.

글꼴을 바꾸기 전에 무엇이 불편한지 설명하세요

제목이 어색하게 느껴지면 무엇이 보이는지 구체적으로 파악하세요. “너무 크다”와 “줄이 너무 많다”는 다릅니다. “너무 빽빽하다”는 글자끼리 붙는다는 뜻일 수도, 줄 사이가 좁다는 뜻일 수도, 텍스트 블록 전체가 이미지에 바짝 붙어 있다는 뜻일 수도 있습니다. 진단마다 필요한 조정이 다릅니다.

제목을 소리 내어 읽은 다음, 각 줄이 그 구절을 어떻게 나누는지 살펴보세요. 짧은 연결어 뒤에서 줄이 끝나면 자연스러운 읽기 리듬이 끊길 수 있습니다. 마지막 줄이 지나치게 짧으면 우연히 그렇게 된 것처럼 보일 수 있습니다. 둘 다 그 자체로 사용성 실패는 아니지만, 다른 부분은 깔끔한 페이지가 덜 완성된 듯 느껴지는 이유가 될 수 있습니다.

이어서 주변 이미지를 잠시 가려 보세요. 이미지가 없을 때 제목이 편안해진다면 타이포그래피만의 문제가 아니라 구성의 문제일 수 있습니다. 이미지의 가장자리는 텍스트 열을 실제보다 좁게 느끼게 할 수 있습니다. 복잡한 일러스트는 빈 배경에서 명확하게 읽히던 문구와 시각적으로 경쟁할 수 있습니다.

제목 단계마다 역할을 정하세요

페이지 제목, 섹션 제목, 카드 제목은 서로 다른 일을 합니다. 페이지 제목은 주제를 제시하고, 섹션 제목은 논리나 제안 내용을 탐색하게 하며, 카드 제목은 반복되는 항목을 구별하게 합니다. 같은 서체를 사용한다는 이유만으로 모두 같은 강도로 커져서는 안 됩니다.

프로젝트 관리 예시에서 주제목은 개성 있게 표현해도 됩니다. “Keep decisions with the work”라는 섹션은 가장 먼저 시선을 끌기 위해 경쟁하지 않으면서도 눈에 띄어야 합니다. “Project history”라는 카드 제목은 설명 옆에 편안하게 자리 잡아야 합니다. 데스크톱에서 모든 단계의 제목이 과도하게 커지면 페이지가 홍보 배너를 모아 놓은 것처럼 느껴질 수 있습니다.

정확한 값을 고르기 전에 요소 간 관계를 정하세요. 어느 단계가 먼저 보여야 하는지, 각 단계의 텍스트는 보통 얼마나 긴지, 이미지 옆에 나타나는지 결정합니다. 그런 다음 각 단계에서 현실적으로 가장 긴 예시를 시험하세요. 가장 짧은 제목에서만 작동하는 타이포그래피 체계는 시연일 뿐, 신뢰할 수 있는 페이지 규칙이 아닙니다.

불명확한 문구를 크기로 보완하려 하지 마세요. “Everything you need”는 아름답게 배치할 수 있어도 그 섹션이 무엇인지 알려 주지 못할 수 있습니다. 독자가 페이지 내용을 알아내려고 문단을 모두 살펴봐야 한다면, 제목을 개선하려면 간격뿐 아니라 더 정확한 언어도 필요할 수 있습니다.

텍스트 열의 너비에 타당한 이유를 부여하세요

제목의 줄바꿈은 배정된 공간에 따라 달라집니다. 글자를 줄이기 전에 컨테이너를 확인하세요. 좌우 패딩, 그리드 간격, 빈 열, 불필요하게 큰 이미지가 텍스트 공간을 차지하고 있을 수 있습니다. 넓은 화면에서는 적절했던 선택이 좁아진 뒤에도 너무 오래 유지된 것일 수 있습니다.

가상의 제목을 두 가지 좁은 레이아웃에 같은 타이포그래피로 배치해 비교하세요. 한쪽은 큰 좌우 여백 때문에 텍스트가 가느다란 열에 끼어 있습니다. 다른 쪽은 페이지의 나머지 부분과 일관성을 유지하면서 여백을 적절히 줄입니다. 두 번째 방식은 크기나 굵기를 전혀 바꾸지 않고도 제목을 더 차분하게 만들 수 있습니다.

넓은 화면에서는 반대 문제가 나타납니다. 제목이 페이지 전체 너비에 걸쳐 늘어나면 긴 가로 띠가 되어 아래 콘텐츠와의 관계가 약해질 수 있습니다. 최대 너비를 정하면 편집상 의도한 형태를 유지할 수 있습니다. 문자 수가 일정한 행 길이를 보장한다고 여기지 말고 실제 제목들을 살펴보며 너비를 고르세요.

한 글꼴 안에서도 모든 글자의 폭이 같지는 않습니다. 폭이 좁은 글자 열두 개가 들어가는 열에 폭이 넓은 글자 열두 개도 들어간다는 보장은 없습니다. 타이포그래피 단위에 기반한 값은 출발점으로 유용하지만, 판단의 근거는 실제 렌더링된 단어입니다. 브랜드명이나 기술 용어를 나누지 않고 유지해야 할 때 특히 중요합니다.

끝없이 커지는 규칙 대신 크기 변화의 범위를 정하세요

몇 개의 단계로 크기를 바꿀 수도 있고 유동형 스케일을 쓸 수도 있습니다. 상한과 하한이 합리적이면 두 방식 모두 작동할 수 있습니다. 중요한 질문은 의도적으로 디자인한 화면들 사이에서 제목이 어떻게 동작하느냐입니다.

web.dev의 타이포그래피 수업은 유동형 크기 조절을 설명하고, 텍스트 크기에 뷰포트 단위만 사용하는 것을 주의하라고 안내합니다. 여기서도 더 넓은 관점이 유용합니다. 읽기 경험은 글꼴 선택만으로 결정되지 않습니다. 상대적인 텍스트 크기 성분을 유지하고 독자가 확대 배율이나 텍스트 환경설정을 바꿀 때의 결과를 시험하세요.

범위의 중간을 확인하세요. 제목이 최소 크기와 최대 크기에서는 좋아 보여도 그 사이에서 어색한 세 줄 블록이 될 수 있습니다. 갑작스러운 크기 전환을 하나 더 추가하는 것보다 열이나 증가율을 조정하는 편이 효과적일 수 있습니다. 문구가 바뀌어도 다른 사람이 유지보수할 수 있을 만큼 이해하기 쉬운 규칙을 유지하세요.

단어 안팎의 공간을 다듬으세요

행 높이: 하나의 구절로 읽히게 하기

줄 간격은 여러 줄 제목이 읽을 수 있는 하나의 단위로 느껴지게 하는 거리입니다. 너무 좁으면 특히 키가 큰 대문자나 아래로 내려오는 획 주변에서 이웃한 줄이 시각적으로 부딪힐 수 있습니다. 너무 넓으면 줄들이 지나치게 분리되어 하나의 구절이 아니라 서로 무관한 라벨 여러 개처럼 느껴집니다.

스타일 패널의 숫자만 보지 말고 실제 글자 형태를 비교하세요. 소문자 높이가 큰 서체는 다른 글꼴에서 잘 맞던 설정에서도 빽빽하게 느껴질 수 있습니다. 굵은 글자는 페이지에서 어두운 부분이 많아져 간격이 더 작아 보일 수 있습니다. 악센트가 있는 문자도 원래 샘플에서는 드러나지 않던 좁은 행 상자 문제를 보여 줄 수 있습니다.

검토할 때는 대문자, 소문자, 문장부호가 섞인 제목을 사용하세요. “WORK BETTER”는 실제로 표시할 대소문자 혼합 문장을 대신하기에 적절하지 않습니다. 중요한 글자 형태 여러 가지를 숨기기 때문입니다. 페이지가 여러 언어를 지원한다면 제목 테스트에 해당 문자 체계도 포함해야 합니다.

제목 아래의 간격은 별도로 판단하세요. 문단 앞의 거리를 늘리려고 줄 간격을 키우면 제목 내부가 달라져 의도하지 않은 효과가 날 수 있습니다. 제목과 문단 사이 간격에 독립된 값을 주고, 두 요소가 여전히 연결되어 느껴지는지 검토하세요.

자간: 단어의 형태 유지하기

줄 사이 공간은 충분한데 제목이 압축되어 보일 때는 자간을 살펴볼 필요가 있습니다. 강한 음수 자간은 큰 정적 구성에서 인상적으로 보이게 할 수 있지만, 작게 렌더링되면 불편해질 수 있습니다. 같은 설정도 글자 굵기가 더 가볍거나 무거우면 다르게 보일 수 있습니다.

서체의 기본 자간에서 시작해 작은 조정을 비교하세요. 둥근 글자, 대각선 획, 반복되는 세로획이 만나는 조합을 살펴보세요. 첫 단어만으로 판단하지 마세요. “calmer”를 보기 좋게 벌려 주는 변화가 구절의 다른 부분은 느슨해 보이게 만들 수도 있습니다.

단어가 시각적으로 하나의 덩어리로 인식되도록 유지하세요. 지나친 양수 자간은 단어 인식을 느리게 하고 문장을 서로 떨어진 글자의 나열처럼 만들 수 있습니다. 전체 너비도 커지므로 없애려던 줄바꿈이 오히려 생길 수 있습니다. 제목이 이미 길다면 자간과 열 너비를 함께 평가해야 합니다.

대문자 제목과 문장형 대소문자를 쓰는 제목을 똑같이 취급하지 마세요. 주제목 위의 짧은 대문자 라벨에는 약간의 추가 간격이 도움이 될 수 있지만, 긴 문장형 제목에는 대개 더 절제된 설정이 필요합니다. 목적은 텍스트의 역할을 지원하는 것입니다. 작은 라벨에서 가져온 스타일이 주제목의 좋은 규칙이 되는 경우는 드뭅니다.

줄바꿈: 변화에 취약한 강제 개행 피하기

의도적인 줄바꿈은 하나의 구성을 개선할 수 있지만, 그 구성을 변화에 취약하게 만들 수도 있습니다. 프로젝트 관리 제목의 “manage” 뒤에 줄바꿈을 넣으면 넓은 화면에서는 마지막 단어들이 아름답게 배치될 수 있습니다. 더 좁아지면 앞부분이 이미 자동으로 줄바꿈되어 예상치 못한 줄이 하나 더 생길 수 있습니다.

수동 줄바꿈을 넣기 전에 너비와 크기 조절을 시도하세요. 그래도 디자인에 수동 줄바꿈이 중요하다면 적용 조건을 기록하고, 그 조건 밖에서는 어떻게 되는지 확인하세요. 영어에서 선택한 줄바꿈이 모든 번역문에도 그대로 유지되어야 한다고 가정하지 마세요.

선호하는 모양을 지키려고 긴 구절 전체를 붙여 두지 마세요. 모든 줄바꿈을 막으면 텍스트가 컨테이너 밖으로 나가거나 읽기 어려울 만큼 작은 크기가 필요할 수 있습니다. 짧은 값과 단위처럼 나누면 실제로 의미를 해치는 경우에만 분리 금지를 적용하고, 그 후 남은 공간도 검토하세요.

마지막 줄이 너무 짧아 보이면 의미를 잃지 않고 문구 자체를 편집할 수 있는지 생각해 보세요. 불필요한 구절을 없애면 문장과 레이아웃 모두 좋아질 수 있습니다. 다만 타이포그래피 때문에 제품의 한계, 의미 있는 조건, 독자가 제안을 식별하는 데 필요한 용어를 삭제해서는 안 됩니다.

색상과 굵기로 위계를 뒷받침하세요

큰 제목에 다른 모든 강조 기법을 한꺼번에 사용할 필요는 없습니다. 두꺼운 굵기, 좁은 자간, 밝은 그라데이션, 강한 그림자가 하나의 텍스트 블록 안에서 서로 경쟁할 수 있습니다. 무엇으로 제목을 돋보이게 할지 정하고 나머지는 절제하세요.

컬러풀한 일러스트가 있는 페이지에서는 어두운 단색 제목이 가장 명확한 읽기 순서를 만들 수 있습니다. 디자인에 은은한 그라데이션이 필요하다면 밝은 부분도 배경 위에서 읽히는지 확인하세요. 원래 크기에서는 명확한 제목도 더 작게 표시하거나 밝은 이미지 옆에서 보면 대비를 잃을 수 있습니다.

보조 정보를 아주 흐리게 만들기 전에 크기, 굵기, 위치의 조합으로 구분하세요. 차분한 부제도 쉽게 읽을 수 있어야 합니다. 캡션과 라벨도 마찬가지입니다. 거의 보이지 않게 만드는 것은 유용한 위계를 만드는 일이 아니라 정보를 없애는 일입니다.

페이지를 빠르게 훑어본 뒤 시간을 들여 읽으며 비교하세요. 첫눈에는 주제를 알 수 있어야 합니다. 자세히 읽을 때는 힘들이지 않고 보조 정보를 파악할 수 있어야 합니다. 모든 제목이 똑같이 강하게 외치고 있다면 강조색을 추가하는 것보다 일부 굵기나 크기를 줄이는 편이 더 효과적일 수 있습니다.

실제로 로드되는 글꼴을 시험하세요

의도한 글꼴이 로드되거나 반대로 로드에 실패하면 디자인이 달라질 수 있습니다. 글자 폭이 달라지면 줄바꿈이 바뀌고 주변 콘텐츠가 밀릴 수 있습니다. 모든 방문자가 즉시 같은 타이포그래피를 본다고 가정하지 말고 대체 글꼴 상태도 검토에 포함하세요.

개발 검토에서는 어떤 글꼴이 실제로 렌더링되고 있는지, 필요한 굵기가 존재하는지 확인하세요. 글꼴 파일에 없는 굵기를 요청하면 의도하지 않은 결과가 나올 수 있습니다. 제목이 유난히 두껍거나 좁아 보인다면 간격을 바꿔 보상하기 전에 파일을 확인하세요.

텍스트의 형태가 바뀔 때 레이아웃에 미치는 영향을 살펴보세요. 문단이 아래로 뛰나요? 배지가 제목과 겹치나요? 높이가 고정된 히어로가 마지막 줄을 자르나요? 이런 관찰은 글꼴이 단지 “달라 보인다”는 보고보다 유용합니다. 레이아웃이 수용해야 하는 조건을 알려 주기 때문입니다.

대체 글꼴이 브랜드 글꼴과 시각적으로 똑같을 필요는 없지만, 페이지는 계속 사용할 수 있어야 합니다. 제목의 줄 수가 달라져도 섹션이 깨지지 않을 만큼 유연하게 만드세요. 브랜드를 정확하게 표현하는 것이 중요하더라도 실제로 로딩 조건이 다양하다는 현실과 함께 다뤄야 합니다.

세 가지 제목으로 간단히 검토하세요

주제목, 긴 섹션 제목, 일반적으로 쓰는 것 중 가장 긴 카드 제목을 고르세요. 별도의 견본으로 떼어 놓지 말고 주변 콘텐츠와 함께 검토하세요. 좁은 화면, 중간 화면, 넓은 화면을 확인한 다음, 그 사이로 크기를 바꾸며 급격한 변화가 있는지 살펴보세요.

각 화면에서 구절 전체를 읽으세요. 줄바꿈이 의미를 유지하는지, 내부 간격이 편안한지, 제목이 문단과 구분되는지 확인합니다. 이어서 브라우저 확대 배율을 높이고 핵심적인 읽기 작업을 반복하세요. 특정 크기 조절 기법이 올바른 동작을 보장한다고 가정하지 말고 실제 결과를 관찰하세요.

유지보수 가능성을 시험하려면 더 긴 대체 제목을 사용하세요. 가상 페이지의 제목을 “A calmer way to manage projects across distributed teams”로 바꿔 봅니다. 이 문구를 최종 채택하려는 것이 아닙니다. 합리적인 편집 변경을 개별 맞춤 수정 없이도 컴포넌트가 지원할 수 있는지 알아보는 것입니다.

결정은 일상적인 언어로 기록하세요. “좁은 화면에서는 제목이 한 줄 더 늘어나도 됩니다. 문장을 온전히 유지하고 섹션 높이가 늘어나게 하세요.” 이는 모든 크기에서 특정 스크린샷의 정확한 줄 수를 유지하는 것보다 오래가는 기준입니다. 다음 편집자에게 디자인이 중시하는 것과 바뀌어도 되는 것을 알려 줍니다.

OpenDesign에서 수정 요청을 구체적으로 하세요

OpenDesign의 HTML 프리뷰와 데스크톱·태블릿·모바일 보기를 사용하면 레이아웃별로 같은 제목을 비교하는 데 도움이 됩니다. 특정 부분을 수정하려면 어떤 제목인지, 무엇이 불편하게 보였는지 알려 주세요. 간격이나 지원되는 스타일 속성만의 문제라면 수동 편집으로 충분할 수 있습니다. 구조를 바꿔야 한다면 의도한 제약과 함께 채팅으로 설명할 수 있습니다.

예를 들어 문구와 서체는 유지하고, 답답한 자간은 풀며, 좁은 화면에서는 제목이 한 줄 더 늘어나도 되도록 요청하세요. 그러면 타이포그래피에 초점을 맞춰 수정할 수 있습니다. 히어로 전체를 더 고급스럽게 해 달라는 모호한 요청은 원래의 읽기 문제를 해결하지 못한 채 일러스트, 색상, 문구를 바꿀 수 있습니다.

변경한 뒤에는 검토 대상으로 고른 세 제목을 모두 다시 확인하세요. 공유 스타일은 보고 있던 제목 외의 요소에도 영향을 줄 수 있습니다. 관련 화면을 비교하고 보조 텍스트가 여전히 의도한 역할을 하는지 확인하세요.