한글과 영어 폰트의 text-align middle의 차이점에 대하여

이라운·2023년 10월 29일

공식문서 읽기

목록 보기

2/2

📑 이번에 다룬 표준 문서:

W3C 의
Requirements for Hangul Text Layout and Typography : 한국어 텍스트 레이아웃 및 타이포그래피를 위한 요구사항
CSS Inline Layout Module Level 3
구글 폰트의 CJK Typesetting Rules
✅ 작성자 편한대로, 이해한 대로, 기억하고 싶은 부분만 chat-gpt 와 함께 작성했습니다
⚡️ 해당 이모지가 있는 부분은 작성자의 사족입니다.

✨ 세 줄 요약

한국어랑 영어 폰트는 작성기준이 다르기 때문에 똑같은 css 를 줘도 세로 중앙 정렬이 다르게 보일 수 있다.
한국어와 영어의 baseline 은 위치와 무게라는 서로 다른 기준을 가지기 때문이다.
이에 대한 내용은 W3C와 구글 폰트의 learn 탭에서 확이할 수 있다.

✒️ 느낀 점

프론트엔드 작업을 하다보면 머리가 빠개지는😡 순간이 온다.
디자인이라는게 생각보다 1px 이 거슬리기 시작하면 다른 사람은 모르는 나만의 괴로움의 시간이 곱절로 길어지게 된다. 그래서 css 작업은 한 번에 모아놓고 처리하는 이유가 자잘하게 꾸준히 고통받기보다는 강하게 한 방 맞는게 더 정신건강에 이롭기 때문이다.
이번에 나를 괴롭힌 디자인은 텍스트의 중앙정렬인데 분명 line-height 라든지 padding, height 심지어 text-align 까지 모두 동일했지만 영어와 한글이 다르게 보인다는 점이었다.
intl을 적용한 서비스기 때문에 한글 영어 모두 잘 보여야 되는데 이상하게 한글은 위아래 여백이 다른듯한 느낌...?

이렇게 아무리 검색해봐도 원하는 결과가 나오지 않아서 머리가 빠개지는 줄 알았다..
그러다가 원인을 발견하고 이건 내가 할 수 있는 작업이 아님을 납득한 뒤에야 그나마 덜 이상한 상태로 수정된 상태도 흐린눈하고 볼 수 있었다.

만약 누군가 (일단 이걸 볼지조차 모르겠는데) 해결책을 안다면 겸허한 자세로 배우겠습니다...

24.02.06(화) 추가

디자이너들 사이에서는 이렇게 폰트별로 높낮이가 다른것에 대해서 이미 널리 공감하고 있는 사실이었다. 전혀 관련없는 다른 부분을 훑다가 브런치 글에서 찾을 수 있었다. 여기에서 한글 맞춤 폰트가 아닌 경우 아래 이미지처럼 위아래 여백이 다르게 표현됨을 한 눈에 볼수 있다.

한글 폰트 개발 표준

W3C

개발하는 사람은 모두 아는 W3C.
이에 대한 설명은 chat-gpt 한테 시켰다.

W3C는 World Wide Web Consortium의 약자로, 웹 기술 및 표준을 개발하고 유지하는 국제 기술 표준화 단체입니다. 이 기구는 월드 와이드 웹의 발전과 표준화를 촉진하며 웹의 상호 운용성을 향상시키는 역할을 합니다. W3C는 HTML, CSS, 웹 접근성 및 다양한 웹 기술과 관련하여 국제적인 웹 표준을 제정하고 유지보수하며 웹의 발전을 지원합니다. - chat-GPT

Requirements for Hangul Text Layout and Typography : 한국어 텍스트 레이아웃 및 타이포그래피를 위한 요구사항

위의 문서를 보게되면 한글이라는 글자가 왜 과학적인 체계와 시스템을 갖춘 문자임에도 개발 언어로는 적합하지 않은지 알 수 있다. 가로 여백부터 세로 정렬, 글자틀 내 글자면 위치 등등 정말 수많은 기준 위에서 동작하기 때문에 우리가 웹에서 보는 한글이 볼만한 수준이었다.

