brunch

You can make anything
by writing

- C.S.Lewis -

by 장모 Jul 12. 2018

개발자를 위한 타이포그래피

알아도 별 쓸모는 없다.

* 개발자가 교양으로 알아둘만한 기초적인 내용을 다룹니다. 그 기준은 제 마음. 

* 한글에 대해서는 아직 잘 모르겠음. 



Serif 세리프

간단히 글자에서 끝부분이 돌출된 글꼴들을 말한다. 붓으로 글씨를 쓰면 시작과 끝부분이 꺾이는 것을 생각하면 되는데 실제로 이런 종류의 글꼴들은 도구 등 물리적인 이유로 그 형태가 만들어졌고, 이후에는 문화적인 디자인적인 이유로 발전했다.  


아래 링크를 눌러보면 세리프 폰트들을 볼 수 있다.


https://fonts.google.com/?category=Serif



San-serif 산세리프

돌출이 없는 글꼴을 말한다. 잡스 덕에 더 유명해진 헬베티카가 대표적이다. 일본과 한국에서는 고딕체라는 말이 산세리프로 정착되었다.   

 

마찬가지로 아래 링크에선 산세리프 폰트들을 볼 수 있다. 

https://fonts.google.com/?category=Sans+Serif



Monospace 모노스페이스

고정폭 글꼴을 말한다. (a와 i의 너비가 같은 것) 다른 용도는 모르겠고, 코딩할 때 오와 열을 맞추기 위해서 모노스페이스 글꼴을 사용하는 경우가 많다. 


예를들어 네이버 d2코딩 글꼴.

https://github.com/naver/d2codingfont


마찬가지로 구글 폰트에서도 모노스페이스 글꼴들을 볼 수 있다.

https://fonts.google.com/?category=Monospace



Font Metrics 

폰트 크기를 20sp(혹은 20pt)로 지정했을 때 실제 차지하는 높이는 폰트마다 다르다. 보통은 View에서 알아서 처리를 하니 상관이 없지만 아주 드물게 폰트의 크기를 계산해야 하는 경우가 있다. 이 문제를 해결하기위해 찾아보다가 FontMetrics API를 찾아서 해결했는데, 이 부분이 한글에 맞는 내용은 아니라서 설명을 봐도 용어를 이해하기가 어려웠다. 어렸을 때 영어노트가 왜 4줄로 그어져 있었는지 이제야 알았다.


안드로이드 API

https://developer.android.com/reference/android/graphics/Paint.FontMetrics


iOS는 아래 API 

https://developer.apple.com/documentation/uikit/uifont


아래 그림을 보면 쉽게 뭔지 알 수 있다.


우선 알아야 하는 것은 baseline. 글자들이 그 위에 그려진다. top, ascent는 baseline으로 부터의 거리로 -값을 갖는다. descent와 bottom은 +값. x-height는 진짜로 x자의 높이를 나타낸다. (자세한 설명은 API문서에서 확인.)


하지만 이 API로 넘어오는 크기들도 실제 그려지는 것과 많이 다르다. 폰트마다 여백같은 것이 있는데 특히 한글 폰트들의 경우 계산할 수 없게 이상한 값들을 넘겨주는 경우가 있었다. 글꼴이 사용하는 영역을 계산하는 용도로는 사용할 수 있는데, 실제 그려지는 글자의 크기, 비율 같은 것을 계산하는 용도로는 사용할 수 없었다. 



Bold Italic 볼드와 이탤릭

HTML엔 <b>와 <i> 태그가 있고, 프로그램들에선 옵션만 켜면 볼드체와 이탤릭체로 표시가 된다. 그런데 이런것들은 짝퉁 볼드체와 이탤릭체였다. 제대로 된 볼드와 이탤릭 폰트가 따로 있고, 이를 사용해야 제대로 된 볼드체와 이탤릭체라고 할 수 있다. 


아래 이미지는 Noto Sans인데, Regular와 Regular Italic을 비교해보면 e, a 등이 단순히 기울인 것이 아니라 다른 모양인 것을 볼 수 있다. 또한 Bold의 경우도 단순히 Regular의 주변을 두껍게 했다면 d의 연결부위가 저런 형태가 될 수 없다. 뭐 결론은 볼드나 이탤릭을 사용해야하는 경우, 해당 폰트를 통해 지원하는 것이 좋다는 것이다. (하지만 현실은 한글 폰트 용량때문에 앱에선 무리.)

Noto Sans



대문자와 소문자를 뜻하는 uppercase, lowercase 유래

활자인쇄 시대에 식자공분들이 대문자는 위쪽 케이스에 소문자는 아래 케이스에 보관하던 것에서 유래했다.  


Wikipedia: Maggie McCain -CC-BY2.0





안드로이드

안드로이드에서 글자 크기를 정할 땐, 어지간하면 메터리얼 디자인에서 가이드하는 카테고리 그대로 사용하는 것을 권장한다. TextView.textAppearance를 통해서 지정하면 보기에도 좋고 개발자, 디자이너 모두 편하다. 


https://material.io/design/typography/the-type-system.html




혹시 평소 폰트를 만들어 보고 싶다는 생각을 했다면 


오픈소스 폰트 데이터 폰트 포지가 있다. 더 중요한 것은 아래 링크로 가서 'Document'를 보면 폰트포지를 중심으로 폰트에 대한 내용이 잘 정리되어 있다. 만들 생각이 없어도, 폰트포지에 관심이 없어도, 폰트를 더 알고 싶다면 읽어보는 것을 추천합니다.


http://fontforge.github.io/en-US/



끝. 



매거진의 이전글 TODO 앱 개발 준비

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari