피그마 텍스트, 그리고 라인 높이

여러분의 디자인은 어느쪽인가?

피그마로 직접 그린 이미지

여러분의 디자인은 어느쪽인가?

위 스크린샷에서 서로 다른 한가지는 본문 텍스트의 Line Height 이다.

왼쪽은 아무런 설정을 건드리지 않았고 오른쪽은 텍스트에 Line Height 를 주었다.

이 하나의 설정만으로도 전체 디자인에 큰 영향을 미친다.

피그마로 직접 그린 이미지

Lien Height 설정을 바꾸면 그와 동반하여 무엇이 변할까?

위 스크린샷에서 보듯이 타이틀과 설명문 사이의 간격이 틀려진다.

왜 이런 현상이 나타나는지 알아보자.

피그마로 직접 그린 이미지

텍스트 폰트 사이즈를 40으로 동일하게 하고 폰트 스타일만 바꾸어 보자.

왼쪽과 오른쪽 높이값과 넓이값이 다른것을 볼 수 있다.

아무런 설정을 건드리지 않은 상태에서는 폰트 고유의 매트릭스를 통해 넓이와 높이가 결정된다.

피그마로 직접 그린 이미지

이것은 폰트 제작자에 따라 달라진다.

피그마로 직접 그린 이미지

여러분은 지금까지 라인 높이에 대해 어떻게 이해하고 있는지 궁금하다.

필자또한 상당시간동안 위쪽에 있는것으로 알고 있었다.

필자가 예전에 외부 프로젝트를 진행하면서 클라이언트에게 타이틀과 본문 간격이 틀리다고 엄청 까인적이 있었다.

그 클라이언트는 디자이너 출신이었던 기억이 난다.

그 사건으로 인해 Line Height에 대해 올바른 지식을 가지게 되었다.

좀더 깊이 들어가면 폰트 매트릭스에 대한 이해부터 시작해야 되므로 이부분은 이글에서는 생략한다.

피그마로 직접 그린 이미지

Line Height에 대해 알아보기 위해 두줄 간격의 텍스트를 만들어 보았다.

처음과 두번째를 보면 아무런 설정없이 폰트고유의 높이가 적용되면 줄이 바뀔때마다 배수로 증가한다.

세번째와 같이 폰트에 Line Height를 적용해도 배수로 적용된다.

다만, 여기서 눈여겨볼 내용은 설정한 값에서 폰트 높이를 뺀값을 이등분하여 폰트 위쪽과 아래쪽에 배분한다.

이게 단일 텍스트로 작업한다면 별문제가 없을수도 있지만 첫 스크린샷처럼 타이틀과 본문이라는 형태로 만나면 예전의 필자처럼 여러분도 누군가에게 엄청 까일수도 있다.

누군가에게 까이는것을 두려워하지 말자.

그런 사건들을 통해 업그레이드 될수 있으니 말이다.

피그마로 직접 그린 이미지

위 스크린샷은 html과 css로 실제 브라우저에 구현해본 것이다.

디자인에서는 타이틀과 본문만 만들겠지만 보통의 개발자들은 이렇게 두개를 감싸는 부모를 만든후에 디자인을 개발에 반영한다.

간략하게 이유를 설명하면 타이틀과 본문의 정렬을 제어할 수 있기 때문이다. 

( 개발을 다했는데 타이틀은 오른쪽으로 붙여주시고 본문은 중앙정렬로 해주세요… 이런것을 대비하는 개발자들 고유의 특성때문이기도 하다. )

이런 부분도 챙겨서 디자인을 한다면 개발자들과 친하게 지낼수 있다.

---

오늘의 글쓰기 끄읕~ ( 몇번 글을 쓰다보니 처음 글쓰던것과 비교해 시간이 많이 줄었다. )