여하튼, 이게 중요한게 아니고 이 부분만 보면 된다.

line-height 를 고정값을 줄 때의 줄길이인데 화살표를 자세히 보면 한글은 기본적으로 저렇게 위에 딱 붙은 상태로 줄 높이에서 위치하고 있는 것을 볼 수 있다. 저걸 보는 순간 아 영어는 그럼 어떻게 되어있지 라는 생각에 검색해보니 아래와 같은 자료를 찾을 수 있었다.

출처: CSS Inline Layout Module Level 3

그래서 아! 이거땜에 다른거구나!! 하면서 유레카를 외쳤는데.. 내 문제상황이 발생한 웹을 다시 보니... 한글은 위쪽이 더 여백이 있었다...😱

문제 상황

이쯤되면 프엔하시는 분들은 문제 상황을 보고싶어 안달이 났을 것이다. 그래서 회사 서비스 캡처..는 맘대로 가져올 수 없어서 직접 html과 css 로 재현했다.

직접 해보고 싶으신 분은 복붙해보시면 될 것 같다.
아 참고로 폰트는 한국어는 Noto Sans KR, 영어는 Noto Sans 일 때만 해봤다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./index.css" />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+KR&display=swap"
			rel="stylesheet"
		/>
		<title>Document</title>
	</head>
	<body>
		<div>
			<h1>한글과 영어간의 text-align middle 비교</h1>
			<h3>line height 1.5 일 때</h3>
			<div id="line-height-1">
				<div class="kr">한국어</div>
				<div class="en">English</div>
			</div>

			<h3>line height 2 일 때</h3>
			<div id="line-height-2">
				<div class="kr">한국어</div>
				<div class="en">English</div>
			</div>

			<h3>line height 3 일 때</h3>
			<div id="line-height-3">
				<div class="kr">한국어</div>
				<div class="en">English</div>
			</div>
		</div>
	</body>
</html>

h1,
h3 {
	font-family: "Noto Sans KR", sans-serif;
	padding-left: 10px;
}

#line-height-1 div {
	background-color: aqua;
	margin: 10px;
	padding-left: 10px;
	border-radius: 5px;
	line-height: 1.5;
}

div .kr {
	font-family: "Noto Sans KR", sans-serif;
}

div .en {
	font-family: "Noto Sans", sans-serif;
}

#line-height-2 div {
	background-color: yellow;
	margin: 10px;
	padding-left: 10px;
	border-radius: 5px;
	line-height: 2;
}

#line-height-3 div {
	background-color: greenyellow;
	margin: 10px;
	padding-left: 10px;
	border-radius: 5px;
	line-height: 3;
}

이렇게 이미지에서 볼 수 있듯이 한국어가 아래 영어에 비해서 위쪽 여백이 미세하게 더 넓은 것을 볼 수 있다.
영어는 글자 위아래 여백이 상대적으로 한글에 비해서는 덜 차이났다.

그래서 다시 더 찾아보니..

구글 폰트에서의 한국어, 중국어, 일본어 폰트 타입세팅 룰

CJK Typesetting Rules

이걸 보게되면 영어와 달리 CJK 언어에서는 baseline 을 맞추는 것이 아닌 글자의 중앙점 Gravity 를 기준으로 한다는 점이다.
위의 영어를 chat-GPT 에게 번역시켜보면

밸런스: 기준선이 아닌 중력 중심
CJK(중국어, 일본어, 한국어) 폰트에는 기준선이라는 개념이 없습니다. 이 아이디어는 글꼴의 밸런스가 대략적으로 em 스퀘어의 중심에 있다는 것이며 (폰트가 비율적이라면 박스는 정사각형이 아닐 수 있음을 기억하십시오), 그래서 옳은 중력 중심은 글꼴 디자인과 쓰기 방향에 따라 달라집니다. 일반적으로 밸런스는 중간에 설정되지만 상하로 이동할 수 있습니다. 중력 중심이 높을 때 폰트는 더 정교하고 우아해 보일 가능성이 높고, 중력 중심이 낮을 때는 더 캐주얼하게 보일 수 있습니다.

이렇게 기준이 다름을 확실하게 확인할 수 있었다!