글자 크기를 결정할 때 화면에 크게 찍힌 가족 이름만 보면 쉽지 않습니다. 같은 글꼴이라도 제목의 몇 글자와 본문의 여러 문장은 다르게 읽힙니다. 본문은 한 줄의 모양보다 다음 줄을 찾는 일, 숫자와 링크를 알아보는 일, 화면을 확대했을 때도 끊기지 않는 일이 중요합니다. 실제로 읽을 길이의 문단을 여러 폭에서 놓고 판단해 봅시다.
출발값을 정하고 실제 크기로 봅니다
웹 본문에서는 16px 또는 1rem을 시작점으로 두고, 글꼴과 독자, 화면에 맞춰 키우거나 줄일 수 있습니다. 이 수치가 모든 화면의 정답은 아닙니다. 브라우저의 확대 비율, 기기의 픽셀 밀도, 사용하는 글꼴의 실제 글자 높이에 따라 체감 크기가 달라집니다. 디자인 도구에서 16으로 맞춘 화면 캡처가 실제 브라우저의 16px과 똑같이 보인다고 가정하지 마세요. 데스크톱 창과 손에 든 휴대폰에서 직접 읽는 편이 낫습니다.
작은 글자는 같은 정보량을 한 화면에 많이 담지만, 받침과 작은 문장부호가 뭉개지면 독자가 뜻을 복원해야 합니다. 큰 글자는 또렷하지만 한 줄이 너무 짧아져 문장이 자주 끊길 수 있습니다. 16px에서 시작했다면 18px 정도의 안과 비교하고, 같은 원고와 같은 폭을 유지해 줄바꿈이 어떻게 달라지는지 봅니다. 숫자 ‘1’과 영문 ‘I’, 쉼표와 마침표도 실제 크기로 확인하세요.
한 줄의 길이가 크기를 바꿉니다
글자 크기만 올려도 한 줄에 들어가는 글자 수가 줄어듭니다. 데스크톱에서 본문 영역을 넓게 잡으면 작은 글자라도 한 줄이 지나치게 길어질 수 있고, 휴대폰에서는 같은 크기라도 단어가 자주 줄을 바꿉니다. 문단의 가로 폭을 먼저 실제 서비스 화면에 맞추고, 그다음 크기를 비교합니다. 읽을 때 줄 끝에서 다음 줄 첫머리로 눈이 쉽게 돌아오는지, 링크가 줄 끝에서 둘로 갈라져 찾기 어려운지 살펴보세요.
본문을 카드 안에 넣는다면 가장 긴 제목과 실제 설명문을 함께 놓습니다. 버튼, 상태 배지, 표의 작은 숫자를 본문과 똑같이 키울 필요는 없지만, 중요한 정보라면 너무 작게 줄여 담지 않는 편이 좋습니다. 길이가 긴 한국어 문장과 날짜가 섞인 한 줄을 모두 시험해야 합니다. 하다 콘덴스드는 폭이 좁은 칸에 더 많은 글자를 담는 선택지지만, 글자 크기를 줄이는 문제를 무조건 해결해 주지는 않습니다.
굵기와 색도 함께 읽힙니다
같은 16px이어도 아주 가는 굵기는 작은 화면에서 흐려질 수 있습니다. 본문이라면 400을 먼저 보고, 글꼴의 획이 가늘어 보이거나 배경과 대비가 약하다면 색과 굵기를 함께 조정합니다. 제목을 700으로 쓰는 것은 본문을 작게 만들어도 된다는 뜻이 아닙니다. 한 글꼴의 여러 굵기를 비교할 때는 각 굵기에서 실제 원고를 읽어야 합니다. 하다 산스에는 100부터 900까지 아홉 단계가 있지만 긴 본문을 전부 가장 가는 단계로 두기보다 400에서 판단을 시작하는 편이 자연스럽습니다.
배경과 글자 색의 대비가 부족하면 크기를 키워도 또렷하지 않을 수 있습니다. 글자 색 대비 검사로 수치를 확인하고, 실제 화면에서 얇은 획이 사라지지 않는지도 보세요. 진한 검정만이 답은 아닙니다. 회색 본문을 쓴다면 링크와 보조 문구가 배경 위에서 충분히 구분되는지 따로 확인합니다.
확대와 작은 화면에서 다시 봅니다
브라우저 확대를 200%로 올렸을 때 문단과 제목이 화면 밖으로 밀리지 않는지, 줄 간격이 글자를 겹치게 하지 않는지 확인하세요. CSS에서 글자 크기를 고정한 뒤 컨테이너 높이까지 고정하면 확대 시 내용이 잘릴 수 있습니다. 휴대폰 가로·세로 방향도 각각 봅니다. 확대해도 메뉴를 닫거나 다음 글로 이동할 수 있어야 합니다. 읽기 어렵다는 문제가 크기 때문인지, 좁은 폭 때문인지, 색 때문인지 한 번에 하나씩 바꿔 확인합니다.
본문과 보조 정보의 차이를 만듭니다
모든 글자를 같은 크기로 두면 제목과 설명이 서로 경쟁합니다. 본문의 기본 크기를 먼저 정한 다음 제목은 크기와 굵기를 올리고, 날짜나 출처처럼 덜 중요한 정보는 색과 여백으로도 구분할 수 있습니다. 보조 정보를 작게 줄일 때도 실제로 읽어야 하는 정보인지 묻습니다. 오류 메시지, 결제 금액, 마감 날짜는 장식이 아니라 행동을 결정하는 내용이므로 작은 회색 글씨로 밀어 넣지 않는 편이 좋습니다.
굵은 글씨가 많을수록 강조의 효과는 줄어듭니다. 긴 문단에서는 핵심 단어 몇 개만 굵게 하고, 제목과 본문의 간격으로 구조를 보여 주세요. 줄이 바뀌는 곳에서 강조 구절이 둘로 갈라지면 뜻이 끊어져 보일 수 있습니다. 모바일 폭에서 그 문장을 다시 읽어 보세요. 한글 본문에 라틴 약어가 자주 들어간다면 라틴 대문자가 한글보다 튀어 보이지 않는지도 살핍니다. 같은 숫자 16px이라도 가족마다 대문자와 소문자의 높이가 달라 글줄의 인상이 바뀝니다.
같은 원고로 가족을 견줘 봅니다
하다 산스는 버튼과 본문이 한 화면에 섞이는 자리, 하다 바탕은 길게 읽는 문장, 하다 라운드는 짧은 안내문에서 서로 다른 장점을 보여 줍니다. 세 가족을 같은 16px과 같은 문단 폭에 놓되, 필요한 경우 글꼴마다 크기를 따로 조정해 읽는 느낌을 다시 맞춰 보세요. 숫자와 영문 이름이 자주 나온다면 그 부분도 원고에 넣습니다. 마지막 판단은 예쁜 한 줄이 아니라 실제로 읽는 길이의 문단을 끝까지 읽고 내리는 편이 좋습니다.
- 본문 크기, 굵기, 행간을 기록하고 같은 폭에서 비교합니다.
- 휴대폰과 데스크톱, 확대 상태에서 줄바꿈과 잘림을 봅니다.
- 한글 받침, 라틴, 숫자, 문장부호, 링크를 실제 원고에 넣습니다.
- 글자 색 대비와 보조 문구의 크기를 별도로 확인합니다